/// Side Grid.
///
/// Available position modifier:
/// - `.k-SideGrid--asideStart`
///
/// Available column modifiers:
/// - `.k-SideGrid--asideLarge`
/// - `.k-SideGrid--asideSmall`
///
/// @group grid
///
/// @example scss - usage
///
///   @include k-SideGrid;
///
/// @example html
///
///   <div class="k-SideGrid k-SideGrid--asideStart k-SideGrid--asideSmall">
///     <div class="k-SideGrid__container">
///       <div class="k-SideGrid__row">
///         <div class="k-SideGrid__aside">
///           <div class="k-SideGrid__asideContent">…</div>
///         </div>
///
///         <div class="k-SideGrid__content">…</div>
///       </div>
///     </div>
///   </div>

@mixin k-SideGrid {
  $background: map-get($k-colors, 'background-1');
  $aside-background: map-get($k-colors, 'background-2');
  $aside-border-color: map-get($k-colors, 'line-1');
  $aside-border-width: 1px;
  $half-gutter: k-px-to-rem(10px);

  .k-SideGrid {
    @include k-media-min('m') {
      background: linear-gradient(
        to right,
        $background 0%,
        $background 50%,
        $aside-background 50%,
        $aside-background 100%
      );
    }
  }

  .k-SideGrid--asideStart {
    @include k-media-min('m') {
      background: linear-gradient(
        to left,
        $background 0%,
        $background 50%,
        $aside-background 50%,
        $aside-background 100%
      );
    }
  }

  .k-SideGrid__container {
    @include k-container;
  }

  .k-SideGrid__row {
    @include k-grid;
  }

  .k-SideGrid__content {
    @include k-grid-col(12);
    background-color: $background;
    padding-bottom: k-px-to-rem(30px);

    @include k-media-min('m') {
      padding-bottom: k-px-to-rem(50px);

      @include k-grid-col(8);

      .k-SideGrid--asideLarge & {
        @include k-grid-col(7);
      }

      .k-SideGrid--asideSmall & {
        @include k-grid-col(9);
      }
    }
  }

  .k-SideGrid__aside {
    @include k-grid-col(4);
    display: flex;
    border-left: $half-gutter solid $background;
    padding-left: 0;
    padding-right: $half-gutter;

    .k-SideGrid--asideLarge & {
      @include k-grid-col(5);
    }

    .k-SideGrid--asideSmall & {
      @include k-grid-col(3);
    }

    .k-SideGrid--asideStart & {
      border-left: none;
      border-right: $half-gutter solid $background;
      padding-left: $half-gutter;
      padding-right: 0;
    }

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

  .k-SideGrid__asideContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-left: $aside-border-width solid $aside-border-color;
    background-color: $aside-background;

    .k-SideGrid--asideStart & {
      border-left: none;
      border-right: $aside-border-width solid $aside-border-color;
    }
  }
}