.select {
  @apply flex
    w-fit
    flex-col
    gap-1.5;

  .label {
    @apply block
      w-full
      text-sm
      font-medium
      text-gray-800
      dark:text-gray-200;
  }

  .trigger {
    @apply inline-flex
      h-11
      w-full
      min-w-40
      items-center
      justify-between
      gap-2
      rounded
      border
      border-gray-300
      bg-white
      px-3.5
      py-2.5
      text-left
      text-base
      font-medium
      text-gray-900
      shadow-sm
      outline-none
      focus:border-gray-500
      focus:ring-1
      focus:ring-gray-500
      data-[placeholder]:text-gray-800
      dark:border-gray-800
      dark:bg-gray-950
      dark:text-white
      dark:focus:border-gray-600
      dark:focus:ring-gray-600
      dark:data-[placeholder]:text-gray-200;
  }

  .trigger span {
    @apply flex
      items-center
      gap-2;
  }

  .icon {
    @apply size-5
      text-gray-600
      dark:text-gray-400;
  }
}

.dropdown {
  @apply max-w-xs
    overflow-hidden
    rounded-md
    border
    border-gray-200
    bg-white
    shadow-lg
    dark:border-gray-800
    dark:bg-gray-950;

  .item {
    @apply truncate
      px-2.5
      py-1.5
      text-sm
      font-medium;
  }

  .text {
    @apply text-gray-800
      data-[highlighted]:bg-ether-500
      data-[highlighted]:text-white
      data-[highlighted]:outline-none
      dark:text-gray-200
      dark:data-[highlighted]:bg-ether-600;
  }

  .text span {
    @apply flex
      items-center
      gap-2;
  }

  .label {
    @apply text-gray-600
      dark:text-gray-400;
  }
}

.inline {
  .trigger {
    @apply h-auto
      min-w-fit
      px-2.5
      py-2
      text-sm
      font-medium;
  }

  .icon {
    @apply size-4;
  }

  .text {
    @apply text-gray-900
      data-[highlighted]:bg-gray-100
      data-[highlighted]:text-gray-900
      dark:text-white
      dark:data-[highlighted]:bg-gray-900;
  }

  &.dropdown {
    @apply mt-1
      w-[calc(100%+1.5rem)]
      rounded;
  }
}
