/**
* @name Search Inputs
* @description Specialized text input for search capability.
* @category controls
* @component search-input
*/
@import '../settings/search-inputs';
@import '../settings/inputs';
@import '../settings/icon';

@import '../tools/functions/core';
@import '../tools/mixins/search-input';

@import 'input';

@include exports('cui-search-input') {
  .#{$search-input__class} {
    > i,
    > .#{$icon__class},
    .#{$prefix}-icon {
      @include search-icon;
    }

    .#{$input__class} {
      padding-left: rem-calc(32);
      @include search-input-behaviors;
    }

    &--pill {
      > i,
      > .#{$icon__class},
      .#{$prefix}-icon {
        @include search-icon(16);
      }

      .#{$input__class} {
        height: $search-input__height--pill;
        padding-left: rem-calc(30);
        font-size: $search-input__font-size--pill;
        line-height: $search-input__line-height--pill;
        border-radius: 16px;
      }
    }

    &.#{$input__class}-group--dark {
      .#{$search-input__class}__icon {
        fill: $search-input-icon__color--dark;
      }
    }
  }
}

/**
* @component search-input
* @section default
* @html
<div class="row">
  <div class="cui-input-group cui-search-input medium-4 columns">
    <input class="cui-input" id="normalSearchInput" type="text">
    <i class="icon icon-search_20"></i>
  </div>
</div>
*/



/**
* @component search-input
* @section pill
* @html
<div class="row">
  <div class="cui-input-group cui-search-input cui-search-input--pill medium-4 columns">
    <input class="cui-input" id="pillSearchInput" type="text">
    <i class="icon icon-search_16"></i>
  </div>
</div>
*/