// scss-lint:disable QualifyingElement

//
// Base styles
//

.#{$btn-prefix-cls} {
  $root:#{&};
  position: relative;
  cursor: pointer;
  display: inline-block;
  font-weight: $font-weight-normal;
  height:$btn-height;
  line-height: $btn-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  border-radius: $border-radius;
  @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;
  }

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

  @include status-disabled;

  //btn-circle
  &-circle{
    border-radius: 100% !important;
    width:$btn-height;
    padding:0 !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-primary-gradient-bg);
}
.#{$btn-prefix-cls}-secondary {
  @include button-outline-variant($btn-secondary-color,$btn-secondary-border);
  background: $btn-secondary-bg;
  //:hover :focus :active .active common width btn-outline-primary
  @include hover {
    color:lighten($btn-outline-primary-color,10%);
    border-color:lighten($btn-outline-primary-border,10%);
  }
  @include focus-active {
    border-color:$btn-outline-primary-border;
    @include box-shadow($btn-secondary-active-box-shadow);
  }

  &:active,
  &.active{
    &:after {
      border: 0 solid $btn-outline-primary-border;
    }
  }
}
.#{$btn-prefix-cls}-info {
  @include button-variant($btn-info-color, $btn-info-bg,$btn-info-gradient-bg);
}
.#{$btn-prefix-cls}-success {
  @include button-variant($btn-success-color, $btn-success-bg,$btn-success-gradient-bg);
}
.#{$btn-prefix-cls}-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg,$btn-warning-gradient-bg);
}
.#{$btn-prefix-cls}-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg,$btn-danger-gradient-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;
  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-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);
}





//
// Link buttons
//

// Make a button look and behave like a link
.#{$btn-prefix-cls}-link {
  font-weight: $font-weight-normal;
  color: $link-color;
  border-radius: 0;

  &,
  &:active,
  &.active,
  &:disabled {
    background-color: transparent;
    @include box-shadow(none);
  }
  &,
  &:focus,
  &:active {
    border-color: transparent;
  }
  @include hover {
    border-color: transparent;
  }
  @include hover-focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
    background-color: transparent;
  }
  &:disabled {
    color: $btn-link-disabled-color;

    @include hover-focus {
      text-decoration: none;
    }
  }
}


//
// 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%;
  }
}

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

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