@import '../../scss/styles';

.react-select-container {
  width: 100%;
}

.react-select {
  .rs__control {
    @include formInput;
    height: auto;
    padding-top: base(0.25);
    padding-bottom: base(0.25);
    flex-wrap: nowrap;
  }

  .rs__indicator {
    padding: 0px 4px;
    cursor: pointer;
  }

  .rs__indicator-separator {
    display: none;
  }

  .rs__input-container {
    color: var(--theme-elevation-1000);
  }

  .rs__input {
    font-family: var(--font-body);
    width: 10px;
  }

  .rs__menu {
    z-index: 2;
    border-radius: 0;
    @include shadow-lg;
    background: var(--theme-input-bg);
  }

  .rs__group-heading {
    color: var(--theme-elevation-800);
    padding-left: base(0.5);
    margin-bottom: base(0.25);
  }

  .rs__option {
    font-family: var(--font-body);
    font-size: $baseline-body-size;
    padding: base(0.375) base(0.75);
    color: var(--theme-elevation-800);

    &--is-focused {
      background-color: var(--theme-elevation-100);
    }

    &--is-selected {
      background-color: var(--theme-elevation-300);
    }
  }

  &--error {
    div.rs__control {
      background-color: var(--theme-error-100);
    }
  }

  &.rs--is-disabled .rs__control {
    background: var(--theme-elevation-200);
  }
}
