/**
 * @generate-util
 */

// various

.pointer-events-none() {
  pointer-events: none;
}

.pointer-events-auto() {
  pointer-events: auto;
}

.reset-text() {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.text-capitalize() {
  display: inline-block;
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

.design-setup() {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.clearfix() {
  &:before, &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}

.user-select-none() {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.user-select-text() {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.sr-only() {
  position: absolute;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

// toggle

.toggle-block() {
  display: none;
  &.active, &.out {
    display: block;
  }
}

.toggle-flex() {
  display: none;
  &.active, &.out {
    display: flex;
  }
}

.toggle-inline-flex() {
  display: none;
  &.active, &.out {
    display: inline-flex;
  }
}

.toggle-inline() {
  display: none;
  &.active, &.out {
    display: inline;
  }
}

.toggle-inline-block() {
  display: none;
  &.active, &.out {
    display: inline-block;
  }
}

.toggle-visible() {
  visibility: hidden;
  opacity: 0;
  &.active, &.out {
    visibility: visible;
    opacity: 1;
  }
}

.toggle-hidden() {
  &.in-done {
    visibility: hidden;
    opacity: 0;
  }
}

.toggle-inverse() {
  &.in-done {
    display: none;
  }
}

// animation

.transition-none() {
  transition: initial;
  transition-delay: initial;
}

.animation-none() {
  animation: initial;
  animation-delay: initial;
}

.trans-anim-none() {
  .transition-none();
  .animation-none();
}

.transform-none() {
  transform: initial;
}

.duration-none() {
  transition-duration: initial;
  transition-delay: initial;
  animation-duration: initial;
  animation-delay: initial;
  animation-iteration-count: 1;
}

// responsive

.responsive(@breakpoint: none) when (@breakpoint = none) {
  width: auto;
  height: auto;
  max-width: 100%;
  // fix ie11 images inside flex
  flex-shrink: 0;
  /*
  // fix ie11 bug responsive
  min-height: 2px;
  // fix chrome bug responsive
  align-self: center;
  */
}

.responsive(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    width: auto;
    height: auto;
    max-width: 100%;
    // fix ie11 images inside flex
    flex-shrink: 0;
  }
}

.responsive-y(@breakpoint: none) when (@breakpoint = none) {
  width: auto;
  height: auto;
  max-height: 100%;
  // fix ie11 images inside flex
  flex-shrink: 0;
}

.responsive-y(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    width: auto;
    height: auto;
    max-height: 100%;
    // fix ie11 images inside flex
    flex-shrink: 0;
  }
}

// full

.full(@breakpoint: none) when (@breakpoint = none) {
  max-width: none;
  width: 100%;
  height: auto;
}

.full(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    max-width: none;
    width: 100%;
    height: auto;
  }
}

.full-y(@breakpoint: none) when (@breakpoint = none) {
  max-height: none;
  width: auto;
  height: 100%;
}

.full-y(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    max-height: none;
    width: auto;
    height: 100%;
  }
}

// alignment

.align-left(@breakpoint: none) when (@breakpoint = none) {
  text-align: left;
  align-self: flex-start;
  justify-content: flex-start;
}

.align-left(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    text-align: left;
    align-self: flex-start;
    justify-content: flex-start;
  }
}

.align-center(@breakpoint: none) when (@breakpoint = none) {
  text-align: center;
  align-self: center;
  justify-content: center;
}

.align-center(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    text-align: center;
    align-self: center;
    justify-content: center;
  }
}

.align-right(@breakpoint: none) when (@breakpoint = none) {
  text-align: right;
  align-self: flex-end;
  justify-content: flex-end;
}

.align-right(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    text-align: right;
    align-self: flex-end;
    justify-content: flex-end;
  }
}

// display

.display(@val, @breakpoint: none) when (@breakpoint = none) {
  display: @val;
}

.display(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    display: @val;
  }
}

// order

.order(@i, @breakpoint: none) when (@breakpoint = none) {
  @val: extract(@orders, @i + 1);
  order: @val;
}

.order(@i, @breakpoint: none) when (default()) {
  @val: extract(@orders, @i + 1);
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    order: @val;
  }
}

// generate

