// Layout module
//
// The "Layout" module for the Zen Grids system.
//
// When building a grid system for your site, properties (like number of columns or gutter size) will need different values at different viewport widths. In previous versions of Zen Grids, this meant changing the Zen Grids' global variables each time you wanted to build a layout at a different viewport size. With the layout module, you can instead set grid system properties that override your default global variables within the scope of the layout mixin.
//
// For example:
// ```
// $zen-columns: 1; // Default to one column for mobile layout.
// @include zen-layout($columns: 3) {
//   // $zen-columns is set to 3 inside this block and can be used to build a
//   // layout for the following breakpoint.
//   @media screen and (min-width: 777px) {
//     .sidebar {
//       // The sidebar will span the first column of the 3 columns defined.
//       @include zen-grid-item(1, 1);
//     }
//   }
// }
// // $zen-columns is back to 1 after the zen-layout() block.
// ```
//
// Weight: -6
//
// Style guide: layout

@import "./grids";

// zen-layout(...)
//
// Should be used to add a wrapping block where its parameters will override the
// corresponding global `$zen-*` variables within it.
//
// Common usage:
// ```
// @include zen-layout(m) {
//   // Use other Zen Grids mixins and layouts without changing global vars.
// }
// ```
// or:
// ```
// @include zen-layout($gutters: 0) {
//   // The code in this block will see `$zen-gutters: 0`, but code after this
//   // block will see the usual value of that global variable.
// }
// ```
//
// $layout                      = null - Optionally specify the name of the layout from `$zen-layouts` to use. See the docs for [`$zen-layouts`](section-grids.html#kssref-layout-variables-zen-layouts).
// $columns                     = $zen-columns - The number of columns. See the docs for [`$zen-columns`](section-grids.html#kssref-grids-variables-zen-columns).
// $gutters                     = $zen-gutters - The width of the gutters. See the docs for [`$zen-gutters`](section-grids.html#kssref-grids-variables-zen-gutters).
// $gutter-method               = $zen-gutter-method - The gutter method to use. See the docs for [`$zen-gutter-method`](section-grids.html#kssref-grids-variables-zen-gutter-method).
// $grid-width                  = $zen-grid-width - The width of the entire grid. See the docs for [`$zen-gutter-method`](section-grids.html#kssref-grids-variables-fixed-zen-grid-width).
// $box-sizing                  = $zen-box-sizing - The box sizing to use. See the docs for [`$zen-box-sizing`](section-grids.html#kssref-grids-variables-zen-box-sizing).
// $direction                   = $zen-direction - The direction to use. See the docs for [`$zen-direction`](section-grids.html#kssref-grids-variables-rtl-zen-direction).
// $switch-direction            = $zen-switch-direction - Whether to switch the default direction. See the docs for [`$zen-switch-direction`](section-grids.html#kssref-grids-variables-rtl-zen-switch-direction).
// $rtl-selector                = $zen-rtl-selector - The RTL selector for this background. See the docs for [`$zen-rtl-selector`](section-grids.html#kssref-grids-variables-rtl-zen-rtl-selector).
// $auto-include-grid-item-base = $zen-auto-include-grid-item-base - Whether to auto-include the zen-grid-item-base() mixin. See the docs for [`$zen-auto-include-grid-item-base`](section-grids.html#kssref-grids-variables-zen-auto-include-grid-item-base).
// $auto-include-flow-item-base = $zen-auto-include-flow-item-base - Whether to auto-include the zen-flow-item-base() mixin. See the docs for [`$zen-auto-include-flow-item-base`](section-flow.html#kssref-flow-variables-zen-auto-include-flow-item-base).
// $grid-color                  = $zen-grid-color - The column color to use for the background grid image. See the docs for [`$zen-grid-color`](section-background.html#kssref-background-variables-zen-grid-color).
// $grid-numbers                = $zen-grid-numbers - Specify the set of images used for the numbering of the columns in the background grid image. See the docs for [`$zen-grid-numbers`](section-background.html#kssref-background-variables-zen-grid-numbers).
//
// weight: -10
//
// Style guide: layout.zen-layout
@mixin zen-layout(
  $layout                       : null,
  $columns                      : null,
  $gutters                      : null,
  $gutter-method                : null,
  $grid-width                   : null,
  $box-sizing                   : null,
  $direction                    : null,
  $switch-direction             : null,
  $rtl-selector                 : null,
  $auto-include-grid-item-base  : null,
  $auto-include-flow-item-base  : null,
  $grid-color                   : null,
  $grid-numbers                 : null
) {

  // Save the previous versions of Zen's global variables.
  $global-vars                      : (
    'columns'                       : $zen-columns,
    'gutters'                       : $zen-gutters,
    'gutter-method'                 : $zen-gutter-method,
    'grid-width'                    : $zen-grid-width,
    'box-sizing'                    : $zen-box-sizing,
    'direction'                     : $zen-direction,
    'switch-direction'              : $zen-switch-direction,
    'rtl-selector'                  : $zen-rtl-selector,
    'auto-include-grid-item-base'   : $zen-auto-include-grid-item-base,
    'auto-include-flow-item-base'   : $zen-auto-include-flow-item-base,
    'grid-color'                    : $zen-grid-color,
    'grid-numbers'                  : $zen-grid-numbers
  );

  // Grab a layout from $zen-layouts while defaulting to the global values.
  $local-defaults: $global-vars;
  @if type-of($layout) != 'null' and map-has-key($zen-layouts, $layout) {
    $local-defaults: map-merge($local-defaults, map-get($zen-layouts, $layout));
  }

  // Ensure our local parameters all have a value.
  @if type-of($columns) == 'null' {
    $columns: map-get($local-defaults, 'columns');
  }
  @if type-of($gutters) == 'null' {
    $gutters: map-get($local-defaults, 'gutters');
  }
  @if type-of($gutter-method) == 'null' {
    $gutter-method: map-get($local-defaults, 'gutter-method');
  }
  @if type-of($grid-width) == 'null' {
    $grid-width: map-get($local-defaults, 'grid-width');
  }
  @if type-of($box-sizing) == 'null' {
    $box-sizing: map-get($local-defaults, 'box-sizing');
  }
  @if type-of($direction) == 'null' {
    $direction: map-get($local-defaults, 'direction');
  }
  @if type-of($switch-direction) == 'null' {
    $switch-direction: map-get($local-defaults, 'switch-direction');
  }
  @if type-of($rtl-selector) == 'null' {
    $rtl-selector: map-get($local-defaults, 'rtl-selector');
  }
  @if type-of($auto-include-grid-item-base) == 'null' {
    $auto-include-grid-item-base: map-get($local-defaults, 'auto-include-grid-item-base');
  }
  @if type-of($auto-include-flow-item-base) == 'null' {
    $auto-include-flow-item-base: map-get($local-defaults, 'auto-include-flow-item-base');
  }
  @if type-of($grid-color) == 'null' {
    $grid-color: map-get($local-defaults, 'grid-color');
  }
  @if type-of($grid-numbers) == 'null' {
    $grid-numbers: map-get($local-defaults, 'grid-numbers');
  }

  // Temporarily override Zen's global variables.
  $zen-columns                      : $columns !global;
  $zen-gutters                      : $gutters !global;
  $zen-gutter-method                : $gutter-method !global;
  $zen-grid-width                   : $grid-width !global;
  $zen-box-sizing                   : $box-sizing !global;
  $zen-direction                    : $direction !global;
  $zen-switch-direction             : $switch-direction !global;
  $zen-rtl-selector                 : $rtl-selector !global;
  $zen-auto-include-grid-item-base  : $auto-include-grid-item-base !global;
  $zen-auto-include-flow-item-base  : $auto-include-flow-item-base !global;
  $zen-grid-color                   : $grid-color !global;
  $zen-grid-numbers                 : $grid-numbers !global;

  // Generate the content in the new global context.
  @content;

  // Restore Zen's global variables.
  $zen-columns                      : map-get($global-vars, 'columns') !global;
  $zen-gutters                      : map-get($global-vars, 'gutters') !global;
  $zen-gutter-method                : map-get($global-vars, 'gutter-method') !global;
  $zen-grid-width                   : map-get($global-vars, 'grid-width') !global;
  $zen-box-sizing                   : map-get($global-vars, 'box-sizing') !global;
  $zen-direction                    : map-get($global-vars, 'direction') !global;
  $zen-switch-direction             : map-get($global-vars, 'switch-direction') !global;
  $zen-rtl-selector                 : map-get($global-vars, 'rtl-selector') !global;
  $zen-auto-include-grid-item-base  : map-get($global-vars, 'auto-include-grid-item-base') !global;
  $zen-auto-include-flow-item-base  : map-get($global-vars, 'auto-include-flow-item-base') !global;
  $zen-grid-color                   : map-get($global-vars, 'grid-color') !global;
  $zen-grid-numbers                 : map-get($global-vars, 'grid-numbers') !global;
}

