@import "../_mixins/all.less";

// Breakpoint rules (removing 600px BP)
@bp1: ~"min-width: 480px";
@bp2: ~"min-width: 768px";
@bp3: ~"min-width: 960px";
@bp4: ~"min-width: 1040px";

// Start of grid-specific rules
@gutter-size-ie: 23px;
@gutter-size: 1.4rem;
@grid-set: wdn-grid-set;
@grid-col-class: wdn-col;

/* We're not in the future, but someday we will. Hold on until then.
.grid-col-width-cal(@width) {
    width: -webkit-calc(@width ~"-" @gutter-size);
    width: -moz-calc(@width ~"-" @gutter-size);
    width: calc(@width ~"-" @gutter-size);
}
*/

.grid-col-width-cal(@width) {
    width: @width;
}

// Function to setup the widths for each grid at various breakpoints
.grid-setup(@namespace, @namespace-set) {
    .@{namespace}-full, .@{namespace}-set-full .@{grid-col-class} {
        .grid-col-width-cal(100%);
    }
    
    // Halves
    .@{namespace}-one-half, .@{namespace}-two-fourths, .@{namespace}-three-sixths, .@{namespace-set}-halves .@{grid-col-class} {
        .grid-col-width-cal(percentage(1/2));
    }
    
    // Thirds
    .@{namespace}-one-third, .@{namespace}-two-sixths, .@{namespace-set}-thirds .@{grid-col-class} {
        .grid-col-width-cal(percentage(1/3));
    }
    
    .@{namespace}-two-thirds, .@{namespace}-four-sixths {
        .grid-col-width-cal(percentage(2/3));
    }
    
    // Fourths
    .@{namespace}-one-fourth, .@{namespace-set}-fourths .@{grid-col-class} {
        .grid-col-width-cal(percentage(1/4));
    }
    
    .@{namespace}-three-fourths {
        .grid-col-width-cal(percentage(3/4));
    }
    
    // Fifths
    .@{namespace}-one-fifth, .@{namespace-set}-fifths .@{grid-col-class} {
        .grid-col-width-cal(percentage(1/5));
    }
    
    .@{namespace}-two-fifths {
        .grid-col-width-cal(percentage(2/5));
    }
    
    .@{namespace}-three-fifths {
        .grid-col-width-cal(percentage(3/5));
    }
    
    .@{namespace}-four-fifths {
        .grid-col-width-cal(percentage(4/5));
    }
    
    // Sixths
    .@{namespace}-one-sixth, .@{namespace-set}-sixths .@{grid-col-class} {
        .grid-col-width-cal(percentage(1/6));
    }
    
    .@{namespace}-five-sixths {
        .grid-col-width-cal(percentage(5/6));
    }
    
    // Sevenths
    .@{namespace}-one-seventh, .@{namespace-set}-sevenths .@{grid-col-class} {
        .grid-col-width-cal(percentage(1/7));
    }
    
    .@{namespace}-two-sevenths {
        .grid-col-width-cal(percentage(2/7));
    }
    
    .@{namespace}-three-sevenths {
        .grid-col-width-cal(percentage(3/7));
    }
    
    .@{namespace}-four-sevenths {
        .grid-col-width-cal(percentage(4/7));
    }
    
    .@{namespace}-five-sevenths {
        .grid-col-width-cal(percentage(5/7));
    }
    
    .@{namespace}-six-sevenths {
        .grid-col-width-cal(percentage(6/7));
    }
}