& when not (@generate-util = false) {

  // generate-utils

  .generate-utils();
  .generate-utils(@breakpoint: none) {
    & when (@breakpoint = none) {
      // links
      .link-underline {
        .link-underline() !important;
      }
      .link-none {
        .link-none();
      }
      // various
      .pointer-events-none {
        .pointer-events-none() !important;
      }
      .pointer-events-auto {
        .pointer-events-auto() !important;
      }
      .reset-text {
        .reset-text() !important;
      }
      .text-capitalize {
        .text-capitalize() !important;
      }
      .overflow-style {
        .overflow-style() !important;
      }
      .overflow-style-inner {
        .overflow-style(@mode: inner) !important;
      }
      .design-setup {
        .design-setup() !important;
      }
      .clearfix {
        .clearfix() !important;
      }
      .user-select-none {
        .user-select-none() !important;
      }
      .user-select-text {
        .user-select-text() !important;
      }
      .sr-only {
        .sr-only() !important;
      }
      // toggle
      .toggle-block {
        .toggle-block() !important;
      }
      .toggle-inverse {
        .toggle-inverse() !important;
      }
      .toggle-flex {
        .toggle-flex() !important;
      }
      .toggle-inline-flex {
        .toggle-inline-flex() !important;
      }
      .toggle-inline {
        .toggle-inline() !important;
      }
      .toggle-inline-block {
        .toggle-inline-block() !important;
      }
      .toggle-visible {
        .toggle-visible() !important;
      }
      .toggle-hidden {
        .toggle-hidden() !important;
      }
      // animation
      .transition-none {
        .transition-none() !important;
      }
      .animation-none {
        .animation-none() !important;
      }
      .trans-anim-none {
        .trans-anim-none() !important;
      }
      .transform-none {
        .transform-none() !important;
      }
      .duration-none {
        .duration-none() !important;
      }
      // responsive
      .responsive {
        .responsive() !important;
      }
      .responsive-y {
        .responsive-y() !important;
      }
      // full
      .full {
        .full() !important;
      }
      .full-y {
        .full-y() !important;
      }
      // alignment
      .align-left {
        .align-left() !important;
      }
      .align-center {
        .align-center() !important;
      }
      .align-right {
        .align-right() !important;
      }
      // display
      .generate-display(@breakpoint);
      // order
      .generate-order(@breakpoint);
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        // responsive
        .responsive-@{breakpoint} {
          .responsive() !important;
        }
        .responsive-y-@{breakpoint} {
          .responsive-y() !important;
        }
        // full
        .full-@{breakpoint} {
          .full() !important;
        }
        .full-y-@{breakpoint} {
          .full-y() !important;
        }
        // alignment
        .align-left-@{breakpoint} {
          .align-left() !important;
        }
        .align-center-@{breakpoint} {
          .align-center() !important;
        }
        .align-right-@{breakpoint} {
          .align-right() !important;
        }
        // display
        .generate-display(@breakpoint);
        // order
        .generate-order(@breakpoint);
      }
    }
  }

  // generate-util-responsive

  & when not (@generate-util = true) {

    .generate-util-responsive();
    .generate-util-responsive(@i: length(@generate-util)) when (@i > 0) {
      .generate-util-responsive(@i - 1);
      @breakpoint: extract(@generate-util, @i);
      .generate-utils(@breakpoint);
    }

  }

  // generate-display

  @display-arr: none, block, inline-block, flex, inline-flex;

  .generate-display(@breakpoint: none, @i: length(@display-arr)) when (@i > 0) {
    .generate-display(@breakpoint, @i - 1);
    @val: extract(@display-arr, @i);
    & when (@breakpoint = none) {
      .display-@{val} {
        .display(@val) !important;
      }
    }
    & when not (@breakpoint = none) {
      .display-@{val}-@{breakpoint} {
        .display(@val) !important;
      }
    }
  }

  // generate-order

  .generate-order(@breakpoint: none, @i: length(@orders)) when (@i > 0) {
    .generate-order(@breakpoint, @i - 1);
    @num: @i - 1;
    & when (@breakpoint = none) {
      .order-@{num} {
        .order(@num) !important;
      }
    }
    & when not (@breakpoint = none) {
      .order-@{num}-@{breakpoint} {
        .order(@num) !important;
      }
    }
  }

}

