@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/draft/Kaizen/Form/Primitives/Input/styles.scss";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/type";

@mixin base-font-style() {
  @include ca-type-ideal-body-bold;
  @include ca-inherit-baseline;
  color: $kz-color-wisteria-800;
}

.container {
  .control {
    min-height: $input-height;
    border-color: $ca-border-color;
    border-radius: $ca-border-radius;

    &:hover {
      border-color: $ca-border-color-hover;
    }
  }

  .focusedControl {
    @include form-input-focus-border($ca-border-color-focus);

    &:hover {
      @include form-input-focus-border($ca-border-color-focus);
    }
  }

  .placeholder {
    @include base-font-style();
    opacity: $input-placeholder-opacity;
  }

  .menu {
    border: 1px solid $ca-border-color;
    border-radius: $ca-border-radius;
    box-shadow: $ca-box-shadow;
  }

  .option {
    @include base-font-style();
  }

  .focusedOption {
    background-color: $kz-color-ash;

    &:active {
      background-color: $kz-color-ash;
    }
  }

  .selectedOption {
    background-color: $kz-color-cluny-100;
  }

  .noOptionsMessage {
    @include base-font-style();
  }

  .singleValue {
    @include base-font-style();
  }

  .multiValue {
    @include ca-type-ideal-small-bold;
    @include ca-inherit-baseline;
    color: $kz-color-wisteria-800;
    border-radius: 15px;
    padding: $ca-grid * 0.075 $ca-grid * 0.25;
    cursor: default;
  }
}