/*----------------------------------
* Buttons
----------------------------------*/
.links-white {
  a {
    &:not(:hover) {
      color: rgba($px-white, 0.7);
    }
    &:hover {
      color: #fff;
    }
  }
}
.links-dark {
  a {
    &:not(:hover) {
      color: $px-body-color;
    }
    &:hover {
      color: $px-dark;
    }
  }
}

.overlay-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
}
.m-btn-dual {
  .m-btn {
    margin: 5px;
  }
}

.m-btn-wide {
  min-width: 160px;
}

@each $color, $value in $button-colors {
  .m-btn.m-btn-#{$color} {
    background: #{$value};
    color: $px-white;
    &.active,
    &:focus,
    &:hover {
      background: darken($value, 15%);
      color: $px-white;
    }
  }
  .m-btn.m-btn-#{$color}-light {
    background: rgba($value, 0.2);
    color: #{$value};
    &.active,
    &:focus,
    &:hover {
      background: #{$value};
      color: $px-white;
    }
  }

  .m-btn.m-btn-t-#{$color} {
    border: 1px solid $value;
    background: transparent;
    color: #{$value};
    &.active,
    &:focus,
    &:hover {
      background: #{$value};
      color: $px-white;
    }
  }
  .m-link-#{$color} {
    color: #{$value};
    padding: 0;
    border: none;
    background: none;
    &.active,
    &:focus,
    &:hover {
      color: darken($value, 18%);
    }
  }
}

.m-btn {
  display: inline-block;
  border: none;
  color: inherit;
  line-height: 1.5;
  border-radius: 0;
  padding: $button-padding-y $button-padding-x;
  font-size: $button-font-size;
  cursor: pointer;
  font-weight: $button-wight;
  @include transition(ease-in-out all 0.55s);
  text-align: center;
  border: 1px solid transparent;
  .btn-inner-icon {
    img {
      width: 20px;
    }
  }
  .btn-inner-text {
    &:not(:first-child) {
      margin-left: 10px;
    }
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
  &.m-link {
    padding-right: 0;
    padding-left: 0;
    &.white {
      color: $px-white;
    }
    &.theme {
      color: $px-theme;
    }
    &.theme2nd {
      color: $px-theme2nd;
    }
  }
  i {
    vertical-align: middle;
  }
  &[disabled],
  &:disabled,
  &.disabled {
    opacity: 0.3;
    box-shadow: none;
    pointer-events: none;
  }
  &.m-btn-shadow {
    box-shadow: $button-shadow;
  }
  &.m-btn-round {
    border-radius: $button-round;
  }

  &.m-btn-radius {
    border-radius: $button-radius;
  }

  &.m-btn-icon {
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    &.m-btn-round {
      border-radius: 50%;
    }
  }

  &.m-btn-sm {
    padding: $button-padding-y-sm $button-padding-x-sm;
    font-size: $button-font-size-sm;
    line-height: 1.5;
    &.m-btn-icon {
      width: 2.4375rem;
      height: 2.4375rem;
      line-height: 2.4375rem;
    }
  }

  &.m-btn-lg {
    padding: $button-padding-y-lg $button-padding-x-lg;
    font-size: $button-font-size-lg;
    line-height: 1.5;
    &.m-btn-icon {
      width: 4rem;
      height: 4rem;
      line-height: 4rem;
    }
  }

  &.m-btn-xl {
    padding: $button-padding-y-xl $button-padding-x-xl;
    font-size: $button-font-size-xl;
    line-height: 1.5;
    &.m-btn-icon {
      width: 4rem;
      height: 4rem;
      line-height: 4rem;
    }
  }

  &.m-btn-white {
    background: $px-white;
    border-color: $px-white;
    color: $px-dark;
    &:focus,
    &:hover {
      background: transparent;
      color: $px-white;
    }
  }

  &.m-btn-t-white {
    background: transparent;
    border-color: $px-white;
    color: $px-white;
    &:focus,
    &:hover {
      background: $px-white;
      border-color: $px-white;
      color: $px-dark;
    }
  }

  &.m-btn-light {
    background: transparent;
    border-color: rgba(247, 249, 252, 0.25);
    color: $px-white;
    &:focus,
    &:hover {
      background: rgba(247, 249, 252, 0.25);
      color: $px-white;
    }
  }
  &.m-btn-t-gray {
    background: transparent;
    border: 2px solid #e2e8f0;
    color: $px-dark;
    &:focus,
    &:hover {
      background: transparent;
      border-color: $px-theme;
    }
  }
}

.video-btn {
  position: relative;
  width: 80px;
  height: 80px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  @include transition(ease all 0.55s);
  z-index: 1;
  border: none;
  &:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
    pointer-events: none;
    z-index: -1;
  }
  &.white {
    background: $px-white;
    &:after {
      background: $px-white;
    }
    span {
      color: $px-theme;
    }
  }
  &.theme {
    background: $px-theme;
    &:after {
      background: $px-theme;
    }
    span {
      color: $px-white;
    }
  }

  span {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid currentcolor;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px;
    right: 0;
    margin: auto;
    width: 0px;
    height: 0px;
  }
}

@keyframes pulse-border {
  0% {
    @include scale(0.8);
    opacity: 1;
  }
  100% {
    @include scale(2);
    opacity: 0;
  }
}

.p-center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}