// Responsive Grid System
//
// =============================================================================
// Table of Contents
// =============================================================================
//
//  IMPORTS...........................Sass Imports
//  VARIABLES.........................Grid Specific Variables
//  GRID ELEMENTS.....................Base grid classes and sass placeholders
//  GRID WIDTHS.......................Widths for grids and elements
//  PUSH & PULL.......................Push & Pull classes
//


// -----------------------------------------------------------------------------
//  :: IMPORTS
// -----------------------------------------------------------------------------
@import "skeletor/globals/mixins/media_query"
@import "skeletor/globals/mixins/grid_widths", "skeletor/globals/mixins/grid_push", "skeletor/globals/mixins/grid_pull"
@import "skeletor/globals/css3/prefixer", "skeletor/globals/css3/box_sizing"





@if $grid
  // -----------------------------------------------------------------------------
  //  :: Variables
  // -----------------------------------------------------------------------------
  // Set class type to either CSS classes `.` || sass placeholder classes `%`
  $class-type: unquote(".")

  @if $use-silent-classes
    $class-type: unquote("%")





  // -----------------------------------------------------------------------------
  //  :: GRID ELEMENTS
  // -----------------------------------------------------------------------------
  // - 1. Set font-size 0 for Inline-Block White Space Issue.  As per: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
  // - 1.5. Alternative fix for Inline-Block White Space Issue (buggy?)
  // - 2. Allow the grid system to be used on lists.
  // - 3. Remove margin from grid
  // - 4. Apply a negative `margin-left` to negate the columns' gutters.

  #{$class-type}grid
    // [1]
    font-size: 0
    // [1.5]
    //letter-spacing: -0.31em
    // [2]
    list-style: none
    // [3]
    margin-bottom: 0
    // [4]
    margin-left: -$base-line-height
    // [1.5]
    //word-spacing: -0.43em


  // Very infrequently occuring grid wrappers as children of grid wrappers.
  // #{$class-type}grid > #{$class-type}grid { margin-left: 0; }

  // - 1. Cause columns to stack side-by-side.
  // - 2. Set font-size from reset above.
  // - 2.5. Set letter and word spacing if reset above.
  // - 3. Space columns apart.
  // - 4. Align columns to the tops of each other.
  // - 5. Full-width (mobile first) unless told to behave otherwise.
  // - 6. Force box-sizing.  Required to combine fluid widths and fixed gutters.

  #{$class-type}grid__item
    // [1]
    display: inline-block
    // [2]
    font-size: $base-font-size
    // [2.5]
    //letter-spacing: normal
    // [3]
    padding-left: $base-line-height
    // [4]
    vertical-align: top
    // [5]
    width: 100%
    // [2.5]
    //word-spacing: normal
    @if $global-border-box == false
      // [6]
      +box-sizing(border-box)

  // - Gutterless grids have all the properties of regular grids, minus any spacing.
  // - Extends `.grid`.

  #{$class-type}grid--full
    @extend #{$class-type}grid
    margin-left: 0

    > #{$class-type}grid__item
      padding-left: 0





  // -----------------------------------------------------------------------------
  //  :: GRID WIDTHS
  // -----------------------------------------------------------------------------
  // Generate regular, width classes
  +skeletor-grid-widths($class-type)





  // -----------------------------------------------------------------------------
  //  :: PUSH & PULL
  // -----------------------------------------------------------------------------
  @if $push
    @if $use-silent-classes == false
      [class*="push--"]
        position: relative
    +skeletor-grid-push($class-type)

  @if $pull
    @if $use-silent-classes == false
      [class*="pull--"]
        position: relative
    +skeletor-grid-pull($class-type)





  // -----------------------------------------------------------------------------
  //  :: RESPONSIVE GRIDS, PUSH, PULL
  // -----------------------------------------------------------------------------
  @if $responsive
    @each $breakpoint in $breakpoints
      +skeletor-media-query($breakpoint)
        +skeletor-grid-widths($class-type, '#{$breakpoint}-')
        @if $push
          +skeletor-grid-push($class-type, '#{$breakpoint}-')
        @if $pull
          +skeletor-grid-pull($class-type, '#{$breakpoint}-')