@use "../abstracts" as *;
@use "sass:math" as m;

.img {
  @include img-prop(cover);

  &.prlax {
    @include mq(lgup) {
      background-attachment: fixed;
    }
  }

  &.con {
    @include img-prop(contain);
  }

  &.itop {
    @include img-prop(top);
  }

  &.ibot {
    @include img-prop(bottom);
  }

  &.ilft {
    @include img-prop(left);
  }

  &.irgt {
    @include img-prop(right);
  }

  &.ilt {
    @include img-prop(left top);
  }

  &.irt {
    @include img-prop(right top);
  }

  &.ilb {
    @include img-prop(left bottom);
  }

  &.irb {
    @include img-prop(right bottom);
  }

  @each $mq, $class in $min-mqs {
    @include mq($mq) {
      &.con-#{$class} {
        @include img-prop(contain);
      }

      &.itop-#{$class} {
        @include img-prop(top);
      }

      &.ibot-#{$class} {
        @include img-prop(bottom);
      }

      &.ilft-#{$class} {
        @include img-prop(left);
      }

      &.irgt-#{$class} {
        @include img-prop(right);
      }

      &.ilt-#{$class} {
        @include img-prop(left top);
      }

      &.irt-#{$class} {
        @include img-prop(right top);
      }

      &.ilb-#{$class} {
        @include img-prop(left bottom);
      }

      &.irb-#{$class} {
        @include img-prop(right bottom);
      }
    }
  }
}

.img-imp {
  @include img-prop(cover);

  &.prlax-imp {
    @include mq(lgup) {
      background-attachment: fixed;
    }
  }

  &.con-imp {
    @include img-prop(contain);
  }

  &.itop-imp {
    @include img-prop(top);
  }

  &.ibot-imp {
    @include img-prop(bottom);
  }

  &.ilft-imp {
    @include img-prop(left);
  }

  &.irgt-imp {
    @include img-prop(right);
  }

  &.ilt-imp {
    @include img-prop(left top);
  }

  &.irt-imp {
    @include img-prop(right top);
  }

  &.ilb-imp {
    @include img-prop(left bottom);
  }

  &.irb-imp {
    @include img-prop(right bottom);
  }

  @each $mq, $class in $min-mqs {
    @include mq($mq) {
      &.con-#{$class}-imp {
        @include img-prop(contain);
      }

      &.itop-#{$class}-imp {
        @include img-prop(top);
      }

      &.ibot-#{$class}-imp {
        @include img-prop(bottom);
      }

      &.ilft-#{$class}-imp {
        @include img-prop(left);
      }

      &.irgt-#{$class}-imp {
        @include img-prop(right);
      }

      &.ilt-#{$class}-imp {
        @include img-prop(left top);
      }

      &.irt-#{$class}-imp {
        @include img-prop(right top);
      }

      &.ilb-#{$class}-imp {
        @include img-prop(left bottom);
      }

      &.irb-#{$class}-imp {
        @include img-prop(right bottom);
      }
    }
  }
}

.balign {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.balign-lft {
  display: block;
  margin-right: auto;
}

.balign-rgt {
  display: block;
  margin-left: auto;
}

.balign-imp {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.balign-lft-imp {
  display: block !important;
  margin-right: auto !important;
}

.balign-rgt-imp {
  display: block !important;
  margin-left: auto !important;
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    .balign-#{$min-max-mq} {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .balign-lft-#{$min-max-mq} {
      display: block;
      margin-right: auto;
    }

    .balign-rgt-#{$min-max-mq} {
      display: block;
      margin-left: auto;
    }

    .balign-#{$min-max-mq}-imp {
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .balign-lft-#{$min-max-mq}-imp {
      display: block !important;
      margin-right: auto !important;
    }

    .balign-rgt-#{$min-max-mq}-imp {
      display: block !important;
      margin-left: auto !important;
    }
  }
}

@each $class, $loc in $mg-auto {
  .m#{$class}-auto {
    margin#{$loc}: auto;
  }

  .m#{$class}-auto-imp {
    margin#{$loc}: auto !important;
  }
}

@each $dual-loc, $first, $second in $dual-locs {
  .m#{$dual-loc}-auto {
    margin-#{$first}: auto;
    margin-#{$second}: auto;
  }

  .m#{$dual-loc}-auto-imp {
    margin-#{$first}: auto !important;
    margin-#{$second}: auto !important;
  }
}

