/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../bonds';

////
/// @group grids
////

/// Grid container.
///
/// @example scss
///   .selector {
///     @include bpk-grid__container();
///   }

@mixin bpk-grid__container {
  max-width: $bpk-breakpoint-desktop;
  margin: 0 auto;
  padding-right: $bpk-grid-container-mobile-padding;
  padding-left: $bpk-grid-container-mobile-padding;

  @include bpk-breakpoint-above-tablet {
    padding-right: $bpk-grid-container-padding;
    padding-left: $bpk-grid-container-padding;
  }
}

/// Grid container debug. Modifies the bpk-grid__container mixin.
///
/// @require {mixin} bpk-grid__container
///
/// @example scss
///   .selector {
///     @include bpk-grid__container();
///     @include bpk-grid__container--debug();
///   }

@mixin bpk-grid__container--debug {
  background-color: $bpk-color-sky-gray-tint-07;
}

/// Container will use the width of the parent element. Modifies the bpk-grid__container mixin.
///
/// @require {mixin} bpk-grid__container
///
/// @example scss
///   .selector {
///     @include bpk-grid__container();
///     @include bpk-grid__container--full-width();
///   }

@mixin bpk-grid__container--full-width {
  max-width: 100%;
}

/// Grid row.
///
/// @example scss
///   .selector {
///     @include bpk-grid__row();
///   }

@mixin bpk-grid__row {
  margin-right: -($bpk-grid-gutter / 2);
  margin-left: -($bpk-grid-gutter / 2);

  @include bpk-clearfix;
}

/// Grid row padded. Modifies the bpk-grid__row mixin.
///
/// @require {mixin} bpk-grid__row
///
/// @example scss
///   .selector {
///     @include bpk-grid__row();
///     @include bpk-grid__row--padded();
///   }

@mixin bpk-grid__row--padded {
  @include bpk-breakpoint-above-tablet {
    &:first-child {
      padding-top: $bpk-grid-gutter / 2;
    }

    &:last-child {
      padding-bottom: $bpk-grid-gutter / 2;
    }
  }
}

/// Grid column.
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///   }

@mixin bpk-grid__column {
  float: left;
  padding-right: $bpk-grid-gutter / 2;
  padding-left: $bpk-grid-gutter / 2;

  @include bpk-rtl {
    float: right;
  }
}

/// Grid column padded. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--padded();
///   }

@mixin bpk-grid__column--padded {
  padding-top: $bpk-grid-gutter / 2;
  padding-bottom: $bpk-grid-gutter / 2;
}

/// Grid column debug. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--debug();
///   }

@mixin bpk-grid__column--debug {
  padding: $bpk-grid-gutter / 2;
}

/// Grid column inner element debugger.
///
/// @example scss
///   .selector {
///     @include bpk-grid__column-debugger();
///   }

@mixin bpk-grid__column-debugger {
  background-color: $bpk-color-white;
}

/// Grid column width. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--(6);
///   }

@mixin bpk-grid__column--($size) {
  @if $size == 0 {
    display: none;
  } @else {
    display: block;
    width: percentage($size / $bpk-grid-columns);
  }
}

/// Grid column width on mobile. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--mobile-(6);
///   }

@mixin bpk-grid__column--mobile-($size) {
  @include bpk-breakpoint-mobile {
    @include bpk-grid__column--($size);
  }
}

/// Grid column width on tablet. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--tablet-(6);
///   }

@mixin bpk-grid__column--tablet-($size) {
  @include bpk-breakpoint-tablet {
    @include bpk-grid__column--($size);
  }
}

/// Grid column offset. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--offset-(6);
///   }

@mixin bpk-grid__column--offset-($size) {
  @if $size == 0 {
    margin-left: 0;

    @include bpk-rtl {
      margin-right: 0;
    }
  } @else {
    margin-left: percentage($size / $bpk-grid-columns);

    @include bpk-rtl {
      margin-right: percentage($size / $bpk-grid-columns);
      margin-left: 0;
    }
  }
}

/// Grid column offset on mobile. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--offset-mobile-(6);
///   }

@mixin bpk-grid__column--offset-mobile-($size) {
  @include bpk-breakpoint-mobile {
    @include bpk-grid__column--offset-($size);
  }
}

/// Grid column offset on tablet. Modifies the bpk-grid__column mixin.
///
/// @require {mixin} bpk-grid__column
///
/// @example scss
///   .selector {
///     @include bpk-grid__column();
///     @include bpk-grid__column--offset-tablet-(6);
///   }

@mixin bpk-grid__column--offset-tablet-($size) {
  @include bpk-breakpoint-tablet {
    @include bpk-grid__column--offset-($size);
  }
}