dialog[data-block-receipt] {
  --receipt-page-width: 80mm;
  --receipt-paper-width: 72mm;
  --receipt-top-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 1 1 0 2 1z'/%3E%3C/svg%3E");
  --receipt-bottom-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0 2 0 1 1z'/%3E%3C/svg%3E");
  --receipt-dialog-padding-block: var(--page-x);
  --receipt-tooth-count: 36;
  --receipt-tooth-size: 0.16rem;

  position: fixed;
  inset: 0 0 auto;
  width: min(100% - 2rem, 28rem);
  max-height: 100dvh;
  margin: 0 auto;
  border-radius: 0;
  overflow-y: auto;
  padding-block: var(--receipt-dialog-padding-block);
  color: var(--black);
  background: transparent;
  font-family: var(--font-mono);
  overscroll-behavior: contain;
  scrollbar-width: none;

  :is(
    [data-receipt-head] > h2,
    [data-receipt-section] > h3,
    [data-receipt-row] > span,
    [data-receipt-row] > strong,
    [data-receipt-row] small,
    [data-receipt-note],
    [data-receipt-qr] > span,
    [data-receipt-qr] > a
  ) {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }

  [data-receipt-paper] {
    position: relative;
    display: grid;
    gap: 0.375rem;
    width: min(100%, var(--receipt-paper-width));
    margin-inline: auto;
    padding: calc(var(--receipt-tooth-size) + 0.5rem) 1rem
      calc(var(--receipt-tooth-size) + 0.75rem);
    border-radius: 0;
    background: var(--white);
    mask:
      var(--receipt-top-teeth) top left / calc(100% / var(--receipt-tooth-count))
        var(--receipt-tooth-size) repeat-x,
      linear-gradient(#000 0 0) 0 var(--receipt-tooth-size) / 100%
        calc(
          100% - var(--receipt-tooth-size) - var(--receipt-tooth-size)
        )
        no-repeat,
      var(--receipt-bottom-teeth) bottom left /
        calc(100% / var(--receipt-tooth-count)) var(--receipt-tooth-size)
        repeat-x;
  }

  [data-receipt-head] {
    --block-title-height-color: color-mix(in oklch, var(--black) 62%, transparent);
    --block-title-height-line-height: var(--line-height-base);
    --block-title-height-size: var(--font-size-base);
    --block-title-label-size: 1.375rem;

    display: grid;
    gap: 0.3125rem;
    align-items: center;
    justify-items: center;
    margin-block-start: 0.5rem;
    text-align: center;

    > h2 {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35em;
      align-items: baseline;
      justify-content: center;
      min-width: 0;
      color: var(--black);
      font-family: var(--font-mono);
      font-weight: var(--font-weight-regular);
      line-height: 1;
    }
  }

  [data-receipt-section] {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
    padding-top: 0.75rem;

    > h3 {
      color: var(--black);
      font-family: var(--font-mono);
      font-weight: var(--font-weight-strong);
      text-transform: uppercase;
    }
  }

  [data-receipt-row] {
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    min-width: 0;

    > span {
      color: color-mix(in oklch, var(--black) 58%, transparent);
      text-transform: uppercase;
    }

    > strong {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--black);
      font-weight: var(--font-weight-strong);
      text-align: right;

      small {
        display: block;
        color: color-mix(in oklch, var(--black) 52%, transparent);
        font-weight: var(--font-weight-regular);
      }
    }

    &[data-receipt-row="wide"] {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.125rem;

      > strong {
        word-break: break-all;
        text-align: left;
      }
    }

    &[data-receipt-row="amount"],
    &[data-receipt-row="total"] {
      align-items: start;

      > strong {
        display: grid;
        gap: 0.125rem;
      }
    }

    &[data-receipt-row="total"] {
      border-block: 1px dashed
        color-mix(in oklch, var(--black) 35%, transparent);
      padding-block: 0.375rem;

      > span,
      > strong {
        color: var(--black);
      }
    }
  }

  [data-receipt-note] {
    overflow: hidden;
    color: var(--black);
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-receipt-brand] {
    display: grid;
    justify-items: center;
    border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
    padding-top: 0.5rem;
  }

  [data-receipt-qr] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
    padding-top: 0.75rem;
    text-align: center;

    > span {
      color: var(--black);
      text-transform: uppercase;
    }

    img {
      width: min(100%, 10rem);
      aspect-ratio: 1;
      image-rendering: pixelated;
    }

    a {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--black);
      text-decoration: none;
    }
  }

  [data-receipt-controls] {
    position: fixed;
    bottom: 0.5rem;
    left: 50%;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    width: min(100% - 2rem, var(--receipt-paper-width));
    transform: translateX(-50%);

    form {
      display: contents;
    }

    button {
      padding: 0.25rem 0.375rem;
      font-size: var(--font-size-xs);
    }

    [data-receipt-action="close"] {
      --button-background: var(--red);
      --button-hover-background: var(--black);
      --button-color: var(--black);
    }

    [data-receipt-action="print"] {
      --button-background: var(--green);
      --button-hover-background: var(--black);
      --button-color: var(--black);
    }

    @media (hover: hover) and (pointer: fine) {
      [data-receipt-action="close"]:hover {
        color: var(--red);
      }

      [data-receipt-action="print"]:hover {
        color: var(--green);
      }
    }

    [data-receipt-action="close"][data-press] {
      color: var(--red);
    }

    [data-receipt-action="print"][data-press] {
      color: var(--green);
    }

    [data-receipt-action]:active {
      color: var(--black);
    }
  }
}

@media print {
  @page {
    size: 80mm auto;
    margin: 4mm;
  }

  html,
  body {
    background: white !important;
  }

  body > :not(dialog[data-block-receipt]) {
    display: none !important;
  }

  dialog[data-block-receipt] {
    position: static;
    display: block;
    width: var(--receipt-page-width);
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: visible;
    padding: 0;
    color: black;
    background: white;
    overscroll-behavior: auto;
  }

  dialog[data-block-receipt]::backdrop {
    display: none;
  }

  dialog[data-block-receipt] [data-receipt-paper] {
    width: var(--receipt-paper-width);
    padding: calc(var(--receipt-tooth-size) + 0.5rem) 1rem
      calc(var(--receipt-tooth-size) + 0.75rem);
    border-radius: 0;
    color: black;
    background: white;
    font-size: 8pt;
    line-height: 1.25;
  }

  dialog[data-block-receipt] :is(
    [data-receipt-head] > h2,
    [data-receipt-row] > span,
    [data-receipt-row] > strong,
    [data-receipt-row] small,
    [data-receipt-section] > h3,
    [data-receipt-qr] > span,
    [data-receipt-qr] > a
  ) {
    font-size: 8pt;
    line-height: 1.25;
  }

  dialog[data-block-receipt] [data-receipt-controls] {
    display: none;
  }
}