// zen-breakpoint(...)
//
// Combines zen-layout() with the Breakpoint module's breakpoint() mixin.
//
// Instead of nesting zen-layout() with breakpoint() like this:
// ```
// @include zen-layout($layout: 'm') {
//   @include breakpoint($medium) {
//     // Do something.
//   }
// }
// ```
//
// You can use the zen-breakpoint() mixin like this:
// ```
// @include zen-breakpoint($medium, $layout: 'm') {
//   // Do something.
// }
// ```
//
// $query                       - Required. This parameter is passed on to the `breakpoint()` mixin.
// $no-query                    = false - This parameter is passed on to the `breakpoint()` mixin.
// $layout                      = null - Optionally specify the name of the layout from `$zen-layouts` to use. See the docs for [`$zen-layouts`](section-grids.html#kssref-layout-variables-zen-layouts).
// $columns                     = $zen-columns - The number of columns. See the docs for [`$zen-columns`](section-grids.html#kssref-grids-variables-zen-columns).
// $gutters                     = $zen-gutters - The width of the gutters. See the docs for [`$zen-gutters`](section-grids.html#kssref-grids-variables-zen-gutters).
// $gutter-method               = $zen-gutter-method - The gutter method to use. See the docs for [`$zen-gutter-method`](section-grids.html#kssref-grids-variables-zen-gutter-method).
// $grid-width                  = $zen-grid-width - The width of the entire grid. See the docs for [`$zen-gutter-method`](section-grids.html#kssref-grids-variables-fixed-zen-grid-width).
// $box-sizing                  = $zen-box-sizing - The box sizing to use. See the docs for [`$zen-box-sizing`](section-grids.html#kssref-grids-variables-zen-box-sizing).
// $direction                   = $zen-direction - The direction to use. See the docs for [`$zen-direction`](section-grids.html#kssref-grids-variables-rtl-zen-direction).
// $switch-direction            = $zen-switch-direction - Whether to switch the default direction. See the docs for [`$zen-switch-direction`](section-grids.html#kssref-grids-variables-rtl-zen-switch-direction).
// $rtl-selector                = $zen-rtl-selector - The RTL selector for this background. See the docs for [`$zen-rtl-selector`](section-grids.html#kssref-grids-variables-rtl-zen-rtl-selector).
// $auto-include-grid-item-base = $zen-auto-include-grid-item-base - Whether to auto-include the zen-grid-item-base() mixin. See the docs for [`$zen-auto-include-grid-item-base`](section-grids.html#kssref-grids-variables-zen-auto-include-grid-item-base).
// $auto-include-flow-item-base = $zen-auto-include-flow-item-base - Whether to auto-include the zen-flow-item-base() mixin. See the docs for [`$zen-auto-include-flow-item-base`](section-flow.html#kssref-flow-variables-zen-auto-include-flow-item-base).
// $grid-color                  = $zen-grid-color - The column color to use for the background grid image. See the docs for [`$zen-grid-color`](section-background.html#kssref-background-variables-zen-grid-color).
// $grid-numbers                = $zen-grid-numbers - Specify the set of images used for the numbering of the columns in the background grid image. See the docs for [`$zen-grid-numbers`](section-background.html#kssref-background-variables-zen-grid-numbers).
//
// Style guide: layout.zen-breakpoint
@mixin zen-breakpoint(
  $query,
  $no-query: false,
  $layout                       : null,
  $columns                      : null,
  $gutters                      : null,
  $gutter-method                : null,
  $grid-width                   : null,
  $box-sizing                   : null,
  $direction                    : null,
  $switch-direction             : null,
  $rtl-selector                 : null,
  $auto-include-grid-item-base  : null,
  $auto-include-flow-item-base  : null,
  $grid-color                   : null,
  $grid-numbers                 : null
) {

  @if not mixin-exists('breakpoint') {
    @error 'You need to @import the breakpoint mixin before using zen-breakpoint().';
  }

  @include zen-layout(
    $layout,
    $columns,
    $gutters,
    $gutter-method,
    $grid-width,
    $box-sizing,
    $direction,
    $switch-direction,
    $rtl-selector,
    $auto-include-grid-item-base,
    $auto-include-flow-item-base,
    $grid-color,
    $grid-numbers
  ) {
    @include breakpoint($query, $no-query) {
      @content;
    }
  }
}

