.ga-dropdown {
  @apply text-md shadow-north flex max-h-81 max-w-[80ch] flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;

  @supports (scroll-timeline: --dropdown-scroll block) {
    scroll-timeline: --dropdown-scroll block;
  }

  @supports (animation-timeline: --dropdown-scroll) {
    &::after {
      @apply pointer-events-none sticky bottom-0 left-0 -mt-[25px] block min-h-[25px] animate-[ga-dropdown-last-item-fade_linear] bg-gradient-to-b from-transparent to-(--ga-color-surface-primary) opacity-0 content-[''] [animation-range:0%_100%] [animation-timeline:--dropdown-scroll];
    }
  }

  .ga-dropdown__item {
    @apply text-md animate-hover relative flex h-9 min-w-0 shrink-0 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left text-(--ga-color-text-action) transition-colors;

    &:first-child {
      @apply rounded-t;
    }

    &:last-child {
      @apply rounded-b;
    }

    &:focus {
      @apply outline-none;
    }

    &:hover,
    &:active {
      @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
    }

    &.ga-dropdown__item--disabled {
      @apply cursor-default bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
    }

    &.ga-dropdown__item--selected {
      @apply bg-(--ga-color-surface-selected) font-semibold text-(--ga-color-text-body);

      &.ga-dropdown__item--disabled {
        @apply bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
      }
    }
  }

  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active,
  .ga-dropdown__item:focus-visible {
    &::after {
      @apply absolute top-0 left-0 h-full w-full rounded border-2 border-(--ga-color-border-focus) content-[''];
    }
  }

  .ga-dropdown__caption {
    @apply shrink-0 px-3 pt-3 pb-2 text-sm font-semibold;
  }

  .ga-dropdown__empty {
    @apply mx-auto my-5 inline-flex min-w-30 justify-center text-sm font-semibold;
  }

  .ga-dropdown__spinner {
    @apply mx-auto my-5 inline-flex min-w-30 justify-center;
  }

  .ga-dropdown__item-label {
    @apply min-w-0 truncate;
  }
}

@keyframes ga-dropdown-last-item-fade {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}