/// Row
///
/// @group grid
///
/// @example scss - usage
///
///   @include k-Row;
///
/// @example html
///
///    <div class="k-Row">
///      <div class="k-Row__content">
///        …
///      </div>
///    </div>
///
///    <div class="k-Row k-Row--padded">…</div>
///    <div class="k-Row k-Row--centered">…</div>
///    <div class="k-Row k-Row--light">…</div>
///    <div class="k-Row k-Row--dark">…</div>
///    <div class="k-Row k-Row--lightBottomBorder">…</div>

@mixin k-Row($row: ()) {
  @include k-with-module('k-Row: $row') {
    $colors: k-default(map-get($row, 'colors'), ());
    $light-background-color: k-color-definition(
      k-default(
        map-get($colors, 'light-background'),
        map-get($k-colors, 'primary-6')
      )
    );
    $dark-background-color: k-color-definition(
      k-default(
        map-get($colors, 'dark-background'),
        map-get($k-colors, 'line-2')
      )
    );
    $dark-text-color: k-color-definition(
      k-default(
        map-get($colors, 'dark-text'),
        map-get($colors, 'background-1')
      )
    );
    $light-bottom-border-color: k-color-definition(
      k-default(
        map-get($colors, 'light-bottom-border'),
        map-get($k-colors, 'line-1')
      )
    );

    .k-Row--centered {
      text-align: center;
    }

    .k-Row--light {
      background: $light-background-color;
    }

    .k-Row--dark {
      background: $dark-background-color;
      color: $dark-text-color;
    }

    .k-Row--lightTopBorder {
      border-top: 1px solid $light-bottom-border-color;
    }

    .k-Row--lightBottomBorder {
      border-bottom: 1px solid $light-bottom-border-color;
    }

    .k-Row__content {
      @include k-container;

      .k-Row--padded & {
        padding-top: k-px-to-rem(60px);
        padding-bottom: k-px-to-rem(60px);

        @include k-media-min('l') {
          padding-top: k-px-to-rem(80px);
          padding-bottom: k-px-to-rem(80px);
        }
      }
    }
  }
}