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

div.react-select {
  div.rs__control {
    @include formInput;
    height: auto;
    padding-top: base(.25);
    padding-bottom: base(.25);
  }

  .rs__value-container {
    padding: base(.25) 0;
    min-height: base(1.5);

    > * {
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
    }

    &--is-multi {
      margin-left: - base(.25);
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .rs__indicators {
    .arrow {
      margin-left: base(.5);
      transform: rotate(90deg);
      width: base(.3);
    }
  }

  .rs__indicator {
    padding: 0px 4px;
  }

  .rs__indicator-separator {
    display: none;
  }

  .rs__input {
    input {
      font-family: $font-body;
      width: 100% !important;
    }
  }

  .rs__menu {
    z-index: 2;
    border-radius: 0;
    @include inputShadowActive;
  }

  .rs__group-heading {
    color: $color-dark-gray;
    padding-left: base(.5);
    margin-bottom: base(.25);
  }

  .rs__option {
    font-family: $font-body;
    font-size: $baseline-body-size;
    padding: base(.375) base(.75);
    color: $color-dark-gray;

    &--is-focused {
      background-color: rgba($color-dark-gray, .1);
    }

    &--is-selected {
      background-color: rgba($color-dark-gray, .5);
    }
  }

  .rs__multi-value {
    padding: 0;
    background: transparent;
    border: $style-stroke-width-s solid $color-dark-gray;
    line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
    margin: base(.25) base(.5) base(.25) 0;
  }

  .rs__multi-value__label {
    padding: 0 base(.125) 0 base(.25);
    max-width: 150px;
  }

  .rs__multi-value__remove {
    padding: 0 base(.125);
    cursor: pointer;

    &:hover {
      color: $color-dark-gray;
      background: rgba($color-red, .25);
    }
  }

  &--error {
    div.rs__control {
      background-color: lighten($color-red, 20%);
    }
  }
}
