.root {
  @apply relative block rounded-sm;
}

.selectContainer {
  @apply relative;
}

/* Select Button */
.selectButton {
  @apply relative w-full px-4 py-3 pr-12 text-base text-left rounded-sm cursor-default;
  @apply focus:border-action-primary focus:outline-none;
}

.disabled {
  @apply text-base-textDisabled;
}

.selectButtonText {
  @apply grid justify-start grid-flow-col grid-rows-1 gap-4 truncate;
}

.selectButtonText svg {
  @apply opacity-75 stroke-current justify-self-end;
  width: 22px;
}

.iconContainer {
  @apply absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none;
}

.icon {
  @apply w-5 h-5 text-base-textSecondary;
}
.disabled .icon {
  @apply text-base-textDisabled;
}

/* Select Options */
.selectOptions {
  @apply absolute z-10 w-full mt-1 overflow-auto text-sm rounded-sm bg-base-bgCard max-h-60 shadow-md focus:outline-none;
}

.selectOption {
  @apply relative px-4 py-3 font-normal transition duration-300 cursor-pointer select-none;
}

.selectOptionDisabled {
  @apply text-base-textDisabled;
}

/* compact */
.compact {
  @apply text-sm;
}
.compact .selectButton {
  @apply text-sm;
  padding: 10px 50px 10px 10px;
}

/* Solid variant */
.solid .selectButton {
  /* Border preserves height between variations */
  @apply border-transparent bg-base-bgCard border-1 drop-shadow-lg;
}
.solid .selectButton:not(.disabled) {
  @apply cursor-pointer;
  @apply hover:bg-action-tertiaryHover;
  @apply focus:bg-action-tertiaryHover;
}
.solid .selectOptions {
  @apply border border-gray-400;
}
.solid .selectOption {
  @apply border-b border-gray-400;
}
.solid .selectOption:last-child {
  @apply border-none;
}
.solid .selectOptionActive {
  @apply text-action-linkHover;
}
.solid .selectOptionSelected {
  @apply text-action-linkHover;
}

/* Outline variant */
.outline {
  @apply bg-base-bgCard shadow-lg;
}

.outline .selectButton {
  @apply bg-opacity-50 border border-base-borderInput bg-base-bgCard;
}
.outline .selectButton:not(.disabled) {
  @apply cursor-pointer;
  @apply hover:border-opacity-50 hover:border-action-primary;
  @apply focus:border-opacity-100 focus:border-action-primary;
}
.outline .selectOptions {
  @apply border border-action-primary;
}
.outline .selectOption {
  @apply border-none;
}
.outline .selectOptionActive {
  @apply bg-action-secondary text-base-textPrimary;
}
.outline .selectOptionSelected {
  @apply font-semibold bg-action-secondary;
}

/* light variant */
.light {
  @apply bg-base-bgCard shadow-lg;
}

.light .selectButton {
  /* Border preserves height between variations */
  @apply border-gray-200 bg-opacity-10 border-1;
}
.light .selectButton.disabled {
  @apply border-opacity-10;
}
.light .selectButton:not(.disabled) {
  @apply cursor-pointer;
  @apply hover:border-opacity-40;
  @apply focus:border-opacity-80;
}
.light .selectOptions {
  @apply border border-white border-opacity-40;
}
.light .selectOption {
  @apply border-none;
}
.light .selectOptionActive {
  @apply bg-action-secondary text-base-textPrimary;
}
.light .selectOptionSelected {
  @apply font-semibold bg-action-secondary;
}

/* Error */
.error .selectButton {
  @apply border-base-error;
}
