/// Bullet list.
///
/// @group lists
///
/// @example scss - usage
///
///     @include k-BulletList;
///
/// @example html
///
///     <ul class="k-BulletList">
///       <li class="k-BulletList__item">
///         Lorem <a class="k-BulletList__link">Ipsum</a>
///       </li>
///     </ul>

@mixin k-BulletList {
  // Font
  $font: 'light';
  $font-step: -1;
  $font-step-on-media: 0;
  $line-height: 1.5;

  // Bullet properties
  $bullet-color: map-get($k-colors, 'font-1');
  $bullet-size: 4px;
  $border-radius: 50%;

  // Link
  $link-font: 'regular';
  $link-color: map-get($k-colors, 'primary-1');
  $link-hover-color: map-get($k-colors, 'primary-2');
  $link-active-color: map-get($k-colors, 'primary-3');

  // Text alignment
  $space-bullet-text: 10px;
  $space-bullet-indent: $space-bullet-text + $bullet-size;

  .k-BulletList {
    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step, $line-height);

    margin: 0;
    padding: 0;
    text-align: left;

    list-style: none;
  }

  .k-BulletList__item {
    margin: k-px-to-rem(5px) k-px-to-rem($space-bullet-indent);
    display: block;

    &:before {
      margin-left: -(k-px-to-rem($space-bullet-indent));
      margin-right: k-px-to-rem($space-bullet-text);

      box-sizing: border-box;
      border-radius: $border-radius;
      width: k-px-to-rem($bullet-size);
      height: k-px-to-rem($bullet-size);
      display: inline-block;

      content: '';
      background-color: $bullet-color;
    }
  }

  .k-BulletList__item--large {
    @include k-typographyFontSize($font-step-on-media);
  }

  .k-BulletList__item--big {
    margin-top: k-px-to-rem(10px);
    margin-bottom: k-px-to-rem(10px);
    @include k-typographyFontSize(1);
  }

  .k-BulletList__item--huge {
    margin-top: k-px-to-rem(10px);
    margin-bottom: k-px-to-rem(10px);
    @include k-typographyFontSize(2);
  }

  .k-BulletList__link {
    @include k-typographyFont($link-font);
    @include k-typographyFontSize($font-step);

    color: $link-color;
    text-decoration: none;

    &:hover {
      color: $link-hover-color;
      text-decoration: none;
    }

    &:active {
      color: $link-active-color;
      text-decoration: none;
    }
  }
}