@layer pages {
  .qr {
    & .heading .action:disabled {
      display: none;
    }

    & .square {
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      inline-size: 100%;
      max-inline-size: 288px;
      margin-inline: auto;

      & > * {
        grid-area: 1 / 1;
      }

      & .placeholder {
        padding: 0;
        text-align: center;
      }
    }

    &[data-state='ready'] .square {
      background: #fff;
    }

    &[data-state='empty']:has(fieldset:not(:disabled)) .status {
      display: none;
    }

    &[data-state='stale'] .preview {
      opacity: 0.4;
    }

    & .meter {
      max-inline-size: 288px;
      margin: var(--space-16) auto 0;
    }

    & .track {
      block-size: var(--space-8);
      overflow: hidden;
      border-radius: var(--radius-control);
      background: var(--color-page);
      box-shadow: var(--shadow-well);
    }

    & .fill {
      display: block;
      inline-size: var(--share);
      min-inline-size: 3px;
      block-size: 100%;
      background: var(--color-green);
    }

    & [data-level='medium'] .fill {
      background: var(--color-cyan);
    }

    & [data-level='dense'] .fill {
      background: var(--color-danger);
    }

    & .meter .note {
      margin-block: var(--space-4) 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      & .preview {
        transition: opacity var(--transition-state);
      }

      & .fill {
        transition: inline-size 200ms ease-out;
      }
    }

    & .preview {
      display: grid;
      place-items: center;
      inline-size: 100%;
      min-inline-size: 0;
      forced-color-adjust: none;

      & svg {
        display: block;
        max-inline-size: 100%;
      }
    }
  }
}