/// Setup a box element.
///
/// This mixin will setup an element to look like a link-box.
///
/// Available box modifiers:
/// - `.k-LinkBox`
/// - `.k-LinkBox--withIcon`
///
/// @group box
///
/// @example scss - usage
///
///   @include k-LinkBox;
///
/// @example html
///   <a class="k-LinkBox k-LinkBox--withIcon" href="#">
///     <div class="k-LinkBox__container">
///       <div class="k-LinkBox__icon"> … </div>
///       <div class="k-LinkBox__paragraph">
///         <p class="k-LinkBox__title"> … </p>
///         <p class="k-LinkBox__text"> … </p>
///       </div>
///       <div class="k-LinkBox__navigation k-LinkBox__navigation--withAnimation">
///         <span title="Next" class="k-ButtonIcon
///                                   k-ButtonIcon--hydrogen
///                                   k-ButtonIcon--tiny
///                                   k-ButtonIcon--withoutHover">
///           <svg> … </svg>
///         </span>
///       </div>
///     </div>
///   </a>

@mixin k-LinkBox {
  $title-font: 'regular';
  $title-size: 0; // 16px

  $text-font: 'light';
  $text-size: -1; // 14px
  $text-line-height: 1.3;

  // Base
  $color: map-get($k-colors, 'font-1');
  $background-color: map-get($k-colors, 'background-1');
  $border-color: map-get($k-colors, 'line-1');

  // Active
  $background-color-active: map-get($k-colors, 'line-1');

  // Hover
  $background-color-hover: map-get($k-colors, 'background-2');

  // Color icon
  $background-color-icon: map-get($k-colors, 'primary-4');

  $border-size: k-px-to-rem(2px);
  $transition-duration: .2s;

  .k-LinkBox {
    display: inline-block;
    color: $color;
    text-decoration: none;

    &:link {
      text-decoration: none;
    }
  }

  .k-LinkBox__container {
    display: flex;
    justify-content: space-between;

    min-height: k-px-to-rem(90px);
    box-sizing: border-box;

    color: $color;
    background-color: $background-color;
    border: $border-size solid $border-color;

    transition: background $transition-duration;

    .k-LinkBox:active & {
      background-color: $background-color-active;
    }

    .k-LinkBox:hover & {
      background-color: $background-color-hover;
    }
  }

  .k-LinkBox__icon {
    display: flex;

    margin-top: -$border-size;
    margin-left: -$border-size;
    margin-bottom: -$border-size;

    align-items: center;
    justify-content: center;
    min-width: k-px-to-rem(90px);
    background-color: $background-color-icon;

    @include k-media-max('m') {
      display: none;
    }
  }

  .k-LinkBox__icon--svg {
    width: k-px-to-rem(30px);
    height: k-px-to-rem(40px);
  }

  .k-LinkBox__paragraph {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    padding: k-px-to-rem(10px)
             k-px-to-rem(10px)
             k-px-to-rem(15px)
             k-px-to-rem(20px);
  }

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

    margin: 0;
  }

  .k-LinkBox__text {
    @include k-typographyFont($text-font);
    @include k-typographyFontSize($text-size, $text-line-height);

    margin: 0;
  }

  .k-LinkBox__navigation {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: k-px-to-rem(15px)
             k-px-to-rem(20px)
             k-px-to-rem(15px)
             k-px-to-rem(10px);
  }

  .k-LinkBox__navigation--withAnimation {
    position: relative;
    left: 0;
    transition: left $transition-duration;

    .k-LinkBox:focus &,
    .k-LinkBox:hover & {
      left: 5px;
    }
  }
}