@import '../palette.less';
// Button base style
.btn() {
  position: relative;
  display: inline-block;
  font-size: @font-size-md;
  font-weight: @font-weight-regular;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  background-image: none;
  border: 1px solid transparent;
  
  user-select: none;
  min-width: @btn-min-width-md;
  .button-size(@btn-padding-md-vertical; @btn-padding-md-horizontal; @font-size-md; @line-height-md; @border-radius-base);


  &:hover{
    outline: none;
    text-decoration: none;
    
    z-index: @btn-hover-zindex;
  }
  &:focus,
  &.focus {
    outline: none;
    text-decoration: none;
    
    z-index: @btn-hover-zindex;
  }
  &:active,
  &.active {
    background-image: none;
    outline: none;
    z-index: @btn-active-zindex;
    
    &:focus,
    &.focus {
      outline: none;
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    .button-color(@btn-default-disabled-color; @btn-default-disabled-bg; @btn-default-disabled-border);
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-default-disabled-color; @btn-default-disabled-bg; @btn-default-disabled-border);
    }
  }

  a& {
    &.disabled,
    fieldset[disabled] & {
      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
  }
  &-xs {
    min-width: @btn-min-width-xs;
    .button-size(@btn-padding-xs-vertical; @btn-padding-xs-horizontal; @font-size-sm; @line-height-sm; @border-radius-base);
  }
  &-sm {
    min-width: @btn-min-width-sm;
    .button-size(@btn-padding-sm-vertical; @btn-padding-sm-horizontal; @font-size-sm; @line-height-sm; @border-radius-base);
  }
  &-lg {
    min-width: @btn-min-width-lg;
    .button-size(@btn-padding-lg-vertical; @btn-padding-lg-horizontal; @font-size-md; @line-height-md; @border-radius-base);
  }
  &-xl {
    min-width: @btn-min-width-xl;
    .button-size(@btn-padding-xl-vertical; @btn-padding-xl-horizontal; @font-size-md; @line-height-md; @border-radius-base);
  }
  &-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    .bui-loading-icon {
      margin-right: 4px;
    }
  }
}
// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
  .@{css-prefix}loading .bui-loading-icon {
    height: @font-size;
    width: @font-size;
  }
}
// Button color
.button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  .@{css-prefix}icon svg, .bui-icon svg {
    fill: @color;
  }
  .@{css-prefix}icon svg {
    .bui-loading-group {
      stroke: @color;
    }
  }
}
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-primary() {
  .button-color(@btn-primary-color; @btn-primary-bg; @btn-primary-border);

  &:active,
  &.active ,
  .open > .dropdown-toggle& {
    &,
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-primary-active-color; @btn-primary-active-bg; @btn-primary-active-border);
    }
  }
  &:hover {
    .button-color(@btn-primary-hover-color; @btn-primary-hover-bg; @btn-primary-hover-border);
  }
  &:focus,
  &.focus{
    .button-color(@btn-primary-focus-color; @btn-primary-focus-bg; @btn-primary-focus-border);
  }
  &.disabled,
  &[disabled],
  &.bui-btn-loading,
  fieldset[disabled]  & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      & when (@theme = dark) {
        opacity: 0.4;
        .button-color(@btn-primary-disabled-color; @btn-primary-disabled-bg; @btn-primary-disabled-border);
      }
      & when not (@theme = dark) {
        .button-color(@btn-primary-disabled-color; @btn-primary-disabled-bg; @btn-primary-disabled-border);
      }
      
    }
  }

}
.button-secondary() {
  .button-color(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border);

  &:active,
  &.active ,
  .open > .dropdown-toggle& {
    &,
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-secondary-active-color; @btn-secondary-active-bg; @btn-secondary-active-border);
    }
  }
  &:hover {
    .button-color(@btn-secondary-hover-color; @btn-secondary-hover-bg; @btn-secondary-hover-border);
  }
  &:focus,
  &.focus{
    .button-color(@btn-secondary-focus-color; @btn-secondary-focus-bg; @btn-secondary-focus-border);
  }
  &.disabled,
  &[disabled],
  &.bui-btn-loading,
  fieldset[disabled]  & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      & when (@theme = dark) {
        opacity: 0.4;
        .button-color(@btn-secondary-disabled-color; @btn-secondary-disabled-bg; @btn-secondary-disabled-border);
      }
      & when not (@theme = dark) {
        .button-color(@btn-secondary-disabled-color; @btn-secondary-disabled-bg; @btn-secondary-disabled-border);
      }
      
    }
  }

}
.button-info() {
  .button-color(@btn-info-color; @btn-info-bg; @btn-info-border);

  &:active,
  &.active ,
  .open > .dropdown-toggle& {
    &,
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-info-active-color; @btn-info-active-bg; @btn-info-active-border);
    }
  }
  &:hover {
    .button-color(@btn-info-hover-color; @btn-info-hover-bg; @btn-info-hover-border);
  }
  &:focus,
  &.focus{
    .button-color(@btn-info-focus-color; @btn-info-focus-bg; @btn-info-focus-border);
  }
  &.disabled,
  &[disabled],
  &.bui-btn-loading,
  fieldset[disabled]  & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      & when (@theme = dark) {
        opacity: 0.4;
        .button-color(@btn-info-disabled-color; @btn-info-disabled-bg; @btn-info-disabled-border);
      }
      & when not (@theme = dark) {
        .button-color(@btn-info-disabled-color; @btn-info-disabled-bg; @btn-info-disabled-border);
      }
      
    }
  }

}
.button-danger() {
  .button-color(@btn-danger-color; @btn-danger-bg; @btn-danger-border);

  &:active,
  &.active ,
  .open > .dropdown-toggle& {
    &,
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-danger-active-color; @btn-danger-active-bg; @btn-danger-active-border);
    }
  }
  &:hover {
    .button-color(@btn-danger-hover-color; @btn-danger-hover-bg; @btn-danger-hover-border);
  }
  &:focus,
  &.focus{
    .button-color(@btn-danger-focus-color; @btn-danger-focus-bg; @btn-danger-focus-border);
  }
  &.disabled,
  &[disabled],
  &.bui-btn-loading,
  fieldset[disabled]  & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      & when (@theme = dark) {
        opacity: 0.4;
        .button-color(@btn-danger-disabled-color; @btn-danger-disabled-bg; @btn-danger-disabled-border);
      }
      & when not (@theme = dark) {
        .button-color(@btn-danger-disabled-color; @btn-danger-disabled-bg; @btn-danger-disabled-border);
      }
      
    }
  }

}
.button-warning() {
  .button-color(@btn-warning-color; @btn-warning-bg; @btn-warning-border);

  &:active,
  &.active ,
  .open > .dropdown-toggle& {
    &,
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-warning-active-color; @btn-warning-active-bg; @btn-warning-active-border);
    }
  }
  &:hover {
    .button-color(@btn-warning-hover-color; @btn-warning-hover-bg; @btn-warning-hover-border);
  }
  &:focus,
  &.focus{
    .button-color(@btn-warning-focus-color; @btn-warning-focus-bg; @btn-warning-focus-border);
  }
  &.disabled,
  &[disabled],
  &.bui-btn-loading,
  fieldset[disabled]  & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      & when (@theme = dark) {
        opacity: 0.4;
        .button-color(@btn-warning-disabled-color; @btn-warning-disabled-bg; @btn-warning-disabled-border);
      }
      & when not (@theme = dark) {
        .button-color(@btn-warning-disabled-color; @btn-warning-disabled-bg; @btn-warning-disabled-border);
      }
      
    }
  }

}
.button-success() {
  .button-color(@btn-success-color; @btn-success-bg; @btn-success-border);

  &:active,
  &.active ,
  .open > .dropdown-toggle& {
    &,
    &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-success-active-color; @btn-success-active-bg; @btn-success-active-border);
    }
  }
  &:hover {
    .button-color(@btn-success-hover-color; @btn-success-hover-bg; @btn-success-hover-border);
  }
  &:focus,
  &.focus{
    .button-color(@btn-success-focus-color; @btn-success-focus-bg; @btn-success-focus-border);
  }
  &.disabled,
  &[disabled],
  &.bui-btn-loading,
  fieldset[disabled]  & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      & when (@theme = dark) {
        opacity: 0.4;
        .button-color(@btn-success-disabled-color; @btn-success-disabled-bg; @btn-success-disabled-border);
      }
      & when not (@theme = dark) {
        .button-color(@btn-success-disabled-color; @btn-success-disabled-bg; @btn-success-disabled-border);
      }
      
    }
  }

}




