{% load common %}/**
 * Gridpak Beta LESS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

/* Reusable column setup */
.mixin-col {
     border:0px solid rgba(0,0,0,0);
     float:left;
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
     -moz-background-clip:padding-box !important;
     -webkit-background-clip:padding-box !important;
     background-clip:padding-box !important;
}
.col {
     .mixin-col;
}

.mixin-span(@num, @gutter_pc, @gutter_px, @padding, @max_columns) {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    width:(@one_col * @num) + (@gutter_pc * (@num - 1));
    border-left-width:@gutter_px;
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first {
    margin-left:0;
}
 
 
{% for grid in grids %}
    /* {{ forloop.counter }}. {{ grid.col_num }} Column Grid {{ grid.min_width }}px - {% if grid.upper %}{{ grid.upper }}px{% else %}Infinity{% endif %} 
    ----------------------------------------------------------------------------- 
    
    {% for i in grid.col_num|get_range %}Span {{ i }}:    {{ grid|span_width:i }}%
    {% endfor %}Span {{ grid.col_num }}:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: {{ grid.min_width }}px){% if grid.upper %} and (max-width: {{ grid.upper }}px){% endif %} {
        {% if grid.gutter_type == 'px' %}
        .row {
            margin-left:-{{ grid.gutter_width }}{{ grid.gutter_type }};
        }
        {% endif %}
        .col {
            {% if grid.gutter_type == '%' %}margin-left:{{ grid.gutter_width }}%;{% else %}border-left-width:{{ grid.gutter_width }}px;{% endif %}
            padding:0 {{ grid.padding_width }}{{ grid.padding_type }};
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: {{ grid.col_num }};
        @padding: 0 {{ grid.padding_width }}{{ grid.padding_type }};
        @gutter_px: {% if grid.gutter_type == 'px' %}{{ grid.gutter_width }}px{% else %}0{% endif %};
        @gutter_pc: {% if grid.gutter_type == '%' %}{{ grid.gutter_width }}%{% else %}0{% endif %};
        

        {% if grid.gutter_type == '%' %}
        .row .col:first-child {
            .mixin-span_first;
        }
        {% endif %}
        {% if forloop.counter == 1 %}
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */{% endif %}
        {% for i in grid.col_num|get_range %}.span_{{ i }} {
            .mixin-span({{ i }}, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        {% endfor %}.span_{{ grid.col_num }} {
            .mixin-span_first;
            width:100%;
        }
    }
{% endfor %}
