MetaPhase-Consulting/State-TalentMAP

// Overrides styles for the react-select module
.Select-placeholder,
.Select--single > .Select-control .Select-value {
  // override for accessibility
  color: $color-gray;
}

.Select--multi {
  .Select-value {
    background-color: $blue-primary;
    border-radius: 9px;
    color: $color-white;
    font-size: .8em;
    margin-top: 8px;
    max-width: 220px;
  }

  .Select-value-label {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .Select-multi-value-wrapper {
    overflow: auto;
  }

  .Select-value-icon {
    border-right: 0;
    float: right;
  }

  .Select-value-icon:hover {
    color: $color-primary-alt-light;
  }
}

.Select-menu-outer {
  z-index: $skill-code-dropdown-z;
}

.Select.is-focused {
  outline: 2px dotted $color-white;
  outline-offset: 3px;
}

.Select-option {
  &.is-focused {
    background-color: $blue-primary;
    color: $color-white;
  }
}

.Select.is-focused:not(.is-open) > .Select-control {
  border-color: transparent;
  box-shadow: none;
}