/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../_common";

.grid,
.row {
    @include grid-row;
}

// These should be the same for all sizes
.col[class*="span-"] {
    @include grid-column;
}

@for $i from 1 through 12 {
    $span: grid-span($i, 12);

    .span-#{$i} { width: $span; }
    .push-#{$i} { left: $span; }
    .pull-#{$i} { right: $span; }
}

// Determine which grid to use
@if $responsive-size == "device" or $responsive-size == "both" {

    // Mobile supports 3 columns
    @include in-mobile {
        .col[class*="mobile-"] {
            @include grid-column;
        }

        @for $i from 1 through $grid-columns-mobile {
            $span: grid-span($i, $grid-columns-mobile);

            .col.mobile-#{$i} { width: $span; }
            .col.mobile-push-#{$i} { left: $span; }
            .col.mobile-pull-#{$i} { right: $span; }
        }
    }

    // Tablet supports 6 columns
    @include in-tablet {
        .col[class*="tablet-"] {
            @include grid-column;
        }

        @for $i from 1 through $grid-columns-tablet {
            $span: grid-span($i, $grid-columns-tablet);

            .col.tablet-#{$i} { width: $span; }
            .col.tablet-push-#{$i} { left: $span; }
            .col.tablet-pull-#{$i} { right: $span; }
        }
    }

    // Desktop supports 12 columns
    @include in-desktop {
        .col[class*="desktop-"] {
            @include grid-column;
        }

        @for $i from 1 through $grid-columns-desktop {
            $span: grid-span($i, $grid-columns-desktop);

            .col.desktop-#{$i} { width: $span; }
            .col.desktop-push-#{$i} { left: $span; }
            .col.desktop-pull-#{$i} { right: $span; }
        }
    }

}

@if $responsive-size == "size" or $responsive-size == "both" {

    // Small supports 6 columns
    @include in-small {
        .col[class*="small-"] {
            @include grid-column;
        }

        @for $i from 1 through $grid-columns-small {
            $span: grid-span($i, $grid-columns-small);

            .col.small-#{$i} { width: $span; }
            .col.small-push-#{$i} { left: $span; }
            .col.small-pull-#{$i} { right: $span; }
        }
    }

    // Medium supports 8 columns
    @include in-medium {
        .col[class*="medium-"] {
            @include grid-column;
        }

        @for $i from 1 through $grid-columns-medium {
            $span: grid-span($i, $grid-columns-medium);

            .col.medium-#{$i} { width: $span; }
            .col.medium-push-#{$i} { left: $span; }
            .col.medium-pull-#{$i} { right: $span; }
        }
    }

    // Large supports 12 columns
    @include in-large {
        .col[class*="large-"] {
            @include grid-column;
        }

        @for $i from 1 through $grid-columns-large {
            $span: grid-span($i, $grid-columns-large);

            .col.large-#{$i} { width: $span; }
            .col.large-push-#{$i} { left: $span; }
            .col.large-pull-#{$i} { right: $span; }
        }
    }

}