.border {
  // no border at sm
  &-sm-0 {
    @include border("sm", false);
  }
  &-sm-top-0 {
    @include border("sm", false, "top");
  }
  &-sm-right-0 {
    @include border("sm", false, "right");
  }
  &-sm-bottom-0 {
    @include border("sm", false, "bottom");
  }
  &-sm-left-0 {
    @include border("sm", false, "left");
  }
  &-sm-x-0 {
    @include border("sm", false, "x");
  }
  &-sm-y-0 {
    @include border("sm", false, "y");
  }
  // bordered only at sm
  &-sm-1 {
    @include border("sm", true);
  }
  &-sm-top-1 {
    @include border("sm", true, "top");
  }
  &-sm-right-1 {
    @include border("sm", true, "right");
  }
  &-sm-bottom-1 {
    @include border("sm", true, "bottom");
  }
  &-sm-left-1 {
    @include border("sm", true, "left");
  }
  &-sm-x-1 {
    @include border("sm", true, "x");
  }
  &-sm-y-1 {
    @include border("sm", true, "y");
  }
  // border
  &-y-1 {
    @include border("", true, y);
  }
}

// colors
.bg-none {
  @include bg-color(transparent, "");
}

.bg-gray {
  background-color: $alt-gray-3 !important;
}

.bg-black {
  @include bg-color(#000, "");
}

.bg-dark-gray {
  @include bg-color($dark-gray, "");
}

// bg only on sm
.bg-sm-none {
  @include bg-color(transparent, "sm");
}

.bg-sm-gray {
  @include bg-color($alt-gray-3, "sm");
}

.bg-sm-black {
  @include bg-color(#000, "sm");
}

// pseudo bg
.ps-round-bg-green {
  @include round-pseudo-bg($green, "round");
}

.ps-round-bg-lightgreen {
  @include round-pseudo-bg($light-green, "round");
}

.icon-sm-square-sm {
  width: 15px;
  height: 15px;
}

.ps-round-bg-blue {
  @include round-pseudo-bg($blue, "round");
}

.ps-round-bg-salmon {
  @include round-pseudo-bg($salmon, "round");
}

.ps-round-bg-dark-blue {
  @include round-pseudo-bg($dark-blue, "round");
}

// Icon
.icon-sm-square {
  width: 25px;
  height: 25px;
}

.abs {
  &-t {
    @include absolute-position(0, auto, auto, auto, "");
  }
  &-r {
    @include absolute-position(auto, 0, auto, auto, "");
    &-b {
      @include absolute-position(auto, 0, 0, auto, "");
      &-n2 {
        @include absolute-position(auto, -20px, 0, auto, "");
      }
    }
    &-t {
      @include absolute-position(0, 0, auto, auto, "");
    }
  }
  &-b {
    @include absolute-position(auto, auto, 0, auto, "");
    &-center {
      @include absolute-position(auto, auto, 0, 50%, translate(-50%, 0));
    }
  }
  &-l {
    @include absolute-position(auto, auto, auto, 0, "");
    &-b {
      @include absolute-position(auto, auto, 0, 0, "");
    }
    &-t {
      @include absolute-position(0, auto, auto, 0, "");
    }
    &-n35 {
      @include absolute-position(auto, auto, auto, -35%, "");
    }
  }
  &-center {
    @include absolute-position(50%, auto, auto, 50%, translate(-50%, -50%));
  }
}

.w {
  &-sm {
    &-25 {
      @include media-breakpoint-up(sm) {
        width: 25% !important;
      }
    }
    &-50 {
      @include media-breakpoint-up(sm) {
        width: 50% !important;
      }
    }
    &-75 {
      @include media-breakpoint-up(sm) {
        width: 75% !important;
      }
    }
    &-100 {
      @include media-breakpoint-up(sm) {
        width: 100% !important;
      }
    }
    &-150 {
      @include media-breakpoint-up(sm) {
        width: 150px !important;
      }
    }
    &-315 {
      @include media-breakpoint-up(sm) {
        width: 315px !important;
      }
    }
    &-auto {
      @include media-breakpoint-up(sm) {
        width: auto !important;
      }
    }
  }
  &-md {
    &-25 {
      @include media-breakpoint-up(md) {
        width: 25% !important;
      }
    }
    &-50 {
      @include media-breakpoint-up(md) {
        width: 50% !important;
      }
    }
    &-75 {
      @include media-breakpoint-up(md) {
        width: 75% !important;
      }
    }
    &-100 {
      @include media-breakpoint-up(md) {
        width: 100% !important;
      }
    }

    &-auto {
      @include media-breakpoint-up(md) {
        width: auto !important;
      }
    }
  }
  &-lg {
    &-25 {
      @include media-breakpoint-up(lg) {
        width: 25% !important;
      }
    }
    &-50 {
      @include media-breakpoint-up(lg) {
        width: 50% !important;
      }
    }
    &-75 {
      @include media-breakpoint-up(lg) {
        width: 75% !important;
      }
    }
    &-100 {
      @include media-breakpoint-up(lg) {
        width: 100% !important;
      }
    }

    &-auto {
      @include media-breakpoint-up(lg) {
        width: auto !important;
      }
    }
  }
}

.sticky-heading {
  background-color: #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.overflow-visible {
  overflow: visible !important;
}

.section-title {
  line-height: 1.2;
  font-size: 20px;
  margin: 14px 0 4px;

  @include media-breakpoint-up(sm) {
    font-size: 26px;
    margin: 22px 0 4px;
  }
}

// margin
.mt {
  &-05 {
    @include custom-margin(0.5, t, "");
  }
  &-sm {
    &-05 {
      @include custom-margin(0.5, t, "sm");
    }
  }
}
.mr {
  &-05 {
    @include custom-margin(0.5, r, "");
  }
  &-sm {
    &-05 {
      @include custom-margin(0.5, r, "sm");
    }
  }
}
.mb {
  &-05 {
    @include custom-margin(0.5, b, "");
  }
  &-sm {
    &-05 {
      @include custom-margin(0.5, b, "sm");
    }
  }
}
.ml {
  &-05 {
    @include custom-margin(0.5, l, "");
  }
  &-sm {
    &-05 {
      @include custom-margin(0.5, l, "sm");
    }
  }
}
.mx {
  &-05 {
    @include custom-margin(0.5, x, "");
  }
  &-sm {
    &-05 {
      @include custom-margin(0.5, x, "sm");
    }
  }
}
.my {
  &-05 {
    @include custom-margin(0.5, y, "");
  }
  &-sm {
    &-05 {
      @include custom-margin(0.5, y, "sm");
    }
  }
}

// padding
.pt {
  &-05 {
    @include custom-padding(0.5, t, "");
  }
  &-sm {
    &-05 {
      @include custom-padding(0.5, t, "sm");
    }
  }
}
.pr {
  &-05 {
    @include custom-padding(0.5, r, "");
  }
  &-sm {
    &-05 {
      @include custom-padding(0.5, r, "sm");
    }
  }
}
.pb {
  &-05 {
    @include custom-padding(0.5, b, "");
  }
  &-sm {
    &-05 {
      @include custom-padding(0.5, b, "sm");
    }
  }
}
.pl {
  &-05 {
    @include custom-padding(0.5, l, "");
  }
  &-sm {
    &-05 {
      @include custom-padding(0.5, l, "sm");
    }
  }
}
.px {
  &-05 {
    @include custom-padding(0.5, x, "");
  }
  &-sm {
    &-05 {
      @include custom-padding(0.5, x, "sm");
    }
  }
}
.py {
  &-05 {
    @include custom-padding(0.5, y, "");
  }
  &-sm {
    &-05 {
      @include custom-padding(0.5, y, "sm");
    }
  }
}

.lh-1 {
  line-height: 1em;
}

.hr {
  position: relative;
  color: #999999;
  text-align: center;
  margin: 10px 0 14px 0;
  span {
    background-color: white;
    padding: 0 30px;
  }
  &:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    display: block;
    z-index: -1;
    background-color: $border-color;
  }
}

.fw {
  &-600 {
    font-weight: 600;
  }
}

.is {
  &-disabled {
    cursor: not-allowed;
    * {
      color: $form-input-disabled-color;
      border-color: $form-input-disabled-border-color;
      pointer-events: none;
    }
  }
  &-placeholder {
    color: $form-input-disabled-color;
  }
}

.a {
  color: $blue;
  cursor: pointer;
}

.color {
  &--blue {
    color: $blue;
  }
}
