/**
* @name Combo Box
* @category controls
* @component combo-box
*/

@import '../settings/core';
@import '../settings/list-item';

$combo-box__class: '#{$prefix}-combo-box';

@include exports('cui-combo-box') {
  .#{$combo-box__class} {
    .#{$prefix}-event-overlay__children {
      overflow: auto;
      max-height: $dropdown-height;
    }

    .#{$list-item__class} {
      &-header {
        height: rem-calc(36);
        margin: 0;
        padding: 0 rem-calc(16);
        border-bottom: 1px solid $black-08;

        .#{$list-item__class}__header {
          color: $gray-2;
          line-height: rem-calc(22);
        }
      }
    }
  }
}

/**
* @section default
* @component combo-box
* @html
  <div class="cui-combo-box" aria-haspopup="listbox" aria-expanded="false" role="combobox">
    <div class="cui-input-group  cui-search-input medium-4 columns end">
      <div class="cui-input__icon-container">
        <input class="cui-input" type="text" aria-autocomplete="list" value="" />
        <i class="cui-icon icon icon-search_20"></i>
      </div>
    </div>
  </div>
  <div class="cui-event-overlay cui-event-overlay--bottom">
    <div class="cui-event-overlay__children">
      <div class="cui-combo-box__options" role="listbox">
        <div class="cui-list-item" role="option" title="a">a</div>
        <div class="cui-list-item" role="option" title="ab">ab</div>
        <div class="cui-list-item" role="option" title="abc">abc</div>
      </div>
    </div>
  </div>
*/

/**
* @section clear
* @component combo-box
* @html
  <div class="cui-combo-box" aria-haspopup="listbox" aria-expanded="false" role="combobox">
    <div class="cui-input-group  cui-search-input medium-4 columns end">
      <div class="cui-input__icon-container">
        <input class="cui-input" type="text" aria-autocomplete="list" value="" />
        <i class="cui-icon icon icon-search_20"></i>
        <button
          class="cui-button cui-button--36 cui-button--icon"
          alt="clear input"
          type="button"
          aria-label="clear input">
          <span class="cui-button__children">
            <i class="cui-icon icon icon-clear-active_16"></i>
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="cui-event-overlay cui-event-overlay--bottom">
    <div class="cui-event-overlay__children">
      <div class="cui-combo-box__options" role="listbox">
        <div class="cui-list-item" role="option" title="a">a</div>
        <div class="cui-list-item" role="option" title="ab">ab</div>
        <div class="cui-list-item" role="option" title="abc">abc</div>
      </div>
    </div>
  </div>
*/