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

.cont,
.cont-fl {
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@each $mq, $px in $cont-mqs {
  .cont {
    @include mq($mq) {
      padding-left: 0;
      padding-right: 0;
      max-width: m.round($px * 0.95);
    }
  }
}

.grid {
  margin-left: -10px;
  margin-right: -10px;
  @include clearfix;

  &.gut-5 {
    margin-left: -5px;
    margin-right: -5px;

    @include all(gcol, in) {
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  &.xgut {
    margin-left: 0;
    margin-right: 0;

    @include all(gcol, in) {
      padding-left: 0;
      padding-right: 0;
    }
  }

  @include all(gcol) {
    float: left;
    width: 100%;
  }

  [class*="push-"],
  [class*="pull-"] {
    position: relative;
  }

  @for $i from 1 through 12 {
    $percentage: m.div($i * 100%, 12);

    .gcol-#{$i} {
      max-width: $percentage;
    }

    .push-#{$i} {
      left: $percentage;
    }

    .pull-#{$i} {
      right: $percentage;
    }
  }

  @each $min-max-mq in $min-max-mqs {
    @include mq($min-max-mq) {
      @for $i from 1 through 12 {
        $percentage: m.div($i * 100%, 12);

        .gcol-#{$min-max-mq}-#{$i} {
          max-width: $percentage;
        }

        .push-#{$min-max-mq}-#{$i} {
          left: $percentage;
        }

        .pull-#{$min-max-mq}-#{$i} {
          right: $percentage;
        }
      }
    }
  }
}

@include all(gcol) {
  padding-left: 10px;
  padding-right: 10px;
}

.flex {
  @include flex;
}

.flex-top {
  @include flex;
  @include justify(f);
}

.flex-bot {
  @include flex;
  @include justify(f, end);
}

.flex-lft {
  @include flex;
  @include align(i, f);
}

.flex-rgt {
  @include flex;
  @include align(i, f, end);
}

.flex-imp {
  @include flex(t, t);
}

.flex-top-imp {
  @include flex(t, t);
  @include justify(f, start, t);
}

.flex-bot-imp {
  @include flex(t, t);
  @include justify(f, end, t);
}

.flex-lft-imp {
  @include flex(t, t);
  @include align(i, f, start, t);
}

.flex-rgt-imp {
  @include flex(t, t);
  @include align(i, f, end, t);
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    .flex-#{$min-max-mq} {
      @include flex;
    }

    .flex-top-#{$min-max-mq} {
      @include flex;
      @include justify(f);
    }

    .flex-bot-#{$min-max-mq} {
      @include flex;
      @include justify(f, end);
    }

    .flex-lft-#{$min-max-mq} {
      @include flex;
      @include align(i, f);
    }

    .flex-rgt-#{$min-max-mq} {
      @include flex;
      @include align(i, f, end);
    }

    .flex-#{$min-max-mq}-imp {
      @include flex(t, t);
    }

    .flex-top-#{$min-max-mq}-imp {
      @include flex(t, t);
      @include justify(f, start, t);
    }

    .flex-bot-#{$min-max-mq}-imp {
      @include flex(t, t);
      @include justify(f, end, t);
    }

    .flex-lft-#{$min-max-mq}-imp {
      @include flex(t, t);
      @include align(i, f, start, t);
    }

    .flex-rgt-#{$min-max-mq}-imp {
      @include flex(t, t);
      @include align(i, f, end, t);
    }
  }
}

.rflex {
  @include flex(f);
}

.rflex-top {
  @include flex(f);
  @include align(i, f);
}

.rflex-bot {
  @include flex(f);
  @include align(i, f, end);
}

.rflex-lft {
  @include flex(f);
  @include justify(f);
}

.rflex-rgt {
  @include flex(f);
  @include justify(f, end);
}

.rflex-imp {
  @include flex(f, t);
}

.rflex-top-imp {
  @include flex(f, t);
  @include align(i, f, start, t);
}

.rflex-bot-imp {
  @include flex(f, t);
  @include align(i, f, end, t);
}

.rflex-lft-imp {
  @include flex(f, t);
  @include justify(f, start, t);
}