/**
 * @generate-flex
 */

// flex-none

.flex-none(@breakpoint: none) when (@breakpoint = none) {
  flex: 1 1 0%; // % needed ie11
}

.flex-none(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    flex: 1 1 0%; // % needed ie11
  }
}

// flex-auto

.flex-auto(@breakpoint: none) when (@breakpoint = none) {
  flex: 1 1 auto;
}

.flex-auto(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    flex: 1 1 auto;
  }
}

// flex-full

.flex-full(@breakpoint: none) when (@breakpoint = none) {
  flex: 1 1 100%;
}

.flex-full(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    flex: 1 1 100%;
  }
}

// direction

.flex-direction(@val, @breakpoint: none) when (@breakpoint = none) {
  flex-direction: @val;
}

.flex-direction(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    flex-direction: @val;
  }
}

// wrap

.flex-wrap(@val, @breakpoint: none) when (@breakpoint = none) {
  flex-wrap: @val;
}

.flex-wrap(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    flex-wrap: @val;
  }
}

// justify-content

.justify-content(@val, @breakpoint: none) when (@breakpoint = none) {
  justify-content: @val;
}

.justify-content(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    justify-content: @val;
  }
}

// align-items

.align-items(@val, @breakpoint: none) when (@breakpoint = none) {
  align-items: @val;
}

.align-items(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    align-items: @val;
  }
}

// align-content

.align-content(@val, @breakpoint: none) when (@breakpoint = none) {
  align-content: @val;
}

.align-content(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    align-content: @val;
  }
}

// align-self

.align-self(@val, @breakpoint: none) when (@breakpoint = none) {
  align-self: @val;
}

.align-self(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    align-self: @val;
  }
}

// generate

