@import '../../global';
@import '../../mixins/typography.scss';
@import '../../mixins/actionable';

.select {
  &__control {
    @include actionable;
    @include action;

    &--is-focused,
    &--menu-is-open {
      @include focus;
    }
  }

  &__value-container {
    padding: 0px;
  }

  &__placeholder {
    opacity: 1 !important;
    color: color('gray') !important;
  }

  &__menu {
    &-list {
      padding: 0px !important;
    }

    &-notice {
      @include action;
    }
  }

  &__input > input {
    @include action;
  }

  &__option {
    @include action;

    color: color('black') !important;

    padding: $padding !important;

    background: none !important;

    cursor: pointer !important;

    &--is-selected {
      color: color('primary') !important;
    }

    &:hover,
    &--is-focused {
      background: color('gray', 0.75) !important;
    }
  }
}