@import "../../style/index.scss";

.select-field {
  max-width: var(--form-field-long);
  label {
    @include label;
  }

  &__menu-list {
    background-color: var(--gray-full);
    padding: 0;
  }

  .select-field__container {
    font-size: var(--normal-font-size);

    input {
      color: white !important;
    }
  }
  /**@todo: convert all class selector for component child elements to "& &__child" */
  .select-field__control {
    @include textField;
    padding: 0;
    height: auto;

    &--is-focused,
    &:hover {
      border-color: var(--primary);
      box-shadow: none;
      transition: border-color 0.2s ease-in, color 0.2s ease-in;

      .select-field__single-value {
        color: var(--gray-base);
      }
    }
    .select-field__input {
      input {
        &:focus,
        &:hover,
        &:active {
          border: none !important;
        }
      }
    }
  }
  .select-field--is-disabled {
    .select-field__control {
      @include textField--disabled;
    }
  }

  .select-field__single-value {
    color: var(--gray-30);
  }

  &--has-error {
    .select-field__control {
      border-color: var(--color-negative);

      &:active,
      &:hover,
      &:focus {
        border-color: var(--color-negative);
      }
    }
  }

  .select-field__option {
    color: var(--gray-30);
    background-color: var(--gray-full);
    @include flexFullRow;
    justify-content: flex-start;
    padding: var(--default-spacing-small);

    i {
      padding-right: var(--default-spacing);
    }
    &:hover {
      background-color: var(--gray-80);
    }
    &--is-focused {
      background-color: var(--gray-80);
    }
    &--is-selected {
      color: var(--primary);
      font-weight: 500;
    }
  }

  &__value-container {
    display: flex !important;
  }
}