& when not (@generate-flex = false) {

  // generate-flex

  .generate-flex();
  .generate-flex(@breakpoint: none) {
    & when (@breakpoint = none) {
      // flex util
      .generate-flex-util(@breakpoint);
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        // flex util
        .generate-flex-util(@breakpoint);
      }
    }
  }

  // generate-flex-responsive

  & when not (@generate-flex = true) {

    .generate-flex-responsive();
    .generate-flex-responsive(@i: length(@generate-flex)) when (@i > 0) {
      .generate-flex-responsive(@i - 1);
      @breakpoint: extract(@generate-flex, @i);
      .generate-flex(@breakpoint);
    }

  }

  // generate-flex-util

  .generate-flex-util(@breakpoint: none) {
    & when (@breakpoint = none) {
      .flex-none {
        .flex-none() !important;
      }
      .flex-auto {
        .flex-auto() !important;
      }
      .flex-full {
        .flex-full() !important;
      }
      .flex-direction-row {
        .flex-direction(row) !important;
      }
      .flex-direction-row-reverse {
        .flex-direction(row-reverse) !important;
      }
      .flex-direction-column {
        .flex-direction(column) !important;
      }
      .flex-direction-column-reverse {
        .flex-direction(column-reverse) !important;
      }
      .flex-wrap-wrap {
        .flex-wrap(wrap) !important;
      }
      .flex-wrap-wrap-reverse {
        .flex-wrap(wrap-reverse) !important;
      }
      .flex-wrap-nowrap {
        .flex-wrap(nowrap) !important;
      }
      .justify-content-flex-start {
        .justify-content(flex-start) !important;
      }
      .justify-content-flex-end {
        .justify-content(flex-end) !important;
      }
      .justify-content-center {
        .justify-content(center) !important;
      }
      .justify-content-space-between {
        .justify-content(space-between) !important;
      }
      .justify-content-space-around {
        .justify-content(space-around) !important;
      }
      .justify-content-space-evenly {
        .justify-content(space-evenly) !important;
      }
      .align-items-flex-start {
        .align-items(flex-start) !important;
      }
      .align-items-flex-end {
        .align-items(flex-end) !important;
      }
      .align-items-center {
        .align-items(center) !important;
      }
      .align-items-baseline {
        .align-items(baseline) !important;
      }
      .align-items-stretch {
        .align-items(stretch) !important;
      }
      .align-content-flex-start {
        .align-content(flex-start) !important;
      }
      .align-content-flex-end {
        .align-content(flex-end) !important;
      }
      .align-content-center {
        .align-content(center) !important;
      }
      .align-content-space-between {
        .align-content(space-between) !important;
      }
      .align-content-space-around {
        .align-content(space-around) !important;
      }
      .align-content-stretch {
        .align-content(stretch) !important;
      }
      .align-self-flex-start {
        .align-self(flex-start) !important;
      }
      .align-self-flex-end {
        .align-self(flex-end) !important;
      }
      .align-self-center {
        .align-self(center) !important;
      }
      .align-self-baseline {
        .align-self(baseline) !important;
      }
      .align-self-stretch {
        .align-self(stretch) !important;
      }
      .align-self-auto {
        .align-self(auto) !important;
      }
    }
    & when not (@breakpoint = none) {
      .flex-none-@{breakpoint} {
        .flex-none() !important;
      }
      .flex-auto-@{breakpoint} {
        .flex-auto() !important;
      }
      .flex-full-@{breakpoint} {
        .flex-full() !important;
      }
      .flex-direction-row-@{breakpoint} {
        .flex-direction(row) !important;
      }
      .flex-direction-row-reverse-@{breakpoint} {
        .flex-direction(row-reverse) !important;
      }
      .flex-direction-column-@{breakpoint} {
        .flex-direction(column) !important;
      }
      .flex-direction-column-reverse-@{breakpoint} {
        .flex-direction(column-reverse) !important;
      }
      .flex-wrap-wrap-@{breakpoint} {
        .flex-wrap(wrap) !important;
      }
      .flex-wrap-wrap-reverse-@{breakpoint} {
        .flex-wrap(wrap-reverse) !important;
      }
      .flex-wrap-nowrap-@{breakpoint} {
        .flex-wrap(nowrap) !important;
      }
      .justify-content-flex-start-@{breakpoint} {
        .justify-content(flex-start) !important;
      }
      .justify-content-flex-end-@{breakpoint} {
        .justify-content(flex-end) !important;
      }
      .justify-content-center-@{breakpoint} {
        .justify-content(center) !important;
      }
      .justify-content-space-between-@{breakpoint} {
        .justify-content(space-between) !important;
      }
      .justify-content-space-around-@{breakpoint} {
        .justify-content(space-around) !important;
      }
      .justify-content-space-evenly-@{breakpoint} {
        .justify-content(space-evenly) !important;
      }
      .align-items-flex-start-@{breakpoint} {
        .align-items(flex-start) !important;
      }
      .align-items-flex-end-@{breakpoint} {
        .align-items(flex-end) !important;
      }
      .align-items-center-@{breakpoint} {
        .align-items(center) !important;
      }
      .align-items-baseline-@{breakpoint} {
        .align-items(baseline) !important;
      }
      .align-items-stretch-@{breakpoint} {
        .align-items(stretch) !important;
      }
      .align-content-flex-start-@{breakpoint} {
        .align-content(flex-start) !important;
      }
      .align-content-flex-end-@{breakpoint} {
        .align-content(flex-end) !important;
      }
      .align-content-center-@{breakpoint} {
        .align-content(center) !important;
      }
      .align-content-space-between-@{breakpoint} {
        .align-content(space-between) !important;
      }
      .align-content-space-around-@{breakpoint} {
        .align-content(space-around) !important;
      }
      .align-content-stretch-@{breakpoint} {
        .align-content(stretch) !important;
      }
      .align-self-auto-@{breakpoint} {
        .align-self(auto) !important;
      }
      .align-self-flex-start-@{breakpoint} {
        .align-self(flex-start) !important;
      }
      .align-self-flex-end-@{breakpoint} {
        .align-self(flex-end) !important;
      }
      .align-self-center-@{breakpoint} {
        .align-self(center) !important;
      }
      .align-self-baseline-@{breakpoint} {
        .align-self(baseline) !important;
      }
      .align-self-stretch-@{breakpoint} {
        .align-self(stretch) !important;
      }
    }
  }

}

