$reactselect-selector: 'sui-a-form-control' !default;

.#{$reactselect-selector}:not(.#{$reactselect-selector}--is-disabled) {
  &.as--primary {
    .#{$reactselect-selector}__control {
      border-color: $sui-color-primary;
      background: lighten($sui-color-primary-light, 9%);
      color: $sui-color-primary;

      .#{$reactselect-selector}__input,
      .#{$reactselect-selector}__placeholder {
        color: $sui-color-primary;
      }
    }
  }

  &.as--warning {
    .#{$reactselect-selector}__control {
      border-color: $sui-color-warning;
      background-color: lighten($sui-color-warning-light, 9%);

      &--is-focused {
        @include suiFocusEffect($sui-color-warning);
      }
    }
  }

  &.as--danger {
    .#{$reactselect-selector}__control {
      border-color: $sui-color-danger;
      background-color: lighten($sui-color-danger-light, 9%);

      &--is-focused {
        @include suiFocusEffect($sui-color-danger);
      }
    }
  }

  &.as--success {
    .#{$reactselect-selector}__control {
      border-color: $sui-color-success;
      background-color: lighten($sui-color-success-light, 9%);

      &--is-focused {
        @include suiFocusEffect($sui-color-success);
      }
    }
  }

  &.as--sm {
    .#{$reactselect-selector}__single-value,
    .#{$reactselect-selector}__placeholder,
    .#{$reactselect-selector}__input {
      font-size: $sui-font-size-sm;
    }

    .#{$reactselect-selector}__control {
      min-height: rem(28);
      line-height: rem(18);
    }

    .#{$reactselect-selector}__value-container,
    .#{$reactselect-selector}__indicator {
      padding: 0 rem(8);
    }

    .#{$reactselect-selector}__value-container > div {
      margin-top: 0;
      margin-bottom: 0;
    }

    .#{$reactselect-selector}__multi-value {
      padding: rem(1) rem(6);
    }
  }
}
