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

  .file-group-tile__link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
    color: var(--color-ink);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
  }

  .file-group-tile__link::before {
    content: "";
    position: absolute;
    inset-block-start: var(--space-0);
    inset-inline-start: var(--space-4);
    inline-size: var(--space-11);
    block-size: calc(var(--space-3) + var(--radius-md));
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-xs) var(--radius-xs) var(--space-0) var(--space-0);
    background-color: var(--color-chip);
    transition: border-color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm);
  }

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

    position: relative;
    display: grid;
    grid-template-columns: var(--track-fill) var(--track-fill);
    grid-template-rows: var(--track-fill) var(--track-fill);
    gap: var(--space-2);
    block-size: calc(var(--tile-size) - var(--space-3));
    padding: var(--space-3);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-chip);
    color: var(--color-ink-faint);
    transition: scale var(--dur-fast) var(--ease-spring), outline-color var(--dur-fast) var(--ease-calm);
    outline: var(--border-width-strong) solid transparent;
    outline-offset: var(--space-1);
  }

  .file-group-tile__cover:has(> :only-child) {
    grid-template-columns: var(--track-fill);
    grid-template-rows: var(--track-fill);
  }

  .file-group-tile__cover:has(> :nth-child(2):last-child) {
    grid-template-rows: var(--track-fill);
  }

  .file-group-tile__cover > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  .file-group-tile__cover--empty {
    place-items: center;
  }

  .file-group-tile__cover .file-preview {
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    border-radius: var(--radius-xs);
  }

  .file-group-tile__link:active {
    scale: var(--press-scale);
  }

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

    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--type-label);
    overflow-wrap: anywhere;
  }

  .file-group-tile__name > .icon {
    color: var(--color-ink-faint);
  }

  .file-group-tile__meta {
    margin-block-start: calc(var(--space-3) * -1);
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .file-group-tile__zone {
    position: absolute;
    inset: var(--space-0);
    pointer-events: none;
  }

  .file-tiles[data-dragging] .file-group-tile__zone {
    pointer-events: auto;
  }

  .file-group-tile__zone > .file-tile--ghost {
    display: none;
  }

  .file-tiles[data-dragging] .file-group-tile__cover {
    outline-color: var(--color-border-strong);
  }

  .file-group-tile:has(.file-tile--ghost) .file-group-tile__cover {
    outline-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .file-group-tile:has(.file-tile--ghost) .file-group-tile__link::before {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .file-group-tile:has(.file-tile--ghost) .file-group-tile__name {
    color: var(--color-accent-ink);
  }

  .file-group-tile--moved .file-group-tile__cover {
    outline-color: var(--color-accent);
    animation: file-group-tile-moved var(--dur-highlight) var(--ease-calm);
  }

  .file-group-tile--moved .file-group-tile__link::before {
    border-color: var(--color-accent);
  }

  @keyframes file-group-tile-moved {
    from {
      background-color: var(--color-highlight);
    }
  }

  @media (any-hover: hover) {
    .file-group-tile__link:hover .file-group-tile__name {
      color: var(--color-link);
    }
  }
}