/*------------------------------------*\
    $CSSWIZARDRY-GRIDS
\*------------------------------------*/
/**
 * CONTENTS
 * VARIABLES............Your settings.
 * BREAKPOINTS..........Defining the breakpoints.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 *
 * READ MORE: http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/
 */





/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * Set the spacing between your grid items.
 */
$grid-gutter : 24px;


/**
 * Would you like Sass’s silent classes, or regular CSS classes?
 */
$grid-use-silent-classes : false;


/*------------------------------------*\
    $BREAKPOINTS
\*------------------------------------*/
/**
 * palm:        Handhelds.
 * lap:         Not handheld, but often resting in your lap type of devices.
 * portable:    Both of the above.
 * desk:        Stationary devices.
 * stationary:  High-resolution stationary devices.
 */
$grid-palm-end         : 500px;
$grid-lap-start        : $grid-palm-end + 1px;
$grid-lap-end          : 1024px;
$grid-desk-start       : $grid-lap-end + 1px;
$grid-desk-end         : 1600px;
$grid-stationary-start : $grid-desk-end + 1px;

/**
 * Do not edit the following variables.
 */
$grid-class-type: unquote('.');

@if $grid-use-silent-classes == true{
    $grid-class-type: unquote('%');
}


/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 * 4. Remove whitespace caused by `inline-block` elements.
 */
#{$grid-class-type}grid {
    list-style:none;                /* [1] */
    margin:0;                       /* [2] */
    padding:0;                      /* [2] */
    margin-left:-$grid-gutter;      /* [3] */
    letter-spacing:-0.31em;         /* [4] */
    word-spacing:-0.43em;           /* [4] */
}


/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Reinstate removed whitespace.
 */
#{$grid-class-type}grid__item {
    display:inline-block;           /* [1] */
    padding-left:$grid-gutter;      /* [2] */
    vertical-align:top;             /* [3] */
    letter-spacing:normal;          /* [4] */
    word-spacing:normal;            /* [4] */
}

#{$grid-class-type}grid__item-in-gutter {
    margin-left: -$grid-gutter;
}

/**
 * Create our widths, prefixed by the specified namespace.
 */
@mixin device-type($namespace:''){

    /**
     * Whole
     */
    #{$grid-class-type}#{$namespace}one-whole         { width:100%; }

    /**
     * Halves
     */
    #{$grid-class-type}#{$namespace}one-half          { width:50%; }

    /**
     * Thirds
     */
    #{$grid-class-type}#{$namespace}one-third         { width:33.333%; }
    #{$grid-class-type}#{$namespace}two-thirds        { width:66.666%; }

    /**
     * Quarters
     */
    #{$grid-class-type}#{$namespace}one-quarter       { width:25%; }
    #{$grid-class-type}#{$namespace}two-quarters      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}three-quarters    { width:75%; }

    /**
     * Fifths
     */
    #{$grid-class-type}#{$namespace}one-fifth         { width:20%; }
    #{$grid-class-type}#{$namespace}two-fifths        { width:40%; }
    #{$grid-class-type}#{$namespace}three-fifths      { width:60%; }
    #{$grid-class-type}#{$namespace}four-fifths       { width:80%; }

    /**
     * Sixths
     */
    #{$grid-class-type}#{$namespace}one-sixth         { width:16.666%; }
    #{$grid-class-type}#{$namespace}two-sixths        { @extend #{$grid-class-type}#{$namespace}one-third; }
    #{$grid-class-type}#{$namespace}three-sixths      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}four-sixths       { @extend #{$grid-class-type}#{$namespace}two-thirds; }
    #{$grid-class-type}#{$namespace}five-sixths       { width:83.333%; }

    /**
     * Eighths
     */
    #{$grid-class-type}#{$namespace}one-eighth        { width:12.5%; }
    #{$grid-class-type}#{$namespace}two-eighths       { @extend #{$grid-class-type}#{$namespace}one-quarter; }
    #{$grid-class-type}#{$namespace}three-eighths     { width:37.5%; }
    #{$grid-class-type}#{$namespace}four-eighths      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}five-eighths      { width:62.5%; }
    #{$grid-class-type}#{$namespace}six-eighths       { @extend #{$grid-class-type}#{$namespace}three-quarters; }
    #{$grid-class-type}#{$namespace}seven-eighths     { width:87.5%; }

    /**
     * Tenths
     */
    #{$grid-class-type}#{$namespace}one-tenth         { width:10%; }
    #{$grid-class-type}#{$namespace}two-tenths        { @extend #{$grid-class-type}#{$namespace}one-fifth; }
    #{$grid-class-type}#{$namespace}three-tenths      { width:30%; }
    #{$grid-class-type}#{$namespace}four-tenths       { @extend #{$grid-class-type}#{$namespace}two-fifths; }
    #{$grid-class-type}#{$namespace}five-tenths       { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}six-tenths        { @extend #{$grid-class-type}#{$namespace}three-fifths; }
    #{$grid-class-type}#{$namespace}seven-tenths      { width:70%; }
    #{$grid-class-type}#{$namespace}eight-tenths      { @extend #{$grid-class-type}#{$namespace}four-fifths; }
    #{$grid-class-type}#{$namespace}nine-tenths       { width:90%; }

    /**
     * Twelfths
     */
    #{$grid-class-type}#{$namespace}one-twelfth       { width:8.333%; }
    #{$grid-class-type}#{$namespace}two-twelfths      { @extend #{$grid-class-type}#{$namespace}one-sixth; }
    #{$grid-class-type}#{$namespace}three-twelfths    { @extend #{$grid-class-type}#{$namespace}one-quarter; }
    #{$grid-class-type}#{$namespace}four-twelfths     { @extend #{$grid-class-type}#{$namespace}one-third; }
    #{$grid-class-type}#{$namespace}five-twelfths     { width:41.666% }
    #{$grid-class-type}#{$namespace}six-twelfths      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}seven-twelfths    { width:58.333%; }
    #{$grid-class-type}#{$namespace}eight-twelfths    { @extend #{$grid-class-type}#{$namespace}two-thirds; }
    #{$grid-class-type}#{$namespace}nine-twelfths     { @extend #{$grid-class-type}#{$namespace}three-quarters; }
    #{$grid-class-type}#{$namespace}ten-twelfths      { @extend #{$grid-class-type}#{$namespace}five-sixths; }
    #{$grid-class-type}#{$namespace}eleven-twelfths   { width:91.666%; }

}

/**
 * Our regular, non-responsive width classes.
 */
@include device-type();

/**
 * Our breakpoint specific widths classes.
 */
@media only screen and (max-width: $grid-palm-end) {
    @include device-type('palm-');
}

@media only screen and (min-width: $grid-lap-start) and (max-width: $grid-lap-end) {
    @include device-type('lap-');
}

@media only screen and (max-width: $grid-lap-end) {
    @include device-type('portable-');
}

@media only screen and (min-width: $grid-desk-start) and (max-width: $grid-desk-end) {
    @include device-type('desk-');
}

@media only screen and (min-width: $grid-stationary-start) {
    @include device-type('stationary-');
}