/**
* @name Select
* @category controls
* @component select
*/

@import '../settings/core';
@import '../settings/forms';
@import '../settings/icon';
@import '../settings/inputs';
@import '../settings/list-item';
@import '../settings/select';

@import '../tools/mixins/border-radius';
@import '../tools/mixins/buttons';
@import '../tools/mixins/flex';
@import '../tools/mixins/list-item';

@include exports('cui-select') {
  .#{$select__class} {

    > .#{$select-button__class} {
      @include button-color(
        $color: $select__color,
        $bg: $select--input__background-color,
        $bg-hover: $select--input__background-color--hover,
        $bg-active: $select--input__background-color
      );
      @include button-size(
        $radius: $input__border-radius
      );
      margin: $select-input__margin;

      .#{$dark-class} & {
        @include button-color(
          $color: $select__color--dark,
          $bg: $select--input__background-color--dark,
          $bg-hover: $select--input__background-color--hover--dark,
          $bg-active: $select--input__background-color--dark
        );
        @include button-size(
          $radius: $input__border-radius
        );

      }

      &.disabled,
      &.cui-button--disabled,
      &[disabled] {
        @include border-radius($input__border-radius);

        .#{$select-label__class} {
          @include flex($jc: space-between);
          > i,
          > .#{$icon__class} {
            color: $select__icon--disabled;
            path {
              fill: $select__icon--disabled;
            }

            .#{$dark-class} & {
              color: $select__icon--disabled--dark;
              path {
                fill: $select__icon--disabled--dark;
              }
            }
          }
        }
      }

      .#{$select-label__class} {
        @include flex($jc: space-between);

        > i,
        > .#{$icon__class} {
          color: $input__font-color;
          path {
            fill: $input__font-color;
          }

          .#{$dark-class} & {
            color: $input__font-color--dark;
            path {
              fill: $input__font-color--dark;
            }
          }
        }
      }
    }

    .#{$prefix}-event-overlay__children {
      overflow: auto;
      max-height: $dropdown-height;
      box-shadow: $select--children__box-shadow;
      border: $select--children__border;

      .#{$list-item__class} {
        .#{$dark-class} & {
          @include list-item-color;
        }
      }
      // One pixel less than Event Overlay per Designers comments
      .#{$list-item__class}:first-of-type {
        border-radius: 4px 4px 0 0;
      }
      .#{$list-item__class}:last-of-type {
        border-radius: 0 0 4px 4px;
      }
    }

  }
}

// <div class="cui-input-group" style="margin-bottom: 2px;">
// <input class="cui-input cui-select-input active" id="active" name="active" placeHolder="Active" type="text" style="width: 100%;" onkeydown="return false;" onclick="return false;">
// <i class="icon icon-arrow-down_16"></i>
// </div>


/**
* @component select
* @section default
* @html
<div class="cui-event-overlay cui-event-overlay--top">
  <div class="cui-event-overlay__children" style="top: 129px; left: 293px;">
    <div class="cui-list cui-list--vertical cui-list" role="listbox" aria-labelledby="cui-select-475__label" aria-multiselectable="false"
      style="width: 539px;">
      <div aria-current="true" class="cui-list-item" id="cui-list-490__so-item" role="option" title="test1">
        <div class="cui-list-item__center">test1</div>
        <div class="cui-list-item__right"></div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-490__so-item" role="option" title="test2">
        <div class="cui-list-item__center">test2</div>
        <div class="cui-list-item__right"></div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-490__so-item" role="option" title="test3">
        <div class="cui-list-item__center">test3</div>
        <div class="cui-list-item__right">
          <i class="cui-icon icon icon-check_20"></i>
        </div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-490__so-item" role="option" title="test4">
        <div class="cui-list-item__center">test4</div>
        <div class="cui-list-item__right"></div>
      </div>
    </div>
  </div>
</div>
*/

/**
* @component select
* @section multi-select
* @html
<div class="cui-event-overlay cui-event-overlay--top">
  <div class="cui-event-overlay__children" style="top: 202px; left: 293px;">
    <div class="cui-list cui-list--vertical cui-list" role="listbox" aria-labelledby="cui-select-479__label" aria-multiselectable="true"
      style="width: 539px;">
      <div aria-current="false" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="-1" title="test1">
        <div class="cui-input-group cui-checkbox ">
          <input aria-checked="false" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
            value="">
          <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
            <span>test1</span>
          </label>
        </div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="-1" title="test2">
        <div class="cui-input-group cui-checkbox ">
          <input aria-checked="true" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
            value="">
          <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
            <span>test2</span>
          </label>
        </div>
      </div>
      <div aria-current="true" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="0" title="test3">
        <div class="cui-input-group cui-checkbox ">
          <input aria-checked="true" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
            value="">
          <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
            <span>test3</span>
          </label>
        </div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="-1" title="test4">
        <div class="cui-input-group cui-checkbox ">
          <input aria-checked="false" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
            value="">
          <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
            <span>test4</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
*/