/// Setup a arrow icon element.
///
/// @group icons
///
///   ArrowIcon is positionned on the right by default.
///
/// @example scss - Usage
///
///   @include k-ArrowIcon;
///
/// @example html
///
///   <svg class="k-ArrowIcon--top" … />

@mixin k-ArrowIcon {
  .k-ArrowIcon {
    width: k-px-to-rem(6px);
    height: k-px-to-rem(6px);
  }

  .k-ArrowIcon--top {
    transform: rotate(45deg);
  }

  .k-ArrowIcon--bottom {
    transform: rotate(225deg);
  }

  .k-ArrowIcon--left {
    transform: rotate(315deg);
  }

  .k-ArrowIcon--right {
    transform: rotate(135deg);
  }

  .k-ArrowIcon--disabled {
    fill: map-get($k-colors, 'background-1');
  }
}