.select {
  @apply placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed [&>span]:line-clamp-1;
  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;

  &-caret {
    @apply h-4 w-4 opacity-50;
  }

  &-scroll-up-button {
    @apply flex cursor-default items-center justify-center py-1;
  }

  &-scroll-down-button {
    @apply flex cursor-default items-center justify-center py-1;
  }

  &-label {
    @apply px-2 py-1.5 text-sm font-semibold;
  }

  &-item {
    @apply hover:bg-secondary relative my-1 block w-full cursor-pointer select-none items-center rounded-sm px-4 py-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
    @apply focus:outline-none focus-visible:outline-0;
  }

  &-trigger-viewport {
    @apply w-full py-1;
  }

  &-content {
    @apply bg-background border-border relative z-50 mt-1 block max-h-96 w-full min-w-[8rem] overflow-hidden rounded-md border shadow-md;
  }
}