////////按钮////////
.d-btn {
  .sys-inline-block();
  padding: @base-padding-vertical @base-padding-horizontal;
  margin-bottom: 0;
  font-size: @base-font-size;
  font-weight: 400;
  line-height: @base-line-height;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-appearance:none; //去除移动端默认的样式
  .sys-user-select(none);
  background-image: none;
  border: 1px solid transparent;
  outline: 0;
  transition: all @sys-duration-sm;
  .sys-border-radius(@sys-radius-sm);
  .d-btn-inner-icon{
    margin-right: 4px;
  }
}

////////扩展////////
// 情景函数
.d-btn-func(@color-bg:#ccc, @color-text:#fff, @color-border:#ccc){
  color:@color-text;
  background-color:@color-bg;
  border-color: @color-border;
  &:hover,&:focus,&:active,&.active {
    color: @color-text;
    background-color: darken(@color-bg, 5%);
  }
  &.d-disabled {
    .sys-disabled();
    &:hover,&:focus,&:active,&.active {
      color: @color-text;
      background-color: @color-bg;
    }
  }
}
// 朴素函数
.d-btn-border-func(@color-border:#666, @color-text:#666, @color-bg:#fff, @color-border-hover:#666, @color-text-hover:#fff, @color-bg-hover:#fff){
  color: @color-text;
  background-color: @color-bg;
  border: 1px solid @color-border;
  &:hover,&:focus,&:active,&.active {
    color: @color-text-hover;
    border-color: @color-border-hover;
    background-color: @color-bg-hover;
  }
  &.d-disabled {
    .sys-disabled();
    &:hover,&:focus,&:active,&.active {
      color: @color-text;
      background-color: @color-bg;
    }
  }
}
// 链接函数
.d-btn-link-func(@color, @color-hover){
  &.d-btn-link {
    color: @color;
    &:hover,&:focus,&:active,&.active {
      color: @color-hover;
      background-color: transparent;
    }
  }
}

////情景////
// 情景按钮
.d-btn-theme {
  .d-btn-func(@color-theme, @sys-color-snow, darken(@color-theme, 5%));
  .d-btn-link-func(@color-theme, darken(@color-theme, 5%));
}
.d-btn-default {
  .d-btn-func(@sys-color-snow, @sys-color-gray, @color-border);
  .d-btn-link-func(@sys-color-gray, darken(@sys-color-gray, 5%));
}
.d-btn-primary {
  .d-btn-func(@sys-color-primary, @sys-color-snow, darken(@sys-color-primary, 5%));
  .d-btn-link-func(@sys-color-primary, darken(@sys-color-primary, 5%));
}
.d-btn-success {
  .d-btn-func(@sys-color-success, @sys-color-snow, darken(@sys-color-success, 5%));
  .d-btn-link-func(@sys-color-success, darken(@sys-color-success, 5%));
}
.d-btn-info {
  .d-btn-func(@sys-color-info, @sys-color-snow, darken(@sys-color-info, 5%));
  .d-btn-link-func(@sys-color-info, darken(@sys-color-info, 5%));
}
.d-btn-warn {
  .d-btn-func(@sys-color-warn, @sys-color-snow, darken(@sys-color-warn, 5%));
  .d-btn-link-func(@sys-color-warn, darken(@sys-color-warn, 5%));
}
.d-btn-danger {
  .d-btn-func(@sys-color-danger, @sys-color-snow, darken(@sys-color-danger, 5%));
  .d-btn-link-func(@sys-color-danger, darken(@sys-color-danger, 5%));
}

