@layer components {
  .identify-session {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: var(--space-0);
  }

  .identify {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .identify[hidden] {
    display: none;
  }

  .identify__viewfinder {
    position: relative;
    display: grid;
    grid-template-areas: "view";
    place-items: center;
    overflow: hidden;
    inline-size: var(--size-fill);
    block-size: var(--modal-inline-size);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-muted);
  }

  .identify__viewfinder::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
    background-color: transparent;
    pointer-events: none;
  }

  .identify[data-flash] .identify__viewfinder::after {
    animation: identify-flash var(--dur-base) var(--ease-calm);
  }

  @keyframes identify-flash {
    from {
      background-color: var(--color-surface);
    }
  }

  .identify__video {
    position: absolute;
    inset: var(--space-0);
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    object-fit: cover;
  }

  .identify:not([data-state="live"]) .identify__video {
    visibility: hidden;
  }

  .identify__message {
    grid-area: view;
    z-index: var(--z-raised);
    display: none;
    max-inline-size: var(--measure);
    padding: var(--space-6);
    font: var(--type-body);
    text-align: center;
    text-wrap: pretty;
  }

  .identify[data-state="starting"] .identify__message--starting,
  .identify[data-state="blocked"] .identify__message--blocked,
  .identify[data-state="unavailable"] .identify__message--unavailable {
    display: block;
  }

  .identify__bar {
    display: grid;
    gap: var(--space-5);
  }

  .identify__count {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
  }

  .identify__shots {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-block: var(--space-4);
    padding-inline-end: var(--space-4);
    scrollbar-width: none;
  }

  .identify__shots:not(:has(li)) {
    display: none;
  }

  .identify__shot,
  .identify__piece {
    position: relative;
    flex: none;
  }

  :is(.identify__shot, .identify__piece) .file-preview--thumb {
    --file-preview-size: var(--button-size-large);
  }

  .identify__piece--failed .file-preview {
    border-color: var(--color-caution);
    border-style: dashed;
  }

  .identify__piece-count {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    min-inline-size: var(--space-6);
    padding-inline: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: var(--type-caption);
    text-align: center;
    box-shadow: var(--elev-2);
  }

  .identify__retry {
    position: absolute;
    inset: var(--space-0);
    display: grid;
    place-items: center;
    background: none;
    -webkit-tap-highlight-color: transparent;
  }

  .identify__retry-label {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-caution);
    font: var(--type-label);
    box-shadow: var(--elev-2);
  }

  .identify__shot[data-state="uploading"] .file-preview {
    border-style: dashed;
  }

  .identify__shot[data-state="failed"] .file-preview {
    border-color: var(--color-danger);
  }

  .identify__remove {
    --icon-size: var(--input-icon-size);

    position: absolute;
    inset-block-start: calc(var(--space-5) * -1);
    inset-inline-end: calc(var(--space-5) * -1);
    display: grid;
    place-items: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    background: none;
    color: var(--color-ink);
    -webkit-tap-highlight-color: transparent;
  }

  .identify__remove .icon {
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    box-shadow: var(--elev-2);
  }

  .identify__actions {
    display: grid;
    grid-template-columns: minmax(var(--space-0), var(--track-fill)) auto minmax(var(--space-0), var(--track-fill));
    align-items: center;
    gap: var(--space-4);
  }

  .identify__actions > :first-child {
    justify-self: start;
  }

  .identify__actions > :last-child {
    justify-self: end;
  }

  .identify__shutter {
    display: grid;
    inline-size: var(--button-size-large);
    block-size: var(--button-size-large);
    border: var(--space-1) solid var(--color-ink);
    border-radius: var(--radius-pill);
    background-color: var(--color-ink);
    box-shadow: inset var(--space-0) var(--space-0) var(--space-0) var(--space-2) var(--color-bg);
    transition: scale var(--dur-fast) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
  }

  .identify:not([data-state="live"]) .identify__shutter {
    visibility: hidden;
  }

  .identify__shutter:active {
    scale: var(--press-scale);
  }

  .identify__shutter:disabled {
    border-color: var(--color-ink-faint);
    background-color: var(--color-ink-faint);
  }

  .identify:is([data-state="blocked"], [data-state="unavailable"]):not(:has(.identify__shot, .identify__piece)) .identify__bar {
    display: none;
  }

  .identify--sweep {
    flex: 1;
    gap: var(--space-0);
    min-block-size: var(--space-0);
  }

  .identify--sweep .identify__viewfinder {
    flex: 1;
    block-size: auto;
    min-block-size: calc(var(--space-13) * 3);
    border-radius: var(--length-zero);
  }

  .identify--sweep .identify__bar {
    padding-block: var(--space-4) calc(var(--safe-bottom) + var(--space-5));
    padding-inline: var(--gutter-fluid);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .identify--sweep .identify__count {
    text-align: center;
  }

  .identify-session .identify__choose {
    padding-block: var(--space-5) calc(var(--safe-bottom) + var(--space-5));
    padding-inline: var(--gutter-fluid);
  }

  .identify-session:has(.identify[data-state="live"]) .identify__choose {
    display: none;
  }
}