//
// 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);
}