// Minable Grid Units

// Sets default grid classes
.min-u-1 {
  width: 100%;
}

.min-u-1-2 {
  width: 50%;
  *width: 49.969%;
}

.min-u-1-3 {
  width: 33.3333%;
  *width: 33.3023%;
}

.min-u-2-3 {
  width: 66.6667%;
  *width: 66.6357%;
}

.min-u-1-4 {
  width: 25%;
  *width: 24.969%;
}

.min-u-3-4 {
  width: 75%;
  *width: 74.969%;
}

.min-u-1-5 {
  width: 20%;
  *width: 19.969%;
}

.min-u-2-5 {
  width: 40%;
  *width: 39.969%;
}

.min-u-3-5 {
  width: 60%;
  *width: 59.969%;
}

.min-u-4-5 {
  width: 80%;
  *width: 79.969%;
}

.min-u-1-6 {
  width: 16.6667%;
  *width: 16.6357%;
}

.min-u-5-6 {
  width: 83.3333%;
  *width: 83.3023%;
}

.min-u-1-8 {
  width: 12.5%;
  *width: 12.469%;
}

.min-u-3-8 {
  width: 37.5%;
  *width: 37.469%;
}

.min-u-5-8 {
  width: 62.5%;
  *width: 62.469%;
}

.min-u-7-8 {
  width: 87.5%;
  *width: 87.469%;
}

.min-u-1-12 {
  width: 8.3333%;
  *width: 8.3023%;
}

.min-u-5-12 {
  width: 41.6667%;
  *width: 41.6357%;
}

.min-u-7-12 {
  width: 58.3333%;
  *width: 58.3023%;
}

.min-u-11-12 {
  width: 91.6667%;
  *width: 91.6357%;
}

// GRID EXTENDER
// Loop through each defined breakpoint to generate our grids (Set in settings.scss).
@if $breakpoints {
  @each $breakpoint in $breakpoints {

    // Get the breakpoint details.
    $breakpoint-name: nth($breakpoint,1);
    $breakpoint-value: strip-unit(nth($breakpoint,2)) / strip-unit($browser-default-font-size);

    // Define your grid.
    @media (max-width: #{$breakpoint-value}em) {
      .min-u-#{$breakpoint-name}-1 {
        width: 100%;
      }
      .min-u-#{$breakpoint-name}-1-2 {
        width: 50%;
        *width: 49.969%;
      }
      .min-u-#{$breakpoint-name}-1-3 {
        width: 33.33333%;
        *width: 33.3023%;
      }
      .min-u-#{$breakpoint-name}-2-3 {
        width: 66.66666%;
        *width: 66.6357%;
      }
      .min-u-#{$breakpoint-name}-1-4 {
        width: 25%;
        *width: 24.969%;
      }
      .min-u-#{$breakpoint-name}-3-4 {
        width: 75%;
        *width: 74.969%;
      }
      .min-u-#{$breakpoint-name}-1-5 {
        width: 20%;
        *width: 19.969%;
      }
      .min-u-#{$breakpoint-name}-2-5 {
        width: 40%;
        *width: 39.969%;
      }
      .min-u-#{$breakpoint-name}-3-5 {
        width: 60%;
        *width: 59.969%;
      }
      .min-u-#{$breakpoint-name}-4-5 {
        width: 80%;
        *width: 79.969%;
      }
      .min-u-#{$breakpoint-name}-1-6 {
        width: 16.666%;
        *width: 16.6357%;
      }
      .min-u-#{$breakpoint-name}-5-6 {
        width: 83.33%;
        *width: 83.3023%;
      }
      .min-u-#{$breakpoint-name}-1-8 {
        width: 12.5%;
        *width: 12.469%;
      }
      .min-u-#{$breakpoint-name}-3-8 {
        width: 37.5%;
        *width: 37.469%;
      }
      .min-u-#{$breakpoint-name}-5-8 {
        width: 62.5%;
        *width: 62.469%;
      }
      .min-u-#{$breakpoint-name}-7-8 {
        width: 87.5%;
        *width: 87.469%;
      }
      .min-u-#{$breakpoint-name}-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
      }
      .min-u-#{$breakpoint-name}-5-12 {
        width: 41.6666%;
        *width: 41.6357%;
      }
      .min-u-#{$breakpoint-name}-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
      }
      .min-u-#{$breakpoint-name}-11-12 {
        width: 91.6666%;
        *width: 91.6357%;
      }
    }
  };
}