.btn-plain-primary() {
  .button-color(@btn-primary-plain-color; @btn-primary-plain-bg; @btn-primary-plain-border);
  &:focus,
  &.focus,
  &.active,
  .open > .dropdown-toggle& {
    &,
    &:hover{
      .button-color(@btn-primary-plain-focus-color; @btn-primary-plain-focus-bg; @btn-primary-plain-focus-border);
      
    }
  }
  &:hover {
    .button-color(@btn-primary-plain-hover-color; @btn-primary-plain-hover-bg; @btn-primary-plain-hover-border);
  }
  &:active {
  &,  
  &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-primary-plain-active-color; @btn-primary-plain-active-bg; @btn-primary-plain-active-border);
    }
  }
  &.bui-btn-loading,
  &.disabled,
  &[disabled]{
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      .button-color(@btn-primary-plain-disabled-color; @btn-primary-plain-disabled-bg; @btn-primary-plain-disabled-border);
    }
    &.active {
      &,
      &:hover,
      &:focus,
      &:active,
      &.focus {
        & when (@theme = dark) {
          opacity: 0.4;
          .button-color(@btn-primary-plain-active-disabled-color; @btn-primary-plain-active-disabled-bg; @btn-primary-plain-active-disabled-border);
        }
        & when not (@theme = dark) {
          
          .button-color(@btn-primary-plain-active-disabled-color; @btn-primary-plain-active-disabled-bg; @btn-primary-plain-active-disabled-border);
        }
      }
    }
  }
}
.btn-plain-secondary() {
  .button-color(@btn-secondary-plain-color; @btn-secondary-plain-bg; @btn-secondary-plain-border);
  &:focus,
  &.focus,
  &.active,
  .open > .dropdown-toggle& {
    &,
    &:hover{
      .button-color(@btn-secondary-plain-focus-color; @btn-secondary-plain-focus-bg; @btn-secondary-plain-focus-border);
      
    }
  }
  &:hover {
    .button-color(@btn-secondary-plain-hover-color; @btn-secondary-plain-hover-bg; @btn-secondary-plain-hover-border);
  }
  &:active {
  &,  
  &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-secondary-plain-active-color; @btn-secondary-plain-active-bg; @btn-secondary-plain-active-border);
    }
  }
  &.bui-btn-loading,
  &.disabled,
  &[disabled]{
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      .button-color(@btn-secondary-plain-disabled-color; @btn-secondary-plain-disabled-bg; @btn-secondary-plain-disabled-border);
    }
    &.active {
      &,
      &:hover,
      &:focus,
      &:active,
      &.focus {
        & when (@theme = dark) {
          opacity: 0.4;
          .button-color(@btn-secondary-plain-active-disabled-color; @btn-secondary-plain-active-disabled-bg; @btn-secondary-plain-active-disabled-border);
        }
        & when not (@theme = dark) {
          
          .button-color(@btn-secondary-plain-active-disabled-color; @btn-secondary-plain-active-disabled-bg; @btn-secondary-plain-active-disabled-border);
        }
      }
    }
  }
}
.btn-plain-info() {
  .button-color(@btn-info-plain-color; @btn-info-plain-bg; @btn-info-plain-border);
  &:focus,
  &.focus,
  &.active,
  .open > .dropdown-toggle& {
    &,
    &:hover{
      .button-color(@btn-info-plain-focus-color; @btn-info-plain-focus-bg; @btn-info-plain-focus-border);
      
    }
  }
  &:hover {
    .button-color(@btn-info-plain-hover-color; @btn-info-plain-hover-bg; @btn-info-plain-hover-border);
  }
  &:active {
  &,  
  &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-info-plain-active-color; @btn-info-plain-active-bg; @btn-info-plain-active-border);
    }
  }
  &.bui-btn-loading,
  &.disabled,
  &[disabled]{
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      .button-color(@btn-info-plain-disabled-color; @btn-info-plain-disabled-bg; @btn-info-plain-disabled-border);
    }
    &.active {
      &,
      &:hover,
      &:focus,
      &:active,
      &.focus {
        & when (@theme = dark) {
          opacity: 0.4;
          .button-color(@btn-info-plain-active-disabled-color; @btn-info-plain-active-disabled-bg; @btn-info-plain-active-disabled-border);
        }
        & when not (@theme = dark) {
          
          .button-color(@btn-info-plain-active-disabled-color; @btn-info-plain-active-disabled-bg; @btn-info-plain-active-disabled-border);
        }
      }
    }
  }
}
.btn-plain-danger() {
  .button-color(@btn-danger-plain-color; @btn-danger-plain-bg; @btn-danger-plain-border);
  &:focus,
  &.focus,
  &.active,
  .open > .dropdown-toggle& {
    &,
    &:hover{
      .button-color(@btn-danger-plain-focus-color; @btn-danger-plain-focus-bg; @btn-danger-plain-focus-border);
      
    }
  }
  &:hover {
    .button-color(@btn-danger-plain-hover-color; @btn-danger-plain-hover-bg; @btn-danger-plain-hover-border);
  }
  &:active {
  &,  
  &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-danger-plain-active-color; @btn-danger-plain-active-bg; @btn-danger-plain-active-border);
    }
  }
  &.bui-btn-loading,
  &.disabled,
  &[disabled]{
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      .button-color(@btn-danger-plain-disabled-color; @btn-danger-plain-disabled-bg; @btn-danger-plain-disabled-border);
    }
    &.active {
      &,
      &:hover,
      &:focus,
      &:active,
      &.focus {
        & when (@theme = dark) {
          opacity: 0.4;
          .button-color(@btn-danger-plain-active-disabled-color; @btn-danger-plain-active-disabled-bg; @btn-danger-plain-active-disabled-border);
        }
        & when not (@theme = dark) {
          
          .button-color(@btn-danger-plain-active-disabled-color; @btn-danger-plain-active-disabled-bg; @btn-danger-plain-active-disabled-border);
        }
      }
    }
  }
}
.btn-plain-success() {
  .button-color(@btn-success-plain-color; @btn-success-plain-bg; @btn-success-plain-border);
  &:focus,
  &.focus,
  &.active,
  .open > .dropdown-toggle& {
    &,
    &:hover{
      .button-color(@btn-success-plain-focus-color; @btn-success-plain-focus-bg; @btn-success-plain-focus-border);
      
    }
  }
  &:hover {
    .button-color(@btn-success-plain-hover-color; @btn-success-plain-hover-bg; @btn-success-plain-hover-border);
  }
  &:active {
  &,  
  &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-success-plain-active-color; @btn-success-plain-active-bg; @btn-success-plain-active-border);
    }
  }
  &.bui-btn-loading,
  &.disabled,
  &[disabled]{
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      .button-color(@btn-success-plain-disabled-color; @btn-success-plain-disabled-bg; @btn-success-plain-disabled-border);
    }
    &.active {
      &,
      &:hover,
      &:focus,
      &:active,
      &.focus {
        & when (@theme = dark) {
          opacity: 0.4;
          .button-color(@btn-success-plain-active-disabled-color; @btn-success-plain-active-disabled-bg; @btn-success-plain-active-disabled-border);
        }
        & when not (@theme = dark) {
          
          .button-color(@btn-success-plain-active-disabled-color; @btn-success-plain-active-disabled-bg; @btn-success-plain-active-disabled-border);
        }
      }
    }
  }
}
.btn-plain-warning() {
  .button-color(@btn-warning-plain-color; @btn-warning-plain-bg; @btn-warning-plain-border);
  &:focus,
  &.focus,
  &.active,
  .open > .dropdown-toggle& {
    &,
    &:hover{
      .button-color(@btn-warning-plain-focus-color; @btn-warning-plain-focus-bg; @btn-warning-plain-focus-border);
      
    }
  }
  &:hover {
    .button-color(@btn-warning-plain-hover-color; @btn-warning-plain-hover-bg; @btn-warning-plain-hover-border);
  }
  &:active {
  &,  
  &:hover,
    &:focus,
    &.focus {
      .button-color(@btn-warning-plain-active-color; @btn-warning-plain-active-bg; @btn-warning-plain-active-border);
    }
  }
  &.bui-btn-loading,
  &.disabled,
  &[disabled]{
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      .button-color(@btn-warning-plain-disabled-color; @btn-warning-plain-disabled-bg; @btn-warning-plain-disabled-border);
    }
    &.active {
      &,
      &:hover,
      &:focus,
      &:active,
      &.focus {
        & when (@theme = dark) {
          opacity: 0.4;
          .button-color(@btn-warning-plain-active-disabled-color; @btn-warning-plain-active-disabled-bg; @btn-warning-plain-active-disabled-border);
        }
        & when not (@theme = dark) {
          
          .button-color(@btn-warning-plain-active-disabled-color; @btn-warning-plain-active-disabled-bg; @btn-warning-plain-active-disabled-border);
        }
      }
    }
  }
}