/**
 * @generate-margin
 */

// margin

.margin(@pos: all, @size, @breakpoint: none) when (@breakpoint = none) {
  & when (isnumber(@size)) {
    .print-margin(@pos, @size, @breakpoint);
  }
  & when not (isnumber(@size)) {
    .loop-margin(@pos, @size, @breakpoint);
  }
  // layout
  & when (@size = layout) and (@pos = y) {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  & when (@size = layout) and (@pos = x) {
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  & when (@size = layout) and (@pos = top) {
    &:first-child {
      margin-top: 0;
    }
  }
  & when (@size = layout) and (@pos = bottom) {
    &:last-child {
      margin-bottom: 0;
    }
  }
  & when (@size = layout) and (@pos = left) {
    &:first-child {
      margin-left: 0;
    }
  }
  & when (@size = layout) and (@pos = right) {
    &:last-child {
      margin-right: 0;
    }
  }
}

.margin(@pos: all, @size, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    & when (isnumber(@size)) {
      .print-margin(@pos, @size, @breakpoint);
    }

    & when not (isnumber(@size)) {
      .loop-margin(@pos, @size, @breakpoint);
    }
  }
}

.loop-margin(@pos: all, @size, @breakpoint: none, @i: length(@margins)) when (@i > 0) {
  .loop-margin(@pos, @size, @breakpoint: none, @i - 1);
  @margin: extract(@margins, @i);
  @name: extract(@margin, 1);
  @val: extract(@margin, 2);
  & when (@name = @size) {
    .print-margin(@pos, @val, @breakpoint);
  }
}

.print-margin(@pos, @val, @breakpoint) when (@pos = all) {
  margin: @val;
}
.print-margin(@pos, @val, @breakpoint) when (@pos = x) {
  margin-left: @val;
  margin-right: @val;
}
.print-margin(@pos, @val, @breakpoint) when (@pos = y) {
  margin-top: @val;
  margin-bottom: @val;
}
.print-margin(@pos, @val, @breakpoint) when (@pos = left) {
  margin-left: @val;
}
.print-margin(@pos, @val, @breakpoint) when (@pos = right) {
  margin-right: @val;
}
.print-margin(@pos, @val, @breakpoint) when (@pos = top) {
  margin-top: @val;
}
.print-margin(@pos, @val, @breakpoint) when (@pos = bottom) {
  margin-bottom: @val;
}

// margin-remove

.margin-remove(@pos: all, @size, @breakpoint: none) when (@breakpoint = none) {
  & when (isnumber(@size)) {
    .print-margin-remove(@pos, @size, @breakpoint);
  }
  & when not (isnumber(@size)) {
    .loop-margin-remove(@pos, @size, @breakpoint);
  }
}

.margin-remove(@pos: all, @size, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    & when (isnumber(@size)) {
      .print-margin-remove(@pos, @size, @breakpoint);
    }

    & when not (isnumber(@size)) {
      .loop-margin-remove(@pos, @size, @breakpoint);
    }
  }
}

.loop-margin-remove(@pos: all, @size, @breakpoint: none, @i: length(@margins)) when (@i > 0) {
  .loop-margin-remove(@pos, @size, @breakpoint: none, @i - 1);
  @margin: extract(@margins, @i);
  @name: extract(@margin, 1);
  @val: extract(@margin, 2);
  & when (@name = @size) {
    .print-margin-remove(@pos, @val, @breakpoint);
  }
}

.print-margin-remove(@pos, @val, @breakpoint) when (@pos = all) {
  margin: -@val;
}
.print-margin-remove(@pos, @val, @breakpoint) when (@pos = x) {
  margin-left: -@val;
  margin-right: -@val;
}
.print-margin-remove(@pos, @val, @breakpoint) when (@pos = y) {
  margin-top: -@val;
  margin-bottom: -@val;
}
.print-margin-remove(@pos, @val, @breakpoint) when (@pos = left) {
  margin-left: -@val;
}
.print-margin-remove(@pos, @val, @breakpoint) when (@pos = right) {
  margin-right: -@val;
}
.print-margin-remove(@pos, @val, @breakpoint) when (@pos = top) {
  margin-top: -@val;
}
.print-margin-remove(@pos, @val, @breakpoint) when (@pos = bottom) {
  margin-bottom: -@val;
}

