// scss-lint:disable QualifyingElement

//
// Base styles
//

.#{$btn-prefix-cls} {
  @include button-size($btn-height, $btn-padding-x, $btn-font-size, $btn-icon-font-size);
  @include transition($btn-transition);


  // Share hover and focus styles
  @include hover-focus {
    text-decoration: none;
  }

  // Share focus and active styles
  @include focus-active {
    outline: 0;
  }

  @include status-disabled {
    color: $gray-light-25;
    border-color: $gray-light-9;
    background-color: $gray-light-4;
  }

  $root: #{&};
  position: relative;
  display: inline-block;
  height: $btn-height;
  font-weight: $font-weight-normal;
  line-height: $btn-height - 2px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  border-radius: $border-radius;

  //click waves animation
  &.active {
    &:after {
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      display: block;
      content: "";
      border: 0 solid transparent;
      border-radius: inherit;
      opacity: .4;
      animation: buttonEffect .4s;
    }
  }

  //btn-circle
  &-circle {
    width: $btn-height;
    padding: 0 !important;
    border-radius: 100% !important;

    &#{$root}-sm {
      width: $btn-sm-height;
    }

    &#{$root}-lg {
      width: $btn-lg-height;
    }
  }

  //btn-round
  &-round {
    border-radius: $btn-height;

    &#{$root}-sm {
      border-radius: $btn-sm-height;
    }

    &#{$root}-lg {
      border-radius: $btn-lg-height;
    }
  }
}

// Future-proof disabling of clicks on `<a>` elements
a.#{$btn-prefix-cls}.disabled,
fieldset[disabled] a.#{$btn-prefix-cls} {
  pointer-events: none;
}


//
// Alternate buttons
//

.#{$btn-prefix-cls}-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg);
}

.#{$btn-prefix-cls}-secondary {
  @include button-outline-variant($btn-secondary-color, $btn-secondary-border);
  //:hover :focus :active .active common width btn-outline-primary
  @include hover-focus {
    color: mix($btn-outline-primary-color, rgb(255, 255, 255), 85);
    border-color: mix($btn-outline-primary-border, rgb(255, 255, 255), 85);
  }
  background: $btn-secondary-bg;

  &:active,
  &.active {
    color: mix($btn-outline-primary-color, rgb(0, 0, 0), 85);
    border-color: mix($btn-outline-primary-color, rgb(0, 0, 0), 85);
    &::after {
      border: 0 solid $btn-outline-primary-border;
    }
  }
}

.#{$btn-prefix-cls}-info {
  @include button-variant($btn-info-color, $btn-info-bg);
}

.#{$btn-prefix-cls}-success {
  @include button-variant($btn-success-color, $btn-success-bg);
}

.#{$btn-prefix-cls}-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg);
}

.#{$btn-prefix-cls}-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg);
}


//
// outline buttons
//
.#{$btn-prefix-cls}-outline-primary {
  @include button-outline-variant($btn-outline-primary-color, $btn-outline-primary-border);
}

//has common styles width btn-secondary except background
.#{$btn-prefix-cls}-outline-secondary {
  @extend .#{$btn-prefix-cls}-secondary;
  color: #fff;
  border-color: #fff;
  background: transparent;
}

//has common styles width btn-outline-primary except initial state
.#{$btn-prefix-cls}-outline-white {
  @extend .#{$btn-prefix-cls}-outline-primary;
  color: $btn-outline-white-color;
  border-color: $btn-outline-white-border;
}

.#{$btn-prefix-cls}-outline-normal {
  @include button-outline-variant($btn-outline-normal-color, $btn-outline-normal-border);
}

.#{$btn-prefix-cls}-outline-info {
  @include button-outline-variant($btn-outline-info-color, $btn-outline-info-border);
}

.#{$btn-prefix-cls}-outline-success {
  @include button-outline-variant($btn-outline-success-color, $btn-outline-success-border);
}

