//
// components.scss
//

.btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: $font-weight-medium;
  transition: all 0.5s;
  border: 1px solid $dark;
  overflow: hidden;
  position: relative;
  &:focus {
    box-shadow: none;
  }
  &:after {
    background: rgba($white, 0.25);
    content: "";
    height: 155px;
    left: -75px;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 0.9s ease;
    width: 50px;
    z-index: 1;
  }
  &:hover {
    &:after {
      left: 110%;
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    background: #{$value};
    border-color: #{$value} !important;
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus,
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled):active:focus,
    .open > .dropdown-toggle.btn-primary {
      background: darken($value, 4%);
      border-color: darken($value, 4%);
      box-shadow: 0px 8px 20px -6px rgba($value, 0.6);
      transform: translateY(-6px);
    }
  }
  .btn-outline-#{$color} {
    color: #{$value};
    border-color: #{$value};
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus,
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled):active:focus,
    .open > .dropdown-toggle.btn-primary {
      background: $value;
      border-color: $value;
      box-shadow: 0px 8px 20px -6px rgba($value, 0.6);
      transform: translateY(-6px);
    }
  }
}

.btn {
  &.btn-outline-white,
  &.btn-outline-light {
    &:focus,
    &:active,
    &:hover,
    &.active {
      color: $dark;
    }
  }
  &.btn-outline-primary,
  &.btn-outline-dark,
  &.btn-outline-success {
    &:focus,
    &:active,
    &:hover,
    &.active {
      color: $white !important;
    }
  }
}