/// Display a horizontal stroke
///
/// @group layout
///
/// @example scss - Usage
///
///   @include k-HorizontalStroke;
///
/// @example html
///
///   <span class="k-HorizontalStroke" />

@mixin k-HorizontalStroke {
  .k-HorizontalStroke {
    display: block;
    border: none;
    background: map-get($k-colors, 'font-1');
  }

  .k-HorizontalStroke--tiny {
    height: k-px-to-rem(2px);
    width: k-px-to-rem(20px);
  }

  .k-HorizontalStroke--default {
    height: k-px-to-rem(4px);
    width: k-px-to-rem(30px);
  }

  .k-HorizontalStroke--big {
    height: k-px-to-rem(4px);
    width: k-px-to-rem(50px);
  }

  .k-HorizontalStroke--huge {
    height: k-px-to-rem(6px);
    width: k-px-to-rem(100px);
  }
}