@layer components {
  .file-picker--tile,
  .file-picker--tile .file-picker__uploads,
  .file-picker--chip,
  .file-picker--none {
    display: contents;
  }

  :is(.file-picker--chip, .file-picker--none) .file-picker__uploads {
    flex: 1 0 var(--size-fill);
    order: 1;
  }

  .file-picker__tile,
  .file-picker__chip {
    position: relative;
    cursor: pointer;
  }

  .file-picker__chip {
    padding-inline: var(--space-6);
  }

  .file-picker__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    block-size: var(--tile-size);
    border: var(--border-width-strong) dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    font: var(--type-button);
    --icon-size: var(--button-icon-size-large);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm);
  }

  .file-picker__input {
    position: absolute;
    inset: var(--space-0);
    inline-size: var(--size-fill);
    opacity: var(--opacity-none);
    cursor: pointer;
  }


  .file-picker[data-dropping] .file-picker__tile {
    border-color: var(--color-accent);
    background-color: var(--color-surface-sunken);
  }

  @media (any-hover: hover) {
    .file-picker__tile:hover {
      border-color: var(--color-accent);
      color: var(--color-accent-ink);
    }
  }
}