ujiro99/tlt

@import '../css/mixin.css';

.select {
  position: relative;

  &__select {
    @mixin interactable;
    @apply border;
    @apply border-gray-200;
    @apply pb-1.5;
    @apply text-gray-500;
    
    padding-top: 4px;
    padding-left: 0.6rem;
    padding-right: 1.4rem;

    width: 100%;
    appearance: none;
    border-radius: var(--radius-md);

    option {
      background: white;
    }

    option[disabled] {
      background: var(--bg-gray-300);
    }

    &:focus-visible {
      @apply outline;
      @apply outline-gray-500/30;
    }
  }

  &__select.mod-loading {
    @apply bg-slate-200;
    @apply animate-pulse;
  }

  &__expand {
    @apply fill-gray-400;
    pointer-events: none;
    width: 1.4em;
    height: 1.4em;
    position: absolute;
    right: 4px;
    bottom: 8px;
    transition: transform 0.2s ease-out;
  }

  &__select:focus + &__expand {
    transform: rotate(180deg);
  }
}