@layer components {
  .file-preview {
    --file-preview-size: var(--tile-size);
    --icon-size: var(--button-icon-size-large);

    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-3);
    overflow: hidden;
    inline-size: var(--size-fill);
    block-size: var(--file-preview-size);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-muted);
  }

  .file-preview--thumb {
    --file-preview-size: var(--tap-min);
    --icon-size: var(--input-icon-size);

    flex: none;
    inline-size: var(--file-preview-size);
    border-radius: var(--radius-xs);
  }

  .file-preview--large {
    block-size: auto;
    min-block-size: var(--file-preview-size);
    padding: var(--space-5);
    border-radius: var(--radius-md);
  }

  .file-preview__image,
  .file-preview__media {
    position: absolute;
    inset: var(--space-0);
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    object-fit: cover;
    object-position: top;
  }

  .file-preview--large :is(.file-preview__image, .file-preview__media) {
    position: static;
    block-size: auto;
    max-block-size: var(--modal-inline-size);
    object-fit: contain;
    border-radius: var(--radius-xs);
  }

  .file-preview__label {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    color: var(--color-ink-faint);
  }

  .file-preview__play {
    --icon-size: var(--button-icon-size-large);

    position: absolute;
    display: grid;
    place-items: center;
    inline-size: var(--space-11);
    block-size: var(--space-11);
    border: var(--border-width-strong) solid var(--color-ink-on-inverse);
    border-radius: var(--radius-pill);
    background-color: var(--color-scrim);
    color: var(--color-ink-on-inverse);
    box-shadow: var(--elev-2);
  }

  .file-preview__audio {
    inline-size: var(--size-fill);
    block-size: revert;
  }
}

@layer components {
  .file-preview--preparing:not([data-waited]) {
    background-image: linear-gradient(100deg, transparent 35%, var(--color-surface) 50%, transparent 65%);
    background-size: var(--activity-shimmer-size) var(--size-fill);
    background-position-x: var(--activity-shimmer-start);
    background-repeat: no-repeat;
    animation: file-preview-preparing var(--dur-activity) var(--ease-breath) infinite;
  }

  .file-preview__label--type,
  .file-preview--preparing[data-waited] .file-preview__label--preparing {
    display: none;
  }

  .file-preview--preparing[data-waited] .file-preview__label--type {
    display: revert;
  }

  .file-preview--preparing:not([data-waited]) .file-preview__label--preparing {
    font: var(--type-caption);
    letter-spacing: var(--tracking-normal);
    background-image: var(--activity-shimmer);
    background-size: var(--activity-shimmer-size) var(--size-fill);
    background-position-x: var(--activity-shimmer-start);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: file-preview-preparing var(--dur-activity) var(--ease-breath) infinite;
  }

  @keyframes file-preview-preparing {
    to {
      background-position-x: var(--activity-shimmer-end);
    }
  }
}