//==============================================================================
//  WIDTH HELPERS
//==============================================================================

//
// To be used when a width is needed prefixed with .s-{n}of{total}-{prefix}
//

@mixin sizes($prefix: m, $cols: $grid-columns){
    @for $i from 1 through $cols{
        .s-#{$i}-#{$cols}--#{$prefix}{
            width: percentage($i/$cols);
        }
    }
}



//
// Support for pull & push so it can be used in the grid or anywhere.
//

@mixin ordering($option: null, $direction: left){
    @for $i from 1 through $grid-columns {
        .s-#{$option}-#{$i}-#{$grid-columns}{
            #{$direction}: if($option == push, percentage($i/$grid-columns) , -1 * percentage($i/$grid-columns));
        }
    }
}


//
// Offsets classes
//

@mixin offsets($direction: left){
    @for $i from 1 through $grid-columns {
        .s-offset-#{$i}-#{$grid-columns}{
            margin-#{$direction}: percentage($i/$grid-columns) ;
        }
    }
}





// SIZES
// -----------------------------------------------------------------------------

@include mq(mq-medium){
    @include sizes(m, 6);
    @include offsets();
    @include ordering(push);
    @include ordering(pull);
}
@include mq(mq-large){
    @include sizes(l);
}