/**
* @category styles
* @component icon
*/
@import '../settings/icon';

@include exports('cui-icon') {
  .#{$icon__class} {
    fill: inherit;
  }
}

/**
* @component icons
* @section default
* @html
<div>
  <i class="cui-icon icon icon-accessories_16"></i>
  <i class="cui-icon icon icon-accessories_20"></i>
  <i class="cui-icon icon icon-accessories_36"></i>
  <i class="cui-icon icon icon-accessories_56"></i>
</div>
*/


/**
* @component icons
* @section color
* @html
<div>
  <i style="color:#07C1E4" class="cui-icon icon icon-accessories_16"></i>
  <i style="color:#07C1E4" class="cui-icon icon icon-accessories_20"></i>
  <i style="color:#07C1E4" class="cui-icon icon icon-accessories_36"></i>
  <i style="color:#07C1E4" class="cui-icon icon icon-accessories_56"></i>
</div>
*/


/**
* @component icons
* @section white
* @html
<div style="background-color: black; padding: 5px; width: fit-content;">
  <button class="cui-button cui-button--36 cui-button--icon cui-button--icon-white" alt="Clear" type="button" aria-label="Clear">
    <span class="cui-button__children" style="opacity: 1;">
      <i style="color: white;" class="cui-icon icon icon-clear-active_24">
      </i>
    </span>
  </button>
</div>
*/