/// A list of links, used for example in the footer.
///
/// @group links
///
/// @example scss - usage
///   @include k-LinkList;
///
/// @example html
///   <ul class="k-LinkList">
///     <li class="k-LinkList__item">
///       <a class="k-LinkList__link" href="#">Link A</a>
///      </li>
///     <li class="k-LinkList__item">
///       <a class="k-LinkList__link" href="#">Link B</a>
///      </li>
///   </ul>

@mixin k-LinkList {
  $font: 'regular';
  $font-light: 'light';
  $font-size: -1;

  // Items margin
  $double-margin: k-px-to-rem(10px);
  $triple-margin: k-px-to-rem(15px);

  // Links line-height
  $normal-line-height: normal;

  // With light backgroundColor
  $dark-link-color: map-get($k-colors, 'font-1');
  $active-color: map-get($k-colors, 'primary-3');
  $hover-color: map-get($k-colors, 'primary-1');

  // With dark backgroundColor
  $light-link-color: map-get($k-colors, 'background-1');

  .k-LinkList {
    // override ul defaults
    text-align: center;
    list-style-type: none;
    padding: 0;

    @include k-media-min('l') {
      text-align: left;
    }
  }

  .k-LinkList__item {
    margin-bottom: k-px-to-rem(5px);
  }

  .k-LinkList__item--doubleMargin {
    margin-bottom: $double-margin;
  }

  .k-LinkList__item--tripleMargin {
    margin-bottom: $triple-margin;
  }

  .k-LinkList__link {
    @include k-typographyFont($font);
    @include k-typographyFontSize($font-size);

    text-decoration: none;

    &:active,
    &.is-active {
     color: $active-color;
    }

    &:hover {
      color: $hover-color;
    }

    transition: color .2s;
  }

  .k-LinkList__item--regularWeight,
  .k-LinkList__link--regularWeight {
    @include k-typographyFont($font);
  }

  .k-LinkList__item--lightWeight,
  .k-LinkList__link--lightWeight {
    @include k-typographyFont($font-light);
  }

  .k-LinkList__link--normalLineHeight {
    line-height: $normal-line-height;
  }

  .k-LinkList__link--light {
    color: $light-link-color;
  }

  .k-LinkList__link--dark {
    color: $dark-link-color;
  }

  .k-LinkList--withoutMargin {
    margin-top: 0;
    margin-bottom: 0;

    .k-LinkList__item:last-child {
      margin-bottom: 0;
    }
  }
}