// 朴素按钮
.d-btn-plain-theme{
  .d-btn-border-func(lighten(@color-theme, 5%), @color-theme, lighten(@color-theme, 45%), @color-theme, @sys-color-snow, @color-theme);
  .d-btn-link-func(@color-theme, @color-theme);
}
.d-btn-plain-default {
  .d-btn-border-func(@color-border, @sys-color-gray, @sys-color-snow, @color-theme, @color-theme, @sys-color-snow);
  .d-btn-link-func(@sys-color-gray, @color-theme);
}
.d-btn-plain-sign {
  .d-btn-border-func(@color-border, @color-theme, @sys-color-snow, @color-theme, @color-theme, @sys-color-snow);
  .d-btn-link-func(@color-theme, @color-theme);
}
.d-btn-plain-primary {
  .d-btn-border-func(lighten(@sys-color-primary, 15%), @sys-color-primary, lighten(@sys-color-primary, 45%), @sys-color-primary, @sys-color-snow, @sys-color-primary);
  .d-btn-link-func(@sys-color-primary, @sys-color-primary);
}
.d-btn-plain-success {
  .d-btn-border-func(lighten(@sys-color-success, 15%), @sys-color-success, lighten(@sys-color-success, 45%), @sys-color-success, @sys-color-snow, @sys-color-success);
  .d-btn-link-func(@sys-color-success, @sys-color-success);
}
.d-btn-plain-info {
  .d-btn-border-func(lighten(@sys-color-info, 15%), @sys-color-info, lighten(@sys-color-info, 45%), @sys-color-info, @sys-color-snow, @sys-color-info);
  .d-btn-link-func(@sys-color-info, @sys-color-info);
}
.d-btn-plain-warn {
  .d-btn-border-func(lighten(@sys-color-warn, 15%), @sys-color-warn, lighten(@sys-color-warn, 45%), @sys-color-warn, @sys-color-snow, @sys-color-warn);
  .d-btn-link-func(@sys-color-warn, @sys-color-warn);
}
.d-btn-plain-danger {
  .d-btn-border-func(lighten(@sys-color-danger, 15%), @sys-color-danger, lighten(@sys-color-danger, 45%), @sys-color-danger, @sys-color-snow, @sys-color-danger);
  .d-btn-link-func(@sys-color-danger, @sys-color-danger);
}

////尺寸////
.d-btn-xs {
  padding: @sys-padding-vertical-xs @sys-padding-horizontal-xs;
  font-size: @sys-font-size-xs;
}
//.d-btn-sm{
//    padding: @sys-padding-vertical-sm @sys-padding-horizontal-sm;
//    font-size: @sys-font-size-sm;
//}
.d-btn-md {
  padding: @sys-padding-vertical-md @sys-padding-horizontal-md;
  font-size: @sys-font-size-md;
}
.d-btn-lg {
  padding: @sys-padding-vertical-lg @sys-padding-horizontal-lg;
  font-size: @sys-font-size-lg;
}

////正方形////
.d-btn-square-xs {
  @h: @height-xs;
  padding: @sys-padding-vertical-xs;
  width: @h;
  height: @h;
  font-size: @sys-font-size-xs;
}
.d-btn-square-sm {
  @h: @height-sm;
  padding: @sys-padding-vertical-sm;
  width: @h;
  height: @h;
  font-size: @sys-font-size-sm;
}
.d-btn-square-md {
  @h: @height-md;
  padding: @sys-padding-vertical-md;
  width: @h;
  height: @h;
  font-size: @sys-font-size-md;
}
.d-btn-square-lg {
  @h: @height-lg;
  padding: @sys-padding-vertical-lg;
  width: @h;
  height: @h;
  font-size: @sys-font-size-lg;
}

////链接按钮////
.d-btn-link {
  font-weight: 400;
  .sys-border-radius(0);
  background-color: transparent;
  border-color: transparent;
  &:hover,&:focus,&:active,&.active{
    background-color: transparent;
    border-color: transparent;
  }
}

////块状按钮////
.d-btn-block {
  display: block;
  width: 100%;
}

////圆角按钮////
.d-btn-radius {
  border-radius: 100px;
}
.d-btn-circle {
  border-radius: 50%;
}

////Flex按钮////
.d-btn-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

////////兼容设置////////