// zen-mq(...)
//
// An alias for the [`zen-breakpoint()`](#kssref-layout-zen-breakpoint) mixin.
//
// Style guide: layout.zen-mq
@mixin zen-mq(
  $query,
  $no-query: false,
  $layout                       : null,
  $columns                      : null,
  $gutters                      : null,
  $gutter-method                : null,
  $grid-width                   : null,
  $box-sizing                   : null,
  $direction                    : null,
  $switch-direction             : null,
  $rtl-selector                 : null,
  $auto-include-grid-item-base  : null,
  $auto-include-flow-item-base  : null,
  $grid-color                   : null,
  $grid-numbers                 : null
) {

  @if not mixin-exists('mq') {
    @error 'You need to @import the mq mixin before using zen-mq().';
  }

  @include zen-layout(
    $layout,
    $columns,
    $gutters,
    $gutter-method,
    $grid-width,
    $box-sizing,
    $direction,
    $switch-direction,
    $rtl-selector,
    $auto-include-grid-item-base,
    $auto-include-flow-item-base,
    $grid-color,
    $grid-numbers
  ) {
    @include mq($query, $no-query) {
      @content;
    }
  }
}

// zen-respond-to(...)
//
// Combines zen-layout() with the Breakpoint module's respond-to() mixin.
//
// Instead of nesting zen-layout() with respond-to() like this:
// ```
// @include zen-layout($layout: 'm') {
//   @include respond-to('m') {
//     // Do something.
//   }
// }
// ```
//
// You can use the zen-respond-to() mixin like this:
// ```
// @include zen-respond-to('m') {
//   // Do something.
// }
// ```
//
// Note that the 'm' in the above example uses the same name in the
// $breakpoints map as is used in the $zen-layouts map.
//
// You can use a differently-named layout by explicitly specifying the $layout
// parameter like this:
// ```
// @include zen-respond-to('m', $layout: 'medium') {
//   // Do something.
// }
// ```
//
// $context                     - Required. This parameter is passed on to the respond-to() mixin.
// $no-query                    = false - This parameter is passed on to the respond-to() mixin.
// $layout                      = null - Optionally specify the name of the layout from `$zen-layouts` to use. See the docs for [`$zen-layouts`](section-grids.html#kssref-layout-variables-zen-layouts).
// $columns                     = $zen-columns - The number of columns. See the docs for [`$zen-columns`](section-grids.html#kssref-grids-variables-zen-columns).
// $gutters                     = $zen-gutters - The width of the gutters. See the docs for [`$zen-gutters`](section-grids.html#kssref-grids-variables-zen-gutters).
// $gutter-method               = $zen-gutter-method - The gutter method to use. See the docs for [`$zen-gutter-method`](section-grids.html#kssref-grids-variables-zen-gutter-method).
// $grid-width                  = $zen-grid-width - The width of the entire grid. See the docs for [`$zen-gutter-method`](section-grids.html#kssref-grids-variables-fixed-zen-grid-width).
// $box-sizing                  = $zen-box-sizing - The box sizing to use. See the docs for [`$zen-box-sizing`](section-grids.html#kssref-grids-variables-zen-box-sizing).
// $direction                   = $zen-direction - The direction to use. See the docs for [`$zen-direction`](section-grids.html#kssref-grids-variables-rtl-zen-direction).
// $switch-direction            = $zen-switch-direction - Whether to switch the default direction. See the docs for [`$zen-switch-direction`](section-grids.html#kssref-grids-variables-rtl-zen-switch-direction).
// $rtl-selector                = $zen-rtl-selector - The RTL selector for this background. See the docs for [`$zen-rtl-selector`](section-grids.html#kssref-grids-variables-rtl-zen-rtl-selector).
// $auto-include-grid-item-base = $zen-auto-include-grid-item-base - Whether to auto-include the zen-grid-item-base() mixin. See the docs for [`$zen-auto-include-grid-item-base`](section-grids.html#kssref-grids-variables-zen-auto-include-grid-item-base).
// $auto-include-flow-item-base = $zen-auto-include-flow-item-base - Whether to auto-include the zen-flow-item-base() mixin. See the docs for [`$zen-auto-include-flow-item-base`](section-flow.html#kssref-flow-variables-zen-auto-include-flow-item-base).
// $grid-color                  = $zen-grid-color - The column color to use for the background grid image. See the docs for [`$zen-grid-color`](section-background.html#kssref-background-variables-zen-grid-color).
// $grid-numbers                = $zen-grid-numbers - Specify the set of images used for the numbering of the columns in the background grid image. See the docs for [`$zen-grid-numbers`](section-background.html#kssref-background-variables-zen-grid-numbers).
//
// Style guide: layout.zen-respond-to
@mixin zen-respond-to(
  $context,
  $no-query: false,
  $layout                       : null,
  $columns                      : null,
  $gutters                      : null,
  $gutter-method                : null,
  $grid-width                   : null,
  $box-sizing                   : null,
  $direction                    : null,
  $switch-direction             : null,
  $rtl-selector                 : null,
  $auto-include-grid-item-base  : null,
  $auto-include-flow-item-base  : null,
  $grid-color                   : null,
  $grid-numbers                 : null
) {

  @if not mixin-exists('respond-to') {
    @error 'You need to @import the respond-to mixin before using zen-respond-to().';
  }

  // Allow the first parameter to control both $context and $layout.
  @if type-of($layout) == 'null' and map-has-key($zen-layouts, $context) {
    $layout: $context;
  }

  @include zen-layout(
    $layout,
    $columns,
    $gutters,
    $gutter-method,
    $grid-width,
    $box-sizing,
    $direction,
    $switch-direction,
    $rtl-selector,
    $auto-include-grid-item-base,
    $auto-include-flow-item-base,
    $grid-color,
    $grid-numbers
  ) {
    @include respond-to($context, $no-query) {
      @content;
    }
  }
}