// // Select - JS // —————————————-

.form-select-js {

position: relative;
cursor: default;
font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
line-height: $line-height-regular; // set line height since it was resetted by normalize

.form-select-js-choice {
  background-color: $select-bgr-color;
  border: 1px solid $select-border-color;
  border-radius: $input-border-radius;
  color: $select-font-color;
  display: block;
  padding: $input-padding;
  padding-right: 35px;
  width: 100%;
  text-decoration: none;
  -webkit-appearance: none;
  text-align: left;
  @include transition(all $transition-time-out $transition-function);

  &:before { // caret
    content: 'd';
    float: right;
    font-family: 'TeleIconUi';
    font-size: 24px;
    line-height: 1px;
    margin-top: 10px;
    margin-right: -29px;
  }
}

&.focus .form-select-js-choice ,
&:focus .form-select-js-choice {
  border-color: hsv-darken($select-border-color, 21%, true);
  background-color: hsv-darken($select-bgr-color, 21%, true);
  outline: 0;
}

&.hover .form-select-js-choice ,
&:hover .form-select-js-choice {
  border-color: hsv-darken($select-border-color, 7%, true);
  background-color: hsv-darken($select-bgr-color, 7%, true);
  @include transition($transition-time-in, '-duration');
}

&.selected .form-select-js-choice ,
&:selected .form-select-js-choice {
  border-color: hsv-darken($select-border-color, -15%, true);
  background-color: hsv-darken($select-bgr-color, -15%, true);
}

&.active .form-select-js-choice ,
&:active .form-select-js-choice {
  border-color: hsv-darken($select-border-color, 15%, true);
  background-color: hsv-darken($select-bgr-color, 15%, true);
}

&[aria-disabled=true] .form-select-js-choice {
  background-color: $select-disabled-bgr-color;
  border-color: $select-disabled-border-color;
  color: $select-disabled-font-color;
  cursor: not-allowed;
}

}

.form-select-js-option-scroll-wrapper {

display: none;
position: fixed;
background-color: $select-options-bgr-color;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
margin-top: building-units(1);
margin-bottom: building-units(1);
z-index: $z-index-select-options;
overflow-y: auto;

.in > & {
  display: block;
}

.form-select-js-options {
  margin: 0;
  padding: 0;
  list-style: none;

  > li {
    padding: $select-options-padding;
    @include transition(all $transition-time-out $transition-function);
    outline: 0;
    cursor: pointer;

    &.focus,
    &:focus {
      background-color: hsv-darken($select-options-bgr-color, 15%, true);
    }

    &.hover { // do hover only by javascript to prevent hover after key event
      background-color: hsv-darken($select-options-bgr-color, 7%, true);
      @include transition($transition-time-in, '-duration');
    }

    &.active,
    &:active {
      background-color: hsv-darken($select-options-bgr-color, 15%, true);
    }

    &[aria-disabled=true] {
      background-color: inherit;
      color: #eee;
      cursor: not-allowed;
    }

    &.selected {
      background-color: $select-options-active-bgr-color;
      color: $font-color-regular;

      &.focus,
      &:focus {
        background-color: hsv-darken($select-options-active-bgr-color, 15%, true);
      }

      &.hover { // do hover only by javascript to prevent hover after key event
        background-color: hsv-darken($select-options-active-bgr-color, 7%, true);
      }

      &.active,
      &:active {
        background-color: hsv-darken($select-options-active-bgr-color, 15%, true);
      }
    }
  }
}

}

.form-select-js-choice-input {

width: 0;
position: absolute;
outline: 0;
background: none;
opacity: 0;
clip: rect(0, 0, 0, 0);

}