.rflex-rgt-imp {
  @include flex(f, t);
  @include justify(f, end, t);
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    .rflex-#{$min-max-mq} {
      @include flex(f);
    }

    .rflex-top-#{$min-max-mq} {
      @include flex(f);
      @include align(i, f);
    }

    .rflex-bot-#{$min-max-mq} {
      @include flex(f);
      @include align(i, f, end);
    }

    .rflex-lft-#{$min-max-mq} {
      @include flex(f);
      @include justify(f);
    }

    .rflex-rgt-#{$min-max-mq} {
      @include flex(f);
      @include justify(f, end);
    }

    .rflex-#{$min-max-mq}-imp {
      @include flex(f, t);
    }

    .rflex-top-#{$min-max-mq}-imp {
      @include flex(f, t);
      @include align(i, f, start, t);
    }

    .rflex-bot-#{$min-max-mq}-imp {
      @include flex(f, t);
      @include align(i, f, end, t);
    }

    .rflex-lft-#{$min-max-mq}-imp {
      @include flex(f, t);
      @include justify(f, start, t);
    }

    .rflex-rgt-#{$min-max-mq}-imp {
      @include flex(f, t);
      @include justify(f, end, t);
    }
  }
}

.grid-cont {
  @include prefix(
    (
      display: grid,
    ),
    ms,
    f
  );

  @include align(c);
  @include justify;

  &.gtop {
    @include align(c, f);
  }

  &.gbot {
    @include align(c, f, end);
  }

  &.glft {
    @include justify(f);
  }

  &.grgt {
    @include justify(f, end);
  }
}

.table {
  display: table;
  height: 100%;
  width: auto;
  margin: 0 auto;

  &.lft {
    margin-left: 0;
  }

  &.rgt {
    margin-right: 0;
  }

  @each $min-max-mq in $min-max-mqs {
    @include mq($min-max-mq) {
      &.ctr-#{$min-max-mq},
      &.lft-#{$min-max-mq},
      &.rgt-#{$min-max-mq} {
        width: auto;
      }

      &.lft-#{$min-max-mq} {
        margin-left: 0;
      }

      &.rgt-#{$min-max-mq} {
        margin-right: 0;
      }
    }
  }

  & > .valign {
    display: table-cell;
  }
}

.table-imp {
  display: table !important;
  height: 100% !important;
  width: auto !important;
  margin: 0 auto !important;

  &.lft-imp {
    margin-left: 0 !important;
  }

  &.rgt-imp {
    margin-right: 0 !important;
  }

  @each $min-max-mq in $min-max-mqs {
    @include mq($min-max-mq) {
      &.ctr-#{$min-max-mq}-imp,
      &.lft-#{$min-max-mq}-imp,
      &.rgt-#{$min-max-mq}-imp {
        width: auto !important;
      }

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

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

  & > .valign-imp {
    display: table-cell !important;
  }
}

.valign {
  vertical-align: middle;

  &.top {
    vertical-align: top;
  }

  &.bot {
    vertical-align: bottom;
  }

  &.t-top {
    vertical-align: text-top;
  }

  &.t-bot {
    vertical-align: text-bottom;
  }

  @each $min-max-mq in $min-max-mqs {
    @include mq($min-max-mq) {
      &.top-#{$min-max-mq} {
        vertical-align: top;
      }

      &.bot-#{$min-max-mq} {
        vertical-align: bottom;
      }

      &.t-top-#{$min-max-mq} {
        vertical-align: text-top;
      }

      &.t-bot-#{$min-max-mq} {
        vertical-align: text-bottom;
      }
    }
  }
}

.valign-imp {
  vertical-align: middle !important;

  &.top-imp {
    vertical-align: top !important;
  }

  &.bot-imp {
    vertical-align: bottom !important;
  }

  &.t-top-imp {
    vertical-align: text-top !important;
  }

  &.t-bot-imp {
    vertical-align: text-bottom !important;
  }

  @each $min-max-mq in $min-max-mqs {
    @include mq($min-max-mq) {
      &.top-#{$min-max-mq}-imp {
        vertical-align: top !important;
      }

      &.bot-#{$min-max-mq}-imp {
        vertical-align: bottom !important;
      }

      &.t-top-#{$min-max-mq}-imp {
        vertical-align: text-top !important;
      }

      &.t-bot-#{$min-max-mq}-imp {
        vertical-align: text-bottom !important;
      }
    }
  }
}

@for $i from 1 through 9 {
  $percent: $i * 10%;
  $vw: $i * 10vw;
  $vh: $i * 10vh;

  .w-#{$i}0 {
    width: $percent;
  }

  .w-#{$i}0-imp {
    width: $percent !important;
  }

  .vw-#{$i}0 {
    width: $vw;
  }

  .vw-#{$i}0-imp {
    width: $vw !important;
  }

  .h-#{$i}0 {
    height: $percent;
  }

  .h-#{$i}0-imp {
    height: $percent !important;
  }

  .vh-#{$i}0 {
    min-height: $vh;
  }

  .vh-#{$i}0-imp {
    min-height: $vh !important;
  }
}

