// GRID DUPLICATION FOR THE CANVAS SIZED APPS
// ----------------
.container.canvas {
    @gridColumns:       12;
    @gridColumnWidth:   45px;
    @gridGutterWidth:   20px;
    @extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
    @siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
    
    .fixed-container();

// GRID MIXINS
// ----------------
    
    .fixed-container() {
      width: @siteWidth;
      margin-left: auto;
      margin-right: auto;
      .clearfix();
    }

    .columns(@columnSpan: 1) {
      width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
    }
    .offset(@columnOffset: 1) {
      margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
    }
    // Necessary grid styles for every column to make them appear next to each other horizontally
    .gridColumn() {
      display: inline;
      float: left;
      margin-left: @gridGutterWidth;
    }
    // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
    .makeColumn(@columnSpan: 1) {
      .gridColumn();
      .columns(@columnSpan);
    }
    
// THE GRID
// ----------------
    
    .row {
      .clearfix();
      margin-left: -@gridGutterWidth;
    }

    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
    // Credit to @dhg for the idea
    .row > [class*="span"] {
      .gridColumn();
    }

    // Default columns
    .span1     { .columns(1); }
    .span2     { .columns(2); }
    .span3     { .columns(3); }
    .span4     { .columns(4); }
    .span5     { .columns(5); }
    .span6     { .columns(6); }
    .span7     { .columns(7); }
    .span8     { .columns(8); }
    .span9     { .columns(9); }
    .span10    { .columns(10); }
    .span11    { .columns(11); }
    .span12    { .columns(12); }
    .span13    { .columns(13); }
    .span14    { .columns(14); }
    .span15    { .columns(15); }
    .span16    { .columns(16); }

    // For optional 24-column grid
    .span17    { .columns(17); }
    .span18    { .columns(18); }
    .span19    { .columns(19); }
    .span20    { .columns(20); }
    .span21    { .columns(21); }
    .span22    { .columns(22); }
    .span23    { .columns(23); }
    .span24    { .columns(24); }

    // Offset column options
    .row {
      > .offset1   { .offset(1); }
      > .offset2   { .offset(2); }
      > .offset3   { .offset(3); }
      > .offset4   { .offset(4); }
      > .offset5   { .offset(5); }
      > .offset6   { .offset(6); }
      > .offset7   { .offset(7); }
      > .offset8   { .offset(8); }
      > .offset9   { .offset(9); }
      > .offset10  { .offset(10); }
      > .offset11  { .offset(11); }
      > .offset12  { .offset(12); }
    }

    // Unique column sizes for 12-column grid
    .span-one-third     { width: 240px; }
    .span-two-thirds    { width: 500px; }
    .row {
      > .offset-one-third   { margin-left: 260px; }
      > .offset-two-thirds  { margin-left: 540px; }
    }
    
//  FORM INPUT SIZES
// ----------------
    
    .formColumns(@columnSpan: 1) {
      display: inline-block;
      float: none;
      width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
      margin-left: 0;
    }
    input,
    textarea {
      // Default columns
      &.span1     { .formColumns(1); }
      &.span2     { .formColumns(2); }
      &.span3     { .formColumns(3); }
      &.span4     { .formColumns(4); }
      &.span5     { .formColumns(5); }
      &.span6     { .formColumns(6); }
      &.span7     { .formColumns(7); }
      &.span8     { .formColumns(8); }
      &.span9     { .formColumns(9); }
      &.span10    { .formColumns(10); }
      &.span11    { .formColumns(11); }
      &.span12    { .formColumns(12); }
      &.span13    { .formColumns(13); }
      &.span14    { .formColumns(14); }
      &.span15    { .formColumns(15); }
      &.span16    { .formColumns(16); }
    }
    
// TABLE CELL SIZES
// ----------------
    
    // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
    .tableColumns(@columnSpan: 1) {
      width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
    }
    table {
      // Default columns
      .span1     { .tableColumns(1); }
      .span2     { .tableColumns(2); }
      .span3     { .tableColumns(3); }
      .span4     { .tableColumns(4); }
      .span5     { .tableColumns(5); }
      .span6     { .tableColumns(6); }
      .span7     { .tableColumns(7); }
      .span8     { .tableColumns(8); }
      .span9     { .tableColumns(9); }
      .span10    { .tableColumns(10); }
      .span11    { .tableColumns(11); }
      .span12    { .tableColumns(12); }
      .span13    { .tableColumns(13); }
      .span14    { .tableColumns(14); }
      .span15    { .tableColumns(15); }
      .span16    { .tableColumns(16); }
    }

}