// ==========================================================================
// TOOLS / #GRID
// ==========================================================================

//
// Original code taken from GDS (Government Digital Service)
// https://github.com/alphagov/govuk-frontend
//

// Map of grid column widths
// ==========================================================================

$_dfe-grid-widths: (
  one-quarter: 25%,
  one-third: 33.3333%,
  one-half: 50%,
  two-thirds: 66.6666%,
  three-quarters: 75%,
  full: 100%
) !default;

//
// Grid width percentage
//
// @param {String} $key - Name of grid width (e.g. two-thirds)
// @return {Number} Percentage width
// @throw if `$key` is not a valid grid width
//
// Usage:
//

@function grid-width($key) {
  @if map-has-key($_dfe-grid-widths, $key) {
    @return map-get($_dfe-grid-widths, $key);
  }

  @error 'Unknown grid width `#{$key}`';
}

//
// Generate grid row styles
//
// Creates a grid row class with a standardised margin.
//
// @param {String} $class [govuk-grid-row] CSS class name
//
// @example scss - Default
//   @include govuk-grid-row;
//
// @example scss - Customising the class name
//   @include govuk-grid-row("app-grid");
//
//

@mixin govuk-grid-row($class: 'dfe-grid-row') {
  .#{$class} {
    @include clearfix;
    margin-left: - ($dfe-gutter-half);
    margin-right: - ($dfe-gutter-half);
  }
}

//
// Generate grid column styles
//
// Creates a cross browser grid column with a class of '.govuk-grid-column' by
// default, and a standardised gutter between the columns.
//
// Common widths are predefined above as keywords in the `$grid-widths` map.
//
// By default their width changes from 100% to specified width at the 'tablet'
// breakpoint, but that can be configured to be any other breakpoint by using
// the `$at` parameter.
//
// @param {String} $class [govuk-grid-column] CSS class name
// @param {String} $width [full] one-quarter | one-third | one-half | two-third | three-quarters | full
// @param {String} $float [left] left | right
// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint in px or em
//
// @example scss - Default
//   @include govuk-grid-column(two-thirds)
//
// @example scss - Customising the class name
//   @include govuk-grid-column(one-half, $class: "test-column");
//
// @example scss - Customising the breakpoint where width percentage is applied
//   @include govuk-grid-column(one-half, $at: desktop);
//
// @example scss - Customising the float direction
//   @include govuk-grid-column(one-half, $float: right);
//

@mixin govuk-grid-column($width: full, $float: left, $at: desktop, $class: 'dfe-grid-column') {

  .#{$class}-#{$width} {
    box-sizing: border-box;
    padding: 0 $dfe-gutter-half;
    @if $at != desktop {
      width: 100%;
    }
    @include govuk-media-query($from: $at) {
      float: $float;
      width: grid-width($width);
    }
  }
}