/**
 * @define utilities
 * Specify the proportional offset before element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 5, 6, 8, 10, 12 section
 */

.u-offset1of12 {
  margin-left: calc(100% * 1 / 12);
}

.u-offset1of10 {
  margin-left: 10%;
}

.u-offset1of8 {
  margin-left: 12.5%;
}

.u-offset1of6,
.u-offset2of12 {
  margin-left: calc(100% * 1 / 6);
}

.u-offset1of5,
.u-offset2of10 {
  margin-left: 20%;
}

.u-offset1of4,
.u-offset2of8,
.u-offset3of12 {
  margin-left: 25%;
}

.u-offset3of10 {
  margin-left: 30%;
}

.u-offset1of3,
.u-offset2of6,
.u-offset4of12 {
  margin-left: calc(100% * 1 / 3);
}

.u-offset3of8 {
  margin-left: 37.5%;
}

.u-offset2of5,
.u-offset4of10 {
  margin-left: 40%;
}

.u-offset5of12 {
  margin-left: calc(100% * 5 / 12);
}

.u-offset1of2,
.u-offset2of4,
.u-offset3of6,
.u-offset4of8,
.u-offset5of10,
.u-offset6of12 {
  margin-left: 50%;
}

.u-offset7of12 {
  margin-left: calc(100% * 7 / 12);
}

.u-offset3of5,
.u-offset6of10 {
  margin-left: 60%;
}

.u-offset5of8 {
  margin-left: 62.5%;
}

.u-offset2of3,
.u-offset4of6,
.u-offset8of12 {
  margin-left: calc(100% * 2 / 3);
}

.u-offset7of10 {
  margin-left: 70%;
}

.u-offset3of4,
.u-offset6of8,
.u-offset9of12 {
  margin-left: 75%;
}

.u-offset4of5,
.u-offset8of10 {
  margin-left: 80%;
}

.u-offset5of6,
.u-offset10of12 {
  margin-left: calc(100% * 5 / 6);
}

.u-offset7of8 {
  margin-left: 87.5%;
}

.u-offset9of10 {
  margin-left: 90%;
}

.u-offset11of12 {
  margin-left: calc(100% * 11 / 12);
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @if $infix != '' {
      .#{$infix}\:u-offset1of12 {
        margin-left: calc(100% * 1 / 12);
      }

      .#{$infix}\:u-offset1of10 {
        margin-left: 10%;
      }

      .#{$infix}\:u-offset1of8 {
        margin-left: 12.5%;
      }

      .#{$infix}\:u-offset1of6,
      .#{$infix}\:u-offset2of12 {
        margin-left: calc(100% * 1 / 6);
      }

      .#{$infix}\:u-offset1of5,
      .#{$infix}\:u-offset2of10 {
        margin-left: 20%;
      }

      .#{$infix}\:u-offset1of4,
      .#{$infix}\:u-offset2of8,
      .#{$infix}\:u-offset3of12 {
        margin-left: 25%;
      }

      .#{$infix}\:u-offset3of10 {
        margin-left: 30%;
      }

      .#{$infix}\:u-offset1of3,
      .#{$infix}\:u-offset2of6,
      .#{$infix}\:u-offset4of12 {
        margin-left: calc(100% * 1 / 3);
      }

      .#{$infix}\:u-offset3of8 {
        margin-left: 37.5%;
      }

      .#{$infix}\:u-offset2of5,
      .#{$infix}\:u-offset4of10 {
        margin-left: 40%;
      }

      .#{$infix}\:u-offset5of12 {
        margin-left: calc(100% * 5 / 12);
      }

      .#{$infix}\:u-offset1of2,
      .#{$infix}\:u-offset2of4,
      .#{$infix}\:u-offset3of6,
      .#{$infix}\:u-offset4of8,
      .#{$infix}\:u-offset5of10,
      .#{$infix}\:u-offset6of12 {
        margin-left: 50%;
      }

      .#{$infix}\:u-offset7of12 {
        margin-left: calc(100% * 7 / 12);
      }

      .#{$infix}\:u-offset3of5,
      .#{$infix}\:u-offset6of10 {
        margin-left: 60%;
      }

      .#{$infix}\:u-offset5of8 {
        margin-left: 62.5%;
      }

      .#{$infix}\:u-offset2of3,
      .#{$infix}\:u-offset4of6,
      .#{$infix}\:u-offset8of12 {
        margin-left: calc(100% * 2 / 3);
      }

      .#{$infix}\:u-offset7of10 {
        margin-left: 70%;
      }

      .#{$infix}\:u-offset3of4,
      .#{$infix}\:u-offset6of8,
      .#{$infix}\:u-offset9of12 {
        margin-left: 75%;
      }

      .#{$infix}\:u-offset4of5,
      .#{$infix}\:u-offset8of10 {
        margin-left: 80%;
      }

      .#{$infix}\:u-offset5of6,
      .#{$infix}\:u-offset10of12 {
        margin-left: calc(100% * 5 / 6);
      }

      .#{$infix}\:u-offset7of8 {
        margin-left: 87.5%;
      }

      .#{$infix}\:u-offset9of10 {
        margin-left: 90%;
      }

      .#{$infix}\:u-offset11of12 {
        margin-left: calc(100% * 11 / 12);
      }
    }
  }
}