@layer components {
  .file-tile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .file-tile--chosen .file-preview {
    scale: var(--hover-scale);
    box-shadow: var(--elev-3);
  }

  .file-tile.tile--moved .file-preview {
    outline: var(--border-width-strong) solid var(--color-accent);
    outline-offset: var(--space-1);
  }

  .file-tile--dragged {
    list-style: none;
    cursor: grabbing;
  }

  .file-tile--dragged .file-preview {
    box-shadow: var(--elev-4);
  }

  .file-tile--ghost .file-preview {
    border: var(--border-width-strong) dashed var(--color-accent);
    background-color: var(--color-surface-sunken);
    box-shadow: none;
    scale: none;
  }

  .file-tile--ghost .file-preview > *,
  .file-tile--ghost .tile__meta {
    visibility: hidden;
  }

  .file-tile--ghost .tile__name {
    color: var(--color-ink-faint);
  }

  .file-tile__join {
    --icon-size: var(--input-icon-size);

    position: absolute;
    inset-block-start: var(--space-0);
    inset-inline: var(--space-0);
    z-index: var(--z-raised);
    display: none;
    align-items: end;
    justify-content: center;
    gap: var(--space-2);
    block-size: var(--tile-size);
    padding-block-end: var(--space-4);
    border: var(--border-width-strong) dashed var(--color-accent);
    border-radius: var(--radius-sm);
    background-image: linear-gradient(transparent 50%, var(--color-surface));
    color: var(--color-accent-ink);
    font: var(--type-label);
    pointer-events: none;
  }

  .file-tile__check,
  .file-tile__tick {
    display: none;
  }

  .file-tiles[data-selecting] .file-tile__check {
    position: absolute;
    inset: var(--space-0);
    z-index: var(--z-raised);
    display: block;
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    margin: var(--space-0);
    opacity: var(--opacity-none);
    cursor: pointer;
  }

  .file-tiles[data-selecting] .file-tile__tick {
    --icon-size: var(--input-icon-size);

    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    display: grid;
    place-items: center;
    inline-size: var(--space-9);
    block-size: var(--space-9);
    border: var(--border-width-strong) solid var(--color-surface);
    border-radius: var(--radius-pill);
    background-color: var(--color-scrim);
    color: transparent;
    box-shadow: var(--elev-2);
  }

  .file-tile:has(.file-tile__check:checked) .file-tile__tick {
    background-color: var(--color-accent);
    color: var(--color-ink-on-accent);
  }

  .file-tile:has(.file-tile__check:checked) .file-preview {
    outline: var(--border-width-strong) solid var(--color-accent);
    outline-offset: var(--space-1);
  }


  .file-tile[data-joining] .file-tile__join {
    display: flex;
  }
}