@layer components {
  .file-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .file-tiles__form {
    display: none;
  }

  .file-tiles__bar {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .file-tiles__hint,
  .file-tiles__count {
    flex: auto;
    min-inline-size: var(--space-0);
  }

  .file-tiles__hint {
    font: var(--type-caption);
    color: var(--color-ink-faint);
    text-wrap: pretty;
  }

  .file-tiles__count {
    font: var(--type-label);
    color: var(--color-ink);
  }

  .file-tiles__select,
  .file-tiles__done {
    flex: none;
    margin-inline-start: auto;
  }

  .file-tiles__count,
  .file-tiles__done,
  .file-tiles__selection {
    display: none;
  }

  .file-tiles[data-selecting] .file-tiles__count {
    display: block;
  }

  .file-tiles[data-selecting] .file-tiles__done {
    display: inline-flex;
  }

  .file-tiles[data-selecting] :is(.file-tiles__select, .file-tiles__hint, .file-tiles__back, .file-tiles__action, form:has(> .file-tiles__ungroup)) {
    display: none;
  }

  .file-tiles[data-selecting] .file-tiles__selection {
    position: sticky;
    inset-block-end: calc(var(--space-5) - var(--space-9));
    z-index: var(--z-sticky);
    display: flex;
    justify-content: space-around;
    gap: var(--space-3);
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--elev-3);
  }

  .file-tiles[data-selecting] .file-group-tile {
    pointer-events: none;
  }

  .file-tiles[data-selecting] .file-group-tile__name {
    color: var(--color-ink-faint);
  }

  .file-tiles__status {
    position: absolute;
    inline-size: var(--border-width);
    block-size: var(--border-width);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .file-tiles__places > ul {
    display: flex;
    flex-direction: column;
  }

  .file-tiles__hint-pointer {
    display: none;
  }

  .file-tiles__back,
  .file-tiles__ungroup {
    align-self: start;
    padding-inline: var(--space-6);
  }

  .file-tiles__drop {
    display: grid;
    place-items: center;
    min-block-size: var(--button-size-large);
    padding: var(--space-5) var(--space-6);
    border: var(--border-width-strong) dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: var(--type-body-sm);
    color: var(--color-ink-faint);
    text-align: center;
    text-wrap: balance;
    transition: border-color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm);
  }

  .file-tiles__drop,
  .file-tiles__targets,
  .file-tiles__out .file-tile--ghost {
    display: none;
  }

  .file-tiles[data-dragging] .file-tiles__drop {
    display: grid;
  }

  .file-tiles[data-dragging] .file-tiles__action {
    display: none;
  }

  .file-tiles[data-dragging] .file-tiles__targets {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .file-tiles[data-dragging] .file-tiles__out .file-tiles__drop {
    --icon-size: var(--input-icon-size);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-block-size: var(--tap-min);
    padding-block: var(--space-4);
  }

  .file-tiles__out:has(.file-tile--ghost) .file-tiles__drop {
    border-color: var(--color-accent);
    background-color: var(--color-surface-sunken);
    color: var(--color-accent-ink);
  }

  @media (any-hover: hover) {
    .file-tiles__hint-touch {
      display: none;
    }

    .file-tiles__hint-pointer {
      display: inline;
    }
  }
}