Buttons

.btn {
  position: relative;
  margin: 0 0 .5em;
  padding: 0.625em 1.875em;
  display: inline-block;
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: $font-weight-normal;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.0225rem;
  z-index: 1;
  &:disabled, &.disabled {
    opacity: 1;
    cursor: initial;
  }
  &:focus, &.focus {
    box-shadow: none;
  }
  &:not(:disabled):not(.disabled) {
    &:active, &.active {
      &:focus {
        box-shadow: none;
      }
    }
  }
  &-lg {
    padding: 0.75em 1.75em;
    font-size: 1.25rem;
  }
  &-sm {
    padding: 0.25em 1.875em;
    font-size: 1rem;
  }
  &-black {
    background: $black;
    &.disabled {
      background: $gray-600;
    }
  }
  &-white {
    background: $white;
  }
  &.btn-back, &.btn-prev {
    &:hover, &:focus {
      > .fas, > .far, > .fal, > .fad, > .fab {
        &:before {
          margin-left: -5px;
        }
      }
    }
  }
  &.btn-more, &.btn-next {
    &:hover, &:focus {
      > .fas, > .far, > .fal, > .fad, > .fab {
        &:before {
          margin-right: -5px;
        }
      }
    }
  }
  > .fas, > .far, > .fal, > .fad, > .fab {
    display: inline-block;
    width: 1rem;
    &:before {
      transition: all .15s ease;
    }
  }
  > .fas, > .far, > .fal, > .fad, > .fab {
    &:before {
      transition: all .15s ease;
    }
  }
  &.btn-icon-left {
    > .fas, > .far, > .fal, > .fad, > .fab {
      margin-right: 1rem;
    }
  }
  &.btn-icon-right {
    > .fas, > .far, > .fal, > .fad, > .fab {
      margin-left: 1rem;
    }
  }
  &.pos {
    &--bottom-left {

      position: absolute;
      left: 50px;
      bottom: -30px;
      z-index: 9;
    }
    &--top-right {

      position: absolute;
      right: 50px;
      top: -30px;
      z-index: 9;
    }
  }

  &-flat {
    color: $accent;
    background: linear-gradient(to right, $primary, $primary 50%, $accent 51%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position .5s ease;
    .dark & {
      background: linear-gradient(to right, $white, $white 50%, $accent 51%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      background-position: 100%;
    }
    &.disabled {
      color: $gray-600;
      background: transparent;
      background-clip: initial;
      -webkit-background-clip: initial;
      -webkit-text-fill-color: initial;
      .dark & {
        color: $gray-600;
      }
    }
    &.btn-left, &.btn-back, &.btn-prev, &.btn-icon-left {
      background-position: -100%;
    }
    &:hover {
      background-position: 0 -100%;
    }
    &.white {
      color: $accent;
      background: linear-gradient(to right, $primary, $primary 50%, $white 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      background-position: 100%;
      transition: background-position .5s ease;
      .dark & {
        background: linear-gradient(to right, $primary, $primary 50%, $white 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        background-position: 100%;
      }
      &.btn-left, &.btn-back, &.btn-prev, &.btn-icon-left {
        background-position: -100%;
      }
      &:hover {
        background-position: 0 -100%;
      }
    }
  }

  &-contained {
    padding: 1em 2.5em;
    border: none;
    font-weight: $font-weight-medium;
    line-height: 1.375;
    color: $white;
    .dark & {
      &:after {
        background: $white!important;
      }
      &:hover {
        color: $black;
      }
    }
    &.btn-left, &.btn-back, &.btn-prev, &.btn-icon-left  {
      &:after {
        transform: translateX(100%);
      }
      &:hover {
        &:before {
          transform: translateX(-100%);
        }
        &:after {
          transform: translateX(0%);
        }
      }
    }
    &.disabled {
      background-color: $gray-300;
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
      .dark & {
        color: $black;
        background-color: $gray-600;
      }
    }
    &:before {
      width: 100%;
      height: 100%;
      @extend .bg-gradient-accent;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      transition: all .3s ease;
    }
    &:after {
      width: 100%;
      height: 100%;
      @extend .bg-gradient-primary;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      transition: all .3s ease;
      transform: translateX(-100%);
    }
    &:hover {
      color: $white;
      &:before {
        transform: translateX(100%);
      }
      &:after {
        transform: translateX(0%);
      }
    }
    &.dark {
      &:before {
        width: 100%;
        height: 100%;
        @extend .bg-gradient-dark;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        transition: all .3s ease;
      }
      &:after {
        width: 100%;
        height: 100%;
        @extend .bg-gradient-accent;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        transition: all .3s ease;
        transform: translateX(-100%);
      }
    }
  }

  &-outlined {
    color: $accent;
    background: transparent;
    background: linear-gradient(to right, $primary, $primary 50%, $accent 51%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position .5s ease;
    .dark & {
      background: linear-gradient(to right, $white, $white 50%, $accent 51%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      background-position: 100%;
      &:after {
        background: $white!important;
        border-color: $white;
      }
      &:hover {
        color: $black!important;
      }
    }
    &.btn-sm {
      &:before, &:after {
        border-width: 1px;
      }
    }
    &.btn-left, &.btn-back, &.btn-prev, &.btn-icon-left {
      background-position: -100%;
    }
    &.disabled {
      color: $gray-300;
      background: transparent;
      background-clip: initial;
      -webkit-background-clip: initial;
      -webkit-text-fill-color: initial;
      &:before {
        border-color: $gray-300;
      }
      .dark & {
        color: $gray-600;
        &:before {
          border-color: $gray-600;
        }
      }
    }
    &:hover, &:focus {
      background-position: 0 -100%;
      &:before {

      }
      &:after {

      }
    }
    &:before {
      width: 100%;
      height: 100%;
      border: 1px solid $accent;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      transition: all .3s ease;
    }
  }

  &-link {
    &:hover {
      background-position: 0 -100%;
      text-decoration: none;
    }
  }
}