@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 {
    color: var(--theme-elevation-1000);

    input {
      font-family: var(--font-body);
      width: 100% !important;
    }
  }

  .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(.5);
    margin-bottom: base(.25);
  }

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

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

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

  .rs__single-value {
    color: currentColor;
  }

  .rs__multi-value {
    padding: 0;
    background: transparent;
    border: $style-stroke-width-s solid var(--theme-elevation-800);
    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;
    color: currentColor;
  }

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

    &:hover {
      color: var(--theme-elevation-800);
      background: var(--theme-error-150);
    }
  }

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