@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* A <label> wrapping a visually hidden multi-file input, so clicking browses
     and dropping onto it is handled by the owning Stimulus controller. */
  .dropzone {
    --dropzone-border-color: var(--color-border-strong);
    --dropzone-background: var(--color-surface);

    align-items: center;
    background-color: var(--dropzone-background);
    border: 2px dashed var(--dropzone-border-color);
    border-radius: var(--border-radius-large);
    color: var(--color-ink-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space-double) var(--inline-space-double);
    text-align: center;
    transition: background-color var(--duration-fast) ease-in-out,
      border-color var(--duration-fast) ease-in-out;

    &:has(.dropzone__input:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    @media (any-hover: hover) {
      &:hover {
        --dropzone-border-color: var(--color-link);
      }
    }
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .dropzone__icon {
    --icon-size: 2rem;
  }

  .dropzone__title {
    color: var(--color-ink);
    font-weight: 500;
  }

  .dropzone__hint {
    font-size: var(--text-small);
  }

  .dropzone__input {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  /* Files are being dragged over the zone */
  .dropzone--active {
    --dropzone-background: var(--color-selected-light);
    --dropzone-border-color: var(--color-link);
  }
}