/// Info lines
///
/// @group lines
///
/// @example scss - usage
///
///   @include k-InfoLines;
///
/// @example html
///
///   <div class="k-InfoLines">
///     <div class="k-InfoLines__line">
///       <div class="k-InfoLines__line__key"> … </div>
///       <div class="k-InfoLines__line__value"> … </div>
///     </div>
///   </div>

@mixin k-InfoLines {
  .k-InfoLines {
    border-top: 1px solid map-get($k-colors, 'line-1');
  }

  .k-InfoLines__line {
    display: flex;
    padding: k-px-to-rem(15px);
    border-bottom: 1px solid map-get($k-colors, 'line-1');

    @include k-media-max('s') {
      flex-direction: column;
    }
  }

  .k-InfoLines__line__value {
    @include k-media-min('m') {
      margin-left: auto;
      text-align: right;
    }
  }

  // Modifiers.

  .k-InfoLines--withLeftRightBorder {
    border-left: 1px solid map-get($k-colors, 'line-1');
    border-right: 1px solid map-get($k-colors, 'line-1');
  }

  .k-InfoLines--withBorderRadius {
    border-radius: k-px-to-rem(8px);
  }

  .k-InfoLines--withoutTopBottomBorder {
    border-top: none;

    .k-InfoLines__line:last-child {
      border-bottom: none;
    }
  }

  .k-InfoLines--withoutResponsive {
    .k-InfoLines__line {
      @include k-media-max('s') {
        flex-direction: row;
      }
    }

    .k-InfoLines__line__value {
      margin-left: auto;
      text-align: right;
    }
  }
}