// GRID
$cols: 24;
$gutter: 2%;
 
$one-col: (100% - ($gutter * ($cols - 1))) / $cols;

@mixin grid-container() {
    margin:0 auto;
}

@mixin grid-row() {
    overflow: hidden;
    width: auto;
}

@mixin grid-cols($num: 1, $last-child: false) {
    
    @if $last-child {
        float: right;
        margin-right: 0;
    } @else {
        float: left;
        margin-right: $gutter;
    }

    width: ($one-col * $num) + ($gutter * ($num - 1));
}
 
@mixin grid-sub-cols($num-child, $num-parent) {
    $parent-size: ($one-col * $num-parent) + ($gutter * ($num-parent - 1));
    $child-size: ($one-col * $num-child) + ($gutter * ($num-child - 1));
    float: left;
    margin-right: ($gutter / $parent-size) * 100%;
    width: ($child-size / $parent-size) * 100%;

    &:last-child {
        margin-right: 0;
    }
}

@mixin box-shadow($params) {
    -moz-box-shadow: $params;
    -webkit-box-shadow: $params;
    box-shadow: $params;
}

@mixin border-radius($params) {
    -moz-border-radius: $params;
    -webkit-border-radius: $params;
    border-radius: $params;
}

@mixin transition($params) {
    -moz-transition: $params;
    -ms-transition: $params;
    -o-transition: $params;
    -webkit-transition: $params;
    transition: $params;
}

@mixin separator($header: true, $footer: true, $padding: false, $dark: true) {
    
    @if $header and $footer {

        @if $dark {
            border-top: 1px solid $line-dark-color;
            border-bottom: 1px solid $line-dark-color;
        } @else {
            border-top: 1px solid $line-light-color;
            border-bottom: 1px solid $line-light-color;
        }

        @include box-shadow((inset 0 1px 0 0 $line-highlight-color, 0 1px 0 0 $line-highlight-color));
        
        @if $padding {
            padding-bottom: 10px;
            padding-top: 10px;
        }

    } @else if $header {

        @if $dark {
            border-top: 1px solid $line-dark-color;
        } @else {
            border-top: 1px solid $line-light-color;
        }

        @include box-shadow(inset 0 1px 0 0 $line-highlight-color);
        
        @if $padding {
            padding-top: 10px;
        }

    } @else if $footer {

        @if $dark {
            border-bottom: 1px solid $line-dark-color;
        } @else {
            border-bottom: 1px solid $line-light-color;
        }

        @include box-shadow(0 1px 0 0 $line-highlight-color);
        
        @if $padding {
            padding-bottom: 10px;
        }

    }

}

@mixin horizontal-list($spacing: .5em) {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: auto;

    li {
        float: left;
        margin-right: $spacing;

        &:last-child {
            margin-right: 0;
        }
    }
}