// ### Whole
// <div class="example html">
//     <div class="width-1"><div class="doc-placeholder"></div></div>
// </div>

%width-1,
.width-1 {
  width: 100% !important;
}

// ### Halves
// <div class="example html">
//     <div class="width-1-2"><div class="doc-placeholder"></div></div>
// </div>

%width-1-2,
.width-1-2 {
  width: 50% !important;
}

// ### Thirds
// <div class="example html">
//     <div class="width-1-3"><div class="doc-placeholder"></div></div>
// </div>

%width-1-3,
.width-1-3 {
  width: 33.333% !important;
}

%width-2-3,
.width-2-3 {
  width: 66.666% !important;
}

// ### Fourths
// <div class="example html">
//     <div class="width-1-4"><div class="doc-placeholder"></div></div>
// </div>

%width-1-4,
.width-1-4 {
  width: 25% !important;
}

.width-2-4 {
  @extend %width-1-2;
}

%width-3-4,
.width-3-4 {
  width: 75% !important;
}

// ### Fifths
// <div class="example html">
//     <div class="width-1-5"><div class="doc-placeholder"></div></div>
// </div>

%width-1-5,
.width-1-5 {
  width: 20% !important;
}

%width-2-5,
.width-2-5 {
  width: 40% !important;
}

%width-3-5,
.width-3-5 {
  width: 60% !important;
}

%width-4-5,
.width-4-5 {
  width: 80% !important;
}

// ### Sixths
// <div class="example html">
//     <div class="width-1-6"><div class="doc-placeholder"></div></div>
// </div>

%width-1-6,
.width-1-6 {
  width: 16.666% !important;
}

.width-2-6 {
  @extend %width-1-3;
}

.width-3-6 {
  @extend %width-1-2;
}

.width-4-6 {
  @extend %width-2-3;
}

%width-5-6,
.width-5-6 {
  width: 83.333% !important;
}

// ### Eighths
// <div class="example html">
//     <div class="width-1-8"><div class="doc-placeholder"></div></div>
// </div>

%width-1-8,
.width-1-8 {
  width: 12.5% !important;
}

.width-2-8 {
  @extend %width-1-4;
}

%width-3-8,
.width-3-8 {
  width: 37.5% !important;
}

.width-4-8 {
  @extend %width-1-2;
}

%width-5-8,
.width-5-8 {
  width: 62.5% !important;
}

.width-6-8 {
  @extend %width-3-4;
}

%width-7-8,
.width-7-8 {
  width: 87.5% !important;
}

// ### Tenths
// <div class="example html">
//     <div class="width-1-10"><div class="doc-placeholder"></div></div>
// </div>

%width-1-10,
.width-1-10 {
  width: 10% !important;
}

.width-2-10 {
  @extend %width-1-5;
}

%width-3-10,
.width-3-10 {
  width: 30% !important;
}

.width-4-10 {
  @extend %width-2-5;
}

.width-5-10 {
  @extend %width-1-2;
}

.width-6-10 {
  @extend %width-3-5;
}

%width-7-10,
.width-7-10 {
  width: 70% !important;
}

.width-8-10 {
  @extend %width-4-5;
}

%width-9-10,
.width-9-10 {
  width: 90% !important;
}

// ### Twelths
// <div class="example html">
//     <div class="width-1-12"><div class="doc-placeholder"></div></div>
// </div>

%width-1-12,
.width-1-12 {
  width: 8.333% !important;
}

.width-2-12 {
  @extend %width-1-6;
}

.width-3-12 {
  @extend %width-1-4;
}

.width-4-12 {
  @extend %width-1-3;
}

%width-5-12,
.width-5-12 {
  width: 41.666% !important;
}

.width-6-12 {
  @extend %width-1-2;
}

%width-7-12,
.width-7-12 {
  width: 58.333% !important;
}

.width-8-12 {
  @extend %width-2-3;
}

.width-9-12 {
  @extend %width-3-4;
}

.width-ten-12 {
  @extend %width-5-6;
}

%width-11-12,
.width-11-12 {
  width: 91.666% !important;
}


// IE10: The `-ms-flex-preferred-size` values are to overcome any `flex:...` values the element may have.
// Otherwise the width collapses in IE.

.width-50 {
  width: 50px !important;
  -ms-flex-preferred-size: 50px !important;
}

.width-75 {
  width: 75px !important;
  -ms-flex-preferred-size: 50px !important;
}

.width-100 {
  width: 100px !important;
  -ms-flex-preferred-size: 100px !important;
}

.width-150 {
  width: 150px !important;
  -ms-flex-preferred-size: 150px !important;
}

.width-200 {
  width: 200px !important;
  -ms-flex-preferred-size: 200px !important;
}

.width-250 {
  width: 250px !important;
  -ms-flex-preferred-size: 250px !important;
}

.width-300 {
  width: 300px !important;
  -ms-flex-preferred-size: 300px !important;
}


// ## Max Width Trumps

.max-width-50 {
  max-width: 50px !important;
}

.max-width-75 {
  max-width: 75px !important;
}

.max-width-100 {
  max-width: 100px !important;
}

.max-width-150 {
  max-width: 150px !important;
}

.max-width-200 {
  max-width: 200px !important;
}

.max-width-250 {
  max-width: 250px !important;
}

.max-width-300 {
  max-width: 300px !important;
}


// ## Min Width Trumps

.min-width-50 {
  min-width: 50px !important;
}

.min-width-75 {
  min-width: 75px !important;
}

.min-width-100 {
  min-width: 100px !important;
}

.min-width-150 {
  min-width: 150px !important;
}

.min-width-200 {
  min-width: 200px !important;
}

.min-width-250 {
  min-width: 250px !important;
}

.min-width-300 {
  min-width: 300px !important;
}


// ## Height Trumps

.height-50 {
  height: 50px !important;
}

.height-75 {
  height: 75px !important;
}

.height-100 {
  height: 100px !important;
}

.height-150 {
  height: 150px !important;
}

.height-200 {
  height: 200px !important;
}

.height-250 {
  height: 250px !important;
}

.height-300 {
  height: 300px !important;
}


// ## Min Height Trumps

.min-height-50 {
  min-height: 50px !important;
}

.min-height-75 {
  min-height: 75px !important;
}

.min-height-100 {
  min-height: 100px !important;
}

.min-height-150 {
  min-height: 150px !important;
}

.min-height-200 {
  min-height: 200px !important;
}

.min-height-250 {
  min-height: 250px !important;
}

.min-height-300 {
  min-height: 300px !important;
}