// ------------------------------------------------------------------------------------
//
// Layouts
//
// default                      12  ie
// xs-layout     *  --> 479     12  mobile
// sm-layout    480 --> 767     12  small tablet
// md-layout    768 --> 991     12  tablet
// lg-layout    992 --> 1199    12  desktop
// wd-layout   1200 --> *       12  large desktop
//
// ------------------------------------------------------------------------------------

@import "settings";

/* default grid value */

$total-columns: 12;                 // default number of columns
$column-width:  4em;
$gutter-width:  2em;
$grid-padding:  $gutter-width;

$susy: (
    columns: $total-columns,
    gutter: $gutter-width / $column-width,
    column-width: $column-width,

    // for debug only
    /*
    debug: (
        image: show,
        color: blue,
        output: overlay,
        toggle: top right,
    ),*/
);

/* layouts settings */

// extra small layout / watch, blackberry, etc.
$xs-columns:        $total-columns;
$xs-layout-max:     px2em(479px);

// small layout / phone
$sm-columns:        $total-columns;
$sm-layout-min:     px2em(480px);
$sm-layout-max:     px2em(767px);

// medium layout / tablet
$md-columns:        $total-columns;
$md-layout-min:     px2em(768px);
$md-layout-max:     px2em(991px);

// large layout / desktop
$lg-columns:        $total-columns;
$lg-layout-min:     px2em(992px);
$lg-layout-max:     px2em(1199px);

// wide layout / wide desktop
$wd-columns:        $total-columns;
$wd-layout-min:     px2em(1200px);

// layout definition
$xs-layout:                                     $xs-columns     $xs-layout-max;
$sm-layout:         $sm-layout-min              $sm-columns     $sm-layout-max;
$md-layout:         $md-layout-min              $md-columns     $md-layout-max;
$lg-layout:         $lg-layout-min              $lg-columns     $lg-layout-max;
$wd-layout:         $wd-layout-min              $wd-columns;