.#{$btn-prefix-cls}-outline-warning {
  @include button-outline-variant($btn-outline-warning-color, $btn-outline-warning-border);
}

.#{$btn-prefix-cls}-outline-danger {
  @include button-outline-variant($btn-outline-danger-color, $btn-outline-danger-border);
}

// Dotted buttons
.#{$btn-prefix-cls}-dashed-primary {
  @include button-outline-variant($btn-outline-primary-color, $btn-outline-primary-border);
  border-style: dashed;
}
.#{$btn-prefix-cls}-dashed-secondary {
  @extend .#{$btn-prefix-cls}-secondary;
  background: transparent;
  border-style: dashed;
}
.#{$btn-prefix-cls}-dashed-info {
  @include button-outline-variant($btn-outline-info-color, $btn-outline-info-border);
  border-style: dashed;
}
.#{$btn-prefix-cls}-dashed-success {
  @include button-outline-variant($btn-outline-success-color, $btn-outline-success-border);
  border-style: dashed;
}
.#{$btn-prefix-cls}-dashed-warning {
  @include button-outline-variant($btn-outline-warning-color, $btn-outline-warning-border);
  border-style: dashed;
}
.#{$btn-prefix-cls}-dashed-danger {
  @include button-outline-variant($btn-outline-danger-color, $btn-outline-danger-border);
  border-style: dashed;
}


//
// Link buttons
//

// Make a button look and behave like a link
.#{$btn-prefix-cls}-link {
  @include hover {
    border-color: transparent;
  }
  @include hover-focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
    background-color: transparent;
  }
  font-weight: $font-weight-normal;
  color: $link-color;
  border-radius: 0;

  &,
  &:active,
  &.active,
  &:disabled {
    @include box-shadow(none);
    background-color: transparent;
  }

  &,
  &:focus,
  &:active {
    border-color: transparent;
  }

  &:disabled {
    @include hover-focus {
      text-decoration: none;
    }
    color: $btn-link-disabled-color;
  }
}


//
// Button Sizes
//

.#{$btn-prefix-cls}-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($btn-lg-height, $btn-lg-padding-x, $btn-lg-font-size, $btn-lg-icon-font-size);
}

.#{$btn-prefix-cls}-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($btn-sm-height, $btn-sm-padding-x, $btn-sm-font-size, $btn-sm-icon-font-size);
}

//line-height Take off border-width
.#{$btn-prefix-cls}-secondary,
.#{$btn-prefix-cls}-outline-secondary,
.#{$btn-prefix-cls}-outline-danger,
.#{$btn-prefix-cls}-outline-primary,
.#{$btn-prefix-cls}-outline-info,
.#{$btn-prefix-cls}-outline-success,
.#{$btn-prefix-cls}-outline-warning {
  line-height: $btn-height - $input-btn-border-width * 2;

  &.#{$btn-prefix-cls}-sm {
    line-height: $btn-sm-height - $input-btn-border-width * 2;
  }

  &.#{$btn-prefix-cls}-lg {
    line-height: $btn-lg-height - $input-btn-border-width * 2;
  }
}


//
// Block button
//

.#{$btn-prefix-cls}-block {
  display: block;
  width: 100%;
}

// Vertically space out multiple block buttons
.#{$btn-prefix-cls}-block + .#{$btn-prefix-cls}-block {
  margin-top: $btn-block-margin-y;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.#{$btn-prefix-cls}-block {
    width: 100%;
  }
}

// Only has icon
.#{$btn-prefix-cls}-icon-only-sm {
  padding: 0 4px;
}
.#{$btn-prefix-cls}-icon-only {
  padding: 0 6px;
}
.#{$btn-prefix-cls}-icon-only-lg {
  padding: 0 8px;
}

//.btn-group{
//  & >.btn-secondary.checked {
//    @extend .bg-primary;
//    @extend .text-white;
//  }
//}

@keyframes buttonEffect {
  to {
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    border-width: 6px;
    opacity: 0;
  }
}