$select-bg: $light-gradient !default;

.select {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.select-input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.select-input {
  font-family: $font-family-base;
  height: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: 0 42px 0 1rem; // 1.5rem + chevron width
  font-weight: 500;
  color: $dark;
  background: $select-bg;
  border: 1px solid $light-gray-2;
  border-radius: $border-radius;
  cursor: pointer;
  transition: background-color .2s ease,
    outline .2s ease, border-color .2s ease;

  &:hover {
    border-color: $dark-gray-3;
  }

  // Hide default select arrow in IE10+
  &::-ms-expand {
    display: none;
  }

  &:focus {
    border-color: $primary;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($primary,.25);
  }

  &:disabled,
  &:hover:disabled {
    cursor: not-allowed;
    background: $light-gray-2;
    color: $dark-gray-3;
    border-color: $light-gray-1;
  }
}

.select--disabled .label,
.select--disabled .form__helper-text {
  color: $dark-gray-3;
}

.select-input__wrapper[data-invalid] .select-input, .select-input__wrapper[data-valid] .select-input {
  padding-right: 3rem; // 1rem + chevron width + invalid icon width
}

.select-input__wrapper[data-invalid] .select-input {
  border-color: $danger;
}

.select-input__wrapper[data-invalid]
.select-input:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba($danger,.25);
}

.select-input__wrapper[data-valid] .select-input {
  border-color: $success;
}

.select-input__wrapper[data-valid]
.select-input:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba($success,.25);
}

.form-requirement {
  display: block;
  font-size: 14px;
  color: $danger;
  font-weight: 400;
  overflow: visible;
}

.select-input:disabled ~ .select__arrow {
  color: $dark-gray-3;
}

.select__arrow {
  color: $dark;
  position: absolute;
  right: 1rem;
  top: 11px;
  pointer-events: none;
}

.select-input__wrapper[data-invalid]
  .select-input
  ~ .select__invalid-icon {
  position: absolute;
  right: 34px; // 1.5rem + chevron width
}

.select-input__wrapper[data-invalid]
  .select-input
  ~ .select__invalid-icon {
  color: $danger;
}

.select-input__wrapper[data-valid]
  .select-input
  ~ .select__valid-icon {
  position: absolute;
  right: 34px; // 1.5rem + chevron width
}

.select-input__wrapper[data-valid]
  .select-input
  ~ .select__valid-icon {
  color: $success;
}

.select-optgroup,
.select-option {
  color: $dark; // For the options to show in IE11
}

.select-option[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

// Override some Firefox user-agent styles
@-moz-document url-prefix() {
  .select-option {
    background-color: $white;
    color: $dark;
  }

  .select-optgroup {
    color: $dark;
  }
}

.select--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.select--inline.select--invalid .label,
.select--inline.select--invalid
  .form__helper-text {
  margin-top: 13px;
  align-self: flex-start;
}

.select--inline.select--valid .label,
.select--inline.select--valid
  .form__helper-text {
  margin-top: 13px;
  align-self: flex-start;
}

.select--inline .form__helper-text {
  margin-bottom: 0;
  margin-left: $spacing-xs;
}

.select--inline .label {
  white-space: nowrap;
  margin: 0 $spacing-lg 0 0;
}

.select--inline .select-input {
  background-color: transparent;
  color: $dark;
  padding-left: $spacing-lg;
  padding-right: 26px;

  &:hover {
    border-color: $dark-gray-3;
  }
}

.select--inline .select-input:disabled {
  color: $dark-gray-3;
  cursor: not-allowed;

  &:hover {
    background-color: transparent;
  }

  ~ * {
    cursor: not-allowed;
  }
}

.select--inline .select-input:disabled {
  cursor: not-allowed;
}

//Skeleton State
.select.skeleton {
  @include skeleton;
  width: 100%;
  height: 36px;
  overflow: hidden;
  border-radius: $border-radius;
}

.select.skeleton .select-input {
  display: none;
}