// scss-lint:disable QualifyingElement
//
// Base styles
//
.#{$btn-prefix-cls} {
    $root:#{&};
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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;

    i + span {
      margin-left: 4px;
    }
    //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}-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-hover-color,$btn-outline-primary-border,$btn-outline-primary-hover-border);
  }
  //has common styles width btn-secondary except background
  .#{$btn-prefix-cls}-outline-secondary {
    @include button-outline-variant($btn-secondary-color,$btn-outline-primary-hover-color,$btn-secondary-border,$btn-outline-primary-hover-border);
  }
  //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-hover-color,$btn-outline-info-border,$btn-outline-info-hover-border);
  }
  .#{$btn-prefix-cls}-outline-success {
    @include button-outline-variant($btn-outline-success-color,$btn-outline-success-hover-color,$btn-outline-success-border,$btn-outline-success-hover-border);
  }
  .#{$btn-prefix-cls}-outline-warning {
    @include button-outline-variant($btn-outline-warning-color,$btn-outline-warning-hover-color,$btn-outline-warning-border,$btn-outline-warning-hover-border);
  }
  .#{$btn-prefix-cls}-outline-danger {
    @include button-outline-variant($btn-outline-danger-color,$btn-outline-danger-hover-color,$btn-outline-danger-border,$btn-outline-danger-hover-border);
  }

  //
  // secondary buttons
  //
  .#{$btn-prefix-cls}-secondary {
    @include button-outline-variant($btn-secondary-color,$btn-outline-primary-hover-color,$btn-secondary-border,$btn-outline-primary-hover-border);
  }
  .#{$btn-prefix-cls}-secondary-primary {
    @include button-outline-variant($btn-outline-primary-color,$btn-outline-primary-hover-color,$btn-outline-primary-border,$btn-outline-primary-hover-border);
  }
  .#{$btn-prefix-cls}-secondary-info {
    @include button-outline-variant($btn-outline-info-color,$btn-outline-info-hover-color,$btn-outline-info-border,$btn-outline-info-hover-border);
  }
  .#{$btn-prefix-cls}-secondary-success {
    @include button-outline-variant($btn-outline-success-color,$btn-outline-success-hover-color,$btn-outline-success-border,$btn-outline-success-hover-border);
  }
  .#{$btn-prefix-cls}-secondary-warning {
    @include button-outline-variant($btn-outline-warning-color,$btn-outline-warning-hover-color,$btn-outline-warning-border,$btn-outline-warning-hover-border);
  }
  .#{$btn-prefix-cls}-secondary-danger {
    @include button-outline-variant($btn-outline-danger-color,$btn-outline-danger-hover-color,$btn-outline-danger-border,$btn-outline-danger-hover-border);
  }
  .#{$btn-prefix-cls}-secondary,
  .#{$btn-prefix-cls}-secondary-primary,
  .#{$btn-prefix-cls}-secondary-info,
  .#{$btn-prefix-cls}-secondary-success,
  .#{$btn-prefix-cls}-secondary-warning,
  .#{$btn-prefix-cls}-secondary-danger {
    background: $btn-secondary-bg;
  }
  //
  // Link buttons
  //
  // Make a button look and behave like a link
  .#{$btn-prefix-cls}-link {
    color: $link-color;
    @include hover-focus {
      color: $link-hover-color;
      text-decoration: $link-hover-decoration;
    }
    @include status-disabled {
      color: $btn-link-disabled-color;
      @include hover-focus {
        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%;
    }
  }
  //.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
    }
  }