.ga-native-select {
  @apply relative;

  select {
    @apply text-md h-10 appearance-none rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) py-2 pr-9 pl-3 leading-none;
  }

  .ga-native-select__arrow {
    @apply pointer-events-none absolute top-1/2 right-2 -translate-y-1/2;
  }
}

.ga-select {
  @apply text-md animate-hover inline-flex h-10 w-50 cursor-pointer appearance-none items-start gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-2.5 py-1.5 text-left leading-none transition-colors;

  &.ga-select--expanded {
    @apply border-(--ga-color-border-focus) ring-1 ring-(--ga-color-border-focus);
  }

  &:hover {
    @apply border-(--ga-color-border-action-hover);
  }

  &:not(.ga-select--empty, .ga-select--disabled):hover {
    @apply bg-(--ga-color-surface-action-hover-2);
  }

  &.ga-select--disabled {
    @apply cursor-not-allowed border-(--ga-color-border-primary) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
  }

  &:focus-visible {
    @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
  }

  &.ga-select--invalid {
    @apply border-(--ga-color-border-error) ring-1 ring-(--ga-color-border-error);

    &:not(.ga-select--empty) {
      @apply bg-(--ga-color-surface-error);
    }
  }

  .ga-select__placeholder {
    @apply min-w-0 flex-1 truncate text-(--ga-color-text-disabled);
  }

  .ga-select__input {
    @apply h-6 min-w-0 flex-1 leading-6 outline-none;

    &:is(input)::placeholder {
      @apply text-(--ga-color-text-disabled);
    }

    &:not(:focus) {
      @apply cursor-pointer;
    }
  }

  .ga-select__main-area {
    @apply relative flex min-h-6.5 min-w-0 flex-1 leading-6.5;
  }

  .ga-select__input:not(:placeholder-shown) ~ .ga-select__value {
    @apply hidden;
  }

  &:not(.ga-select--multi) {
    .ga-select__value {
      @apply min-w-0 flex-1 truncate;
    }

    .ga-select__input {
      @apply absolute top-0 left-0 h-full w-full;
    }
  }

  &.ga-select--multi {
    @apply h-auto min-h-10;

    .ga-select__main-area {
      @apply flex max-h-23.5 min-h-0 flex-1 flex-wrap gap-2 overflow-y-auto;
      scrollbar-width: thin;
    }

    .ga-select__value {
      @apply contents;

      .ga-tag {
        @apply min-w-0;
      }
    }

    .ga-select__input {
      @apply h-6.5 min-w-3;
    }

    &.ga-select--label-hidden {
      .ga-select__placeholder {
        @apply text-(--ga-color-text-disable-selected);
      }

      .ga-select__input {
        @apply overflow-hidden overflow-ellipsis whitespace-nowrap;
        &::placeholder {
          @apply text-(--ga-color-text-disable-selected);
        }
      }
    }
  }

  .ga-select__action-icon {
    @apply shrink-0;
  }

  .ga-select__suffix {
    @apply flex h-6.5 shrink-0 items-center gap-2;
  }
}