/* F9–F10 counter: one column, big targets, for one hand; the scanner. */
@layer components {
  .counter {
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline: auto;
  }

  .counter__header {
    & h1 { margin: 0; }
    & .headline__facts { margin-block-start: var(--block-space-half); }
  }

  .counter__name { margin: 0; font-size: var(--text-large); font-weight: 700; }

  .counter__unverified { margin: 0; color: var(--color-warning); font-size: var(--text-small); font-weight: 600; }

  .scanner__video {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #000;
    border-radius: var(--radius-large);
  }

  /* The viewfinder, once the camera is on: four corners at the logo's thickness where the code
     goes, and a line sweeping it. The corners are one violet frame with its sides masked away. */
  .scanner__frame {
    --stroke: 0.45rem;

    position: relative;

    &:has(video:not([hidden]))::after {
      content: "";
      position: absolute;
      inset: 16%;
      border: var(--stroke) solid var(--color-link);
      border-radius: var(--radius-x-large);
      mask:
        linear-gradient(#000 0 0) center / 50% 100% no-repeat,
        linear-gradient(#000 0 0) center / 100% 50% no-repeat,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
      pointer-events: none;
    }

    &:has(video:not([hidden]))::before {
      content: "";
      position: absolute;
      inset-inline: 20%;
      inset-block-start: 20%;
      block-size: 2px;
      background: var(--color-link);
      box-shadow: 0 0 0.75rem var(--color-link);
      pointer-events: none;
      z-index: 1;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .scanner__frame:has(video:not([hidden]))::before { animation: scanner-sweep 1.8s ease-in-out infinite alternate; }
  }

  @keyframes scanner-sweep { to { inset-block-start: 80%; } }

  .scanner__status { margin: 0; }

  /* At the counter the large buttons are larger still: a knuckle or a gloved finger hits them. */
  .counter .btn--large { min-block-size: 4.5rem; font-size: var(--text-large); }

  /* adr/0015: the countdown to a stamp that credits itself, a bar draining over the window, and
     one large "Deshacer". */
  .autostamp {
    display: grid;
    gap: var(--block-space);
    padding: var(--block-space-double) var(--inline-space-double);
    text-align: center;
    background: var(--color-link-tint);
    border-radius: var(--radius-large);
  }

  .autostamp__status { margin: 0; font-size: var(--text-large); font-weight: 700; color: var(--color-link); }

  .autostamp__bar {
    display: block;
    block-size: 0.375rem;
    background: color-mix(in srgb, var(--color-link) 25%, transparent);
    border-radius: var(--radius-pill);

    &::after {
      content: "";
      display: block;
      block-size: 100%;
      background: var(--color-link);
      border-radius: inherit;
      animation: autostamp-drain 3s linear forwards;
    }
  }

  @keyframes autostamp-drain { from { inline-size: 100%; } to { inline-size: 0%; } }
}