@each $class, $size in $mg-pd {
  .mg-#{$class} {
    margin: #{$size};
  }

  .pd-#{$class} {
    padding: #{$size};
  }

  .mg-#{$class}-imp {
    margin: #{$size} !important;
  }

  .pd-#{$class}-imp {
    padding: #{$size} !important;
  }

  @each $loc, $prop in $locs {
    .m#{$loc}-#{$class} {
      margin-#{$prop}: #{$size};
    }

    .p#{$loc}-#{$class} {
      padding-#{$prop}: #{$size};
    }

    .m#{$loc}-#{$class}-imp {
      margin-#{$prop}: #{$size} !important;
    }

    .p#{$loc}-#{$class}-imp {
      padding-#{$prop}: #{$size} !important;
    }
  }

  @each $dual-loc, $first, $second in $dual-locs {
    .m#{$dual-loc}-#{$class} {
      margin-#{$first}: #{$size};
      margin-#{$second}: #{$size};
    }

    .p#{$dual-loc}-#{$class} {
      padding-#{$first}: #{$size};
      padding-#{$second}: #{$size};
    }

    .m#{$dual-loc}-#{$class}-imp {
      margin-#{$first}: #{$size} !important;
      margin-#{$second}: #{$size} !important;
    }

    .p#{$dual-loc}-#{$class}-imp {
      padding-#{$first}: #{$size} !important;
      padding-#{$second}: #{$size} !important;
    }
  }
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    @each $class, $loc in $mg-auto {
      .m#{$class}-#{$min-max-mq}-auto {
        margin#{$loc}: auto;
      }

      .m#{$class}-#{$min-max-mq}-auto-imp {
        margin#{$loc}: auto !important;
      }
    }

    @each $dual-loc, $first, $second in $dual-locs {
      .m#{$dual-loc}-#{$min-max-mq}-auto {
        margin-#{$first}: auto;
        margin-#{$second}: auto;
      }

      .m#{$dual-loc}-#{$min-max-mq}-auto-imp {
        margin-#{$first}: auto !important;
        margin-#{$second}: auto !important;
      }
    }

    @each $class, $size in $mg-pd {
      .mg-#{$min-max-mq}-#{$class} {
        margin: #{$size};
      }

      .pd-#{$min-max-mq}-#{$class} {
        padding: #{$size};
      }

      .mg-#{$min-max-mq}-#{$class}-imp {
        margin: #{$size} !important;
      }

      .pd-#{$min-max-mq}-#{$class}-imp {
        padding: #{$size} !important;
      }

      @each $loc, $prop in $locs {
        .m#{$loc}-#{$min-max-mq}-#{$class} {
          margin-#{$prop}: #{$size};
        }

        .p#{$loc}-#{$min-max-mq}-#{$class} {
          padding-#{$prop}: #{$size};
        }

        .m#{$loc}-#{$min-max-mq}-#{$class}-imp {
          margin-#{$prop}: #{$size} !important;
        }

        .p#{$loc}-#{$min-max-mq}-#{$class}-imp {
          padding-#{$prop}: #{$size} !important;
        }
      }

      @each $dual-loc, $first, $second in $dual-locs {
        .m#{$dual-loc}-#{$min-max-mq}-#{$class} {
          margin-#{$first}: #{$size};
          margin-#{$second}: #{$size};
        }

        .p#{$dual-loc}-#{$min-max-mq}-#{$class} {
          padding-#{$first}: #{$size};
          padding-#{$second}: #{$size};
        }

        .m#{$dual-loc}-#{$min-max-mq}-#{$class}-imp {
          margin-#{$first}: #{$size} !important;
          margin-#{$second}: #{$size} !important;
        }

        .p#{$dual-loc}-#{$min-max-mq}-#{$class}-imp {
          padding-#{$first}: #{$size} !important;
          padding-#{$second}: #{$size} !important;
        }
      }
    }
  }
}

.float-lft {
  float: left;
}

.float-rgt {
  float: right;
}

.float-lft-imp {
  float: left !important;
}

.float-rgt-imp {
  float: right !important;
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    .float-lft-#{$min-max-mq} {
      float: left;
    }

    .float-rgt-#{$min-max-mq} {
      float: right;
    }

    .float-lft-#{$min-max-mq}-imp {
      float: left !important;
    }

    .float-rgt-#{$min-max-mq}-imp {
      float: right !important;
    }
  }
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inblock {
  display: inline-block;
}

.d-none-imp {
  display: none !important;
}

.d-block-imp {
  display: block !important;
}

.d-inblock-imp {
  display: inline-block !important;
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    .d-none-#{$min-max-mq} {
      display: none;
    }

    .d-block-#{$min-max-mq} {
      display: block;
    }

    .d-inblock-#{$min-max-mq} {
      display: inline-block;
    }

    .d-none-#{$min-max-mq}-imp {
      display: none !important;
    }

    .d-block-#{$min-max-mq}-imp {
      display: block !important;
    }

    .d-inblock-#{$min-max-mq}-imp {
      display: inline-block !important;
    }
  }
}

@each $position in $positions {
  .p-#{$position} {
    position: $position;
  }

  .p-#{$position}-imp {
    position: $position !important;
  }
}

@each $min-max-mq in $min-max-mqs {
  @each $position in $positions {
    .p-#{$position}-#{$min-max-mq} {
      position: $position;
    }

    .p-#{$position}-#{$min-max-mq}-imp {
      position: $position !important;
    }
  }
}

.xbul {
  list-style: none;
  padding-left: 0;
}

.xbul-imp {
  list-style: none !important;
  padding-left: 0 !important;
}

.img-none {
  background-image: none;
}

@each $class, $formal-size in $formal-sizes {
  .formal-#{$class} {
    height: $formal-size;
  }

  .formal-#{$class}-imp {
    height: $formal-size !important;
  }
}