// generate

& when not (@generate-margin = false) {

  @margin-arr: all, x, y, left, right, top, bottom;

  // layout

  .m-all-layout {
    .margin(y, layout) !important;
    .margin(x, layout) !important;
  }
  .m-x-layout {
    .margin(x, layout) !important;
  }
  .m-y-layout {
    .margin(y, layout) !important;
  }
  .m-l-layout {
    .margin(left, layout) !important;
  }
  .m-r-layout {
    .margin(right, layout) !important;
  }
  .m-t-layout {
    .margin(top, layout) !important;
  }
  .m-b-layout {
    .margin(bottom, layout) !important;
  }

  // generate-margins

  .generate-margins();
  .generate-margins(@breakpoint: none) {
    & when (@breakpoint = none) {
      .generate-margin(@breakpoint);
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        .generate-margin(@breakpoint);
      }
    }
  }

  // generate-margin

  .generate-margin(@breakpoint: none, @i: length(@margin-arr)) when (@i > 0) {
    .generate-margin(@breakpoint, @i - 1);
    @pos: extract(@margin-arr, @i);
    .generate-margin-loop(@pos, @breakpoint);
  }
  .generate-margin-loop(@pos, @breakpoint, @i: length(@margins)) when (@i > 0) {
    .generate-margin-loop(@pos, @breakpoint, @i - 1);
    @margin: extract(@margins, @i);
    @name: extract(@margin, 1);
    @size: extract(@margin, 2);
    & when (@breakpoint = none) {
      & when (@pos = none) {
        .m-@{name} {
          .margin(@pos, @name, @breakpoint) !important;
        }
        & when not (@size = auto) and not (@size = 0) {
          .m-remove-@{name} {
            .margin-remove(@pos, @name, @breakpoint) !important;
          }
        }
      }
      & when not (@pos = none) {
        .m-@{pos}-@{name} {
          .margin(@pos, @name, @breakpoint) !important;
        }
        & when not (@size = auto) and not (@size = 0) {
          .m-remove-@{pos}-@{name} {
            .margin-remove(@pos, @name, @breakpoint) !important;
          }
        }
      }
    }
    & when not (@breakpoint = none) {
      & when (@pos = none) {
        .m-@{name}-@{breakpoint} {
          .margin(@pos, @name) !important;
        }
        & when not (@size = auto) and not (@size = 0) {
          .m-remove-@{name}-@{breakpoint} {
            .margin-remove(@pos, @name) !important;
          }
        }
      }
      & when not (@pos = none) {
        .m-@{pos}-@{name}-@{breakpoint} {
          .margin(@pos, @name) !important;
        }
        & when not (@size = auto) and not (@size = 0) {
          .m-remove-@{pos}-@{name}-@{breakpoint} {
            .margin-remove(@pos, @name) !important;
          }
        }
      }
    }
  }

  // generate-margin-responsive

  & when not (@generate-margin = true) {

    .generate-margin-responsive();
    .generate-margin-responsive(@i: length(@generate-margin)) when (@i > 0) {
      .generate-margin-responsive(@i - 1);
      @breakpoint: extract(@generate-margin, @i);
      .generate-margins(@breakpoint);
    }

  }

}

/**
 * @generate-padding
 */

// padding

.padding(@pos: all, @size, @breakpoint: none) when (@breakpoint = none) {
  & when (isnumber(@size)) {
    .print-padding(@pos, @size, @breakpoint);
  }
  & when not (isnumber(@size)) {
    .loop-padding(@pos, @size, @breakpoint);
  }
  // layout
  & when (@size = layout) and (@pos = x) {
    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      padding-right: 0;
    }
  }
  & when (@size = layout) and (@pos = y) {
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      padding-bottom: 0;
    }
  }
  & when (@size = layout) and (@pos = left) {
    &:first-child {
      padding-left: 0;
    }
  }
  & when (@size = layout) and (@pos = right) {
    &:last-child {
      padding-right: 0;
    }
  }
  & when (@size = layout) and (@pos = top) {
    &:first-child {
      padding-top: 0;
    }
  }
  & when (@size = layout) and (@pos = bottom) {
    &:last-child {
      padding-bottom: 0;
    }
  }
}