@each $span, $prop, $dim in $fluids {
  .#{$span}-fluid {
    #{$prop}: $dim;
  }

  .#{$span}-fluid-imp {
    #{$prop}: $dim !important;
  }
}

@each $min-max-mq in $min-max-mqs {
  @include mq($min-max-mq) {
    @for $i from 1 through 9 {
      $percent: $i * 10%;
      $vw: $i * 10vw;
      $vh: $i * 10vh;

      .w-#{$i}0-#{$min-max-mq} {
        width: $percent;
      }

      .w-#{$i}0-#{$min-max-mq}-imp {
        width: $percent !important;
      }

      .vw-#{$i}0-#{$min-max-mq} {
        width: $vw;
      }

      .vw-#{$i}0-#{$min-max-mq}-imp {
        width: $vw !important;
      }

      .h-#{$i}0-#{$min-max-mq} {
        height: $percent;
      }

      .h-#{$i}0-#{$min-max-mq}-imp {
        height: $percent !important;
      }

      .vh-#{$i}0-#{$min-max-mq} {
        min-height: $vh;
      }

      .vh-#{$i}0-#{$min-max-mq}-imp {
        min-height: $vh !important;
      }
    }

    @each $span, $prop, $dim in $fluids {
      .#{$span}-fluid-#{$min-max-mq} {
        #{$prop}: $dim;
      }
    }

    @each $span, $prop, $dim in $fluids {
      .#{$span}-fluid-#{$min-max-mq}-imp {
        #{$prop}: $dim !important;
      }
    }
  }
}

.vwh-fluid {
  width: 100vw;
  min-height: 100vh;
}

.wh-fluid {
  width: 100%;
  height: 100%;
}

.vwh-fluid-imp {
  width: 100vw !important;
  min-height: 100vh !important;
}

.wh-fluid-imp {
  width: 100% !important;
  height: 100% !important;
}

@each $xy in $xys {
  @each $scroll-hidden in $scroll-hiddens {
    .#{$xy}-#{$scroll-hidden} {
      overflow-#{$xy}: $scroll-hidden;
    }

    .#{$xy}-#{$scroll-hidden}-imp {
      overflow-#{$xy}: $scroll-hidden !important;
    }
  }
}

.xy-hidden {
  overflow: hidden;
}

.xy-hidden-imp {
  overflow: hidden !important;
}

@for $i from 5 through 9 {
  $em: m.div($i, 10) * 1em;

  .br-0#{$i} {
    @include prefix(
      (
        border-radius: $em
      ),
      webkit moz
    );
  }

  .br-0#{$i}-imp {
    @include prefix(
      (
        border-radius: s.unquote("#{$em} !important")
      ),
      webkit moz
    );
  }
}

@for $i from 1 through 9 {
  $em: (m.div($i, 10) + 1) * 1em;

  .br-1#{$i} {
    @include prefix(
      (
        border-radius: $em
      ),
      webkit moz
    );
  }

  .br-1#{$i}-imp {
    @include prefix(
      (
        border-radius: s.unquote("#{$em} !important")
      ),
      webkit moz
    );
  }
}

main.main-document {
  overflow-x: hidden;
  background: $dgray;

  @include mq(lg) {
    overflow-x: scroll;
  }

  @media print {
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  &.bg-transparent {
    background: transparent;
  }

  @for $i from 1 through 6 {
    h#{$i} {
      margin-bottom: 2pt;
    }
  }

  header,
  footer,
  section {
    margin-bottom: 5pt;
  }

  li,
  p {
    margin-bottom: 2pt;
  }

  .wrap-paper {
    position: relative;
    overflow: hidden;
    background: #fff;
    width: $paper-width;
    height: $paper-height - $paper-margin;
    margin-bottom: $paper-margin;
    padding: $paper-margin $paper-margin 0;

    @media print {
      width: 100%;
      height: 100%;
      margin: 0 !important;
      padding: 0 !important;
    }

    p.p-pgnum {
      padding: 1em $paper-margin 0;
      margin: 0;
    }
  }
}

.boxfx {
  @include prefix(
    (
      box-shadow: 0 10px 20px 10px $black-05
    ),
    webkit moz
  );
}