.padding(@pos: all, @size, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    & when (isnumber(@size)) {
      .print-padding(@pos, @size, @breakpoint);
    }

    & when not (isnumber(@size)) {
      .loop-padding(@pos, @size, @breakpoint);
    }
  }
}

.loop-padding(@pos: all, @size, @breakpoint: none, @i: length(@paddings)) when (@i > 0) {
  .loop-padding(@pos, @size, @breakpoint: none, @i - 1);
  @padding: extract(@paddings, @i);
  @name: extract(@padding, 1);
  @val: extract(@padding, 2);
  & when (@name = @size) {
    .print-padding(@pos, @val, @breakpoint);
  }
}

.print-padding(@pos, @val, @breakpoint) when (@pos = all) {
  padding: @val;
}
.print-padding(@pos, @val, @breakpoint) when (@pos = x) {
  padding-left: @val;
  padding-right: @val;
}
.print-padding(@pos, @val, @breakpoint) when (@pos = y) {
  padding-top: @val;
  padding-bottom: @val;
}
.print-padding(@pos, @val, @breakpoint) when (@pos = left) {
  padding-left: @val;
}
.print-padding(@pos, @val, @breakpoint) when (@pos = right) {
  padding-right: @val;
}
.print-padding(@pos, @val, @breakpoint) when (@pos = top) {
  padding-top: @val;
}
.print-padding(@pos, @val, @breakpoint) when (@pos = bottom) {
  padding-bottom: @val;
}

// generate

& when not (@generate-padding = false) {

  @padding-arr: all, x, y, left, right, top, bottom;

  // layout

  .p-all-layout {
    .padding(y, layout) !important;
    .padding(x, layout) !important;
  }
  .p-x-layout {
    .padding(x, layout) !important;
  }
  .p-y-layout {
    .padding(y, layout) !important;
  }
  .p-l-layout {
    .padding(left, layout) !important;
  }
  .p-r-layout {
    .padding(right, layout) !important;
  }
  .p-t-layout {
    .padding(top, layout) !important;
  }
  .p-b-layout {
    .padding(bottom, layout) !important;
  }

  // generate-paddings

  .generate-paddings();
  .generate-paddings(@breakpoint: none) {
    & when (@breakpoint = none) {
      .generate-padding(@breakpoint);
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        .generate-padding(@breakpoint);
      }
    }
  }

  // generate-padding

  .generate-padding(@breakpoint: none, @i: length(@padding-arr)) when (@i > 0) {
    .generate-padding(@breakpoint, @i - 1);
    @pos: extract(@padding-arr, @i);
    .generate-padding-loop(@pos, @breakpoint);
  }
  .generate-padding-loop(@pos, @breakpoint, @i: length(@paddings)) when (@i > 0) {
    .generate-padding-loop(@pos, @breakpoint, @i - 1);
    @padding: extract(@paddings, @i);
    @name: extract(@padding, 1);
    @size: extract(@padding, 2);
    & when (@breakpoint = none) {
      & when (@pos = none) {
        .p-@{name} {
          .padding(@pos, @name, @breakpoint) !important;
        }
      }
      & when not (@pos = none) {
        .p-@{pos}-@{name} {
          .padding(@pos, @name, @breakpoint) !important;
        }
      }
    }
    & when not (@breakpoint = none) {
      & when (@pos = none) {
        .p-@{name}-@{breakpoint} {
          .padding(@pos, @name) !important;
        }
      }
      & when not (@pos = none) {
        .p-@{pos}-@{name}-@{breakpoint} {
          .padding(@pos, @name) !important;
        }
      }
    }
  }

  // generate-padding-responsive

  & when not (@generate-padding = true) {

    .generate-padding-responsive();
    .generate-padding-responsive(@i: length(@generate-padding)) when (@i > 0) {
      .generate-padding-responsive(@i - 1);
      @breakpoint: extract(@generate-padding, @i);
      .generate-paddings(@breakpoint);
    }

  }

}