@charset "UTF-8";
@import "common/var";
@import "mixins/button";
@import "mixins/mixins";
@import "mixins/utils";

$focus: focus-visible;
// 次要按钮 - 默认按钮
@include b(button) {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  background: $--button-default-fill;
  border: $--border-base;
  border-color: $--button-default-border;
  color: $--button-default-color;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  i {
    font-size: $--button-medium-line-height; // 自定义的icon大小得跟行高一致
  }
  &:not(.el-dropdown__caret-button) {
    i:last-child.el-ksd-icon-arrow_down_22 {
      position: relative;
      right: -5px;
      margin-left: -5px;
    }
  }
  &.is-icon-button .el-ksd-icon-arrow_down_22 {
    right: 0 !important;
    margin-left: 0 !important;
  }
  span {
    vertical-align: middle;
    line-height: $--button-medium-line-height;
  }
  &.is-text-nobg {
    background-color: transparent !important;
    border: none !important;
    padding: 0px;
    color: $--link-color;
    &:not(.is-disabled):hover,
    &:not(.is-disabled):#{$focus} {
      color: $--link-hover-color;
    }
    &:not(.is-disabled):active {
      color: $--link-active-color;
    }
    &.is-disabled {
      background-color: transparent;
      border: none;
      color: $--link-color;
    }
  }
  @include utils-user-select(none);
  & + .el-button {
    margin-left: 8px;
  }

  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius, $--button-medium-line-height, $--button-medium-icon-padding, $--button-medium-icon-mini-padding);

  &:hover,
  &:not(.is-disabled):#{$focus} {
    color: $--button-default-hover-color;
    border-color: $--button-default-hover-fill;
    background-color: $--button-default-hover-fill;
  }

  // &:not(.is-disabled):#{$focus} {
  //   color: $--button-default-color;
  //   border-color: $--button-default-border;
  //   background-color: $--button-default-fill;
  //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
  // }

  &:not(.is-disabled):active {
    color: $--button-default-active-color;
    border-color: $--button-default-active-border;
    background-color: $--button-default-active-fill;
    outline: none;
    box-shadow: none;
  }

  &.is-disabled {
    &,
    &:hover,
    &:active {
      opacity: 0.3;
      background: $--button-default-fill;
      border: $--border-base;
      border-color: $--button-default-border;
      box-shadow: none;
    }
  }

  &::-moz-focus-inner {
    border: 0;
  }

  & [class*="el-icon-"], & [class*="el-ksd-icon"] {
    & + span {
      margin-left: 3px;
    }
  }
  // 次要按钮 active 时
  @include when(active) {
    color: $--color-primary-active;
    border-color: $--color-primary-active;
    box-shadow: none;
  }
  // 基于次要按钮的样式上进行覆写，生成次次要按钮
  @include when(plain) {
    background-color: $--button-default-plain-fill;
    border-color: $--button-default-plain-border;
    color: $--button-default-plain-color;
    &:not(.is-disabled):hover,
    &:not(.is-disabled):#{$focus} {
      background: $--button-default-plain-fill;
      border-color: $--color-secondary-active;
      color: $--button-default-plain-color;
    }

    // &:not(.is-disabled):#{$focus} {
    //   color: $--button-default-color;
    //   border-color: $--button-default-active-border;
    //   background-color: $--button-default-fill;
    //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
    // }

    &:not(.is-disabled):active {
      background: $--button-default-plain-fill;
      border-color: $--button-default-plain-active-border;
      color: $--button-default-plain-color;
      outline: none;
      box-shadow: none;
    }
    &.is-disabled {
      &,
      &:hover,
      &:active {
        opacity: 0.3;
        background-color: $--button-default-plain-fill;
        border-color: $--button-default-plain-border;
        color: $--button-default-plain-color;
        box-shadow: none;
      }
    }
  }
  
  // 按钮 disabled 时，所有disable 状态都是用的一类效果
  @include when(disabled) {
    cursor: not-allowed;
  }

  // 次要按钮 有 loading 时
  @include when(loading) {
    position: relative;
    pointer-events: none;

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255,255,255,.35);
    }
  }
  @include when(round) {
    border-radius: 20px;
    padding: 10px 15px;
  }
  @include when(circle) {
    border-radius: 50%;
    padding: $--button-padding-vertical;
    line-height: 1;
  }
  // 基于默认按钮覆写样式，生成主要按钮
  @include m(primary) {
    // @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
    color: $--button-primary-color;
    background-color: $--button-primary-fill;
    border-color: $--button-primary-border;
    &:not(.is-disabled):hover,
    &:not(.is-disabled):#{$focus} {
      background: $--color-primary-hover;
      border-color: $--color-primary-hover;
      color: $--button-primary-color;
    }

    // &:not(.is-disabled):#{$focus} {
    //   background-color: $--button-primary-fill;
    //   border-color: $--button-primary-border;
    //   color: $--button-primary-color;
    //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
    // }

    &:not(.is-disabled):active {
      background: $--color-primary-active;
      border-color: $--color-primary-active;
      color: $--button-primary-color;
      outline: none;
      box-shadow: none;
    }
  
    &.is-active {
      background: $--color-primary-active;
      border-color: $--color-primary-active;
      color: $--button-primary-color;
    }

    &.is-disabled {
      &,
      &:hover,
      &:active {
        opacity: 0.3;
        color: $--button-primary-color;
        background-color: $--button-primary-fill;
        border-color: $--button-primary-border;
        box-shadow: none;
      }
    }

    &.is-text {
      border-color: transparent;
      color: $--color-text-regular;
      background: transparent;
      & + .el-button {
        margin-left: 2px;
      }

      &:hover,
      &:#{$focus} {
        color: $--color-text-regular;
        border-color: $--background-color-hover;
        background-color: $--background-color-hover;
      }
      // &:#{$focus} {
      //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
      // }
      &:active {
        color: $--color-text-regular;
        border-color: $--color-secondary-active;
        background-color: $--color-secondary-active;
        box-shadow: none;
      }

      &.is-disabled,
      &.is-disabled:hover,
      &.is-disabled:#{$focus} {
        border-color: transparent;
        background-color: transparent;
      }
    }
  }
  // 基于默认按钮覆写样式，生成对应状态按钮
  @include m(success) {
    @include button-variant($--button-success-color, $--button-success-fill, $--button-success-border);
  }
  @include m(warning) {
    @include button-variant($--button-warning-color, $--button-warning-fill, $--button-warning-border);
  }
  @include m(danger) {
    // @include button-variant($--button-danger-color, $--button-danger-fill, $--button-danger-border);
    color: $--button-primary-color;
    background-color: $--button-danger-fill;
    border-color: $--button-danger-border;
    &:not(.is-disabled):hover,
    &:not(.is-disabled):#{$focus} {
      background: $--button-danger-hover-fill;
      border-color: $--button-danger-hover-border;
      color: $--button-primary-color;
    }
    
    // &:not(.is-disabled):#{$focus} {
    //   color: $--button-primary-color;
    //   background-color: $--button-danger-fill;
    //   border-color: $--button-danger-border;
    //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
    // }

    &:not(.is-disabled):active {
      background: $--button-danger-active-fill;
      border-color: $--button-danger-active-border;
      color: $--button-primary-color;
      outline: none;
      box-shadow: none;
    }
  
    &.is-active {
      background: $--button-danger-active-fill;
      border-color: $--button-danger-active-border;
      color: $--button-primary-color;
      box-shadow: none;
    }

    &.is-disabled {
      &,
      &:hover,
      &:active {
        opacity: 0.3;
        background: $--button-danger-active-fill;
        border-color: $--button-danger-active-border;
        color: $--button-primary-color;
        box-shadow: none;
      }
    }

    &.is-text {
      border-color: transparent;
      color: $--button-danger-fill;
      background: transparent;

      &:hover,
      &:#{$focus} {
        color: $--button-danger-fill;
        border-color: $--background-color-hover;
        background-color: $--background-color-hover;
      }
      // &:#{$focus} {
      //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
      // }
      &:active {
        color: $--color-text-regular;
        border-color: $--color-secondary-active;
        background-color: $--color-secondary-active;
        box-shadow: none;
      }

      &.is-disabled,
      &.is-disabled:hover,
      &.is-disabled:#{$focus} {
        border-color: transparent;
      }
    }
  }
  @include m(info) {
    @include button-variant($--button-info-color, $--button-info-fill, $--button-info-border);
  }
  @include m(big) {
    @include button-size($--button-big-padding-vertical, $--button-big-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius, $--button-medium-line-height, $--button-big-icon-padding, $--button-big-icon-mini-padding);
    i {
      &:last-child.el-ksd-icon-arrow_down_22 {
        position: relative;
        right: -6px;
        margin-left: -6px;
      }
    }
    .button-text {
      display: inline-block;
      min-width: 42px;
    }
  }
  @include m(medium) {
    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius, $--button-medium-line-height, $--button-medium-icon-padding, $--button-medium-icon-mini-padding);
    & [class*="el-icon-"], & [class*="el-ksd-icon"], & [class*="el-ksd-n-icon"] {
      & + span {
        margin-left: 2px;
      }
    }
    &:not(.el-dropdown__caret-button) {
      i:last-child.el-ksd-icon-arrow_down_22 {
        position: relative;
        right: -5px;
        margin-left: -5px;
      }
    }
    .button-text {
      display: inline-block;
      min-width: 38px;
    }
  }
  @include m(small) {
    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius, $--button-small-line-height, $--button-small-icon-padding, $--button-small-icon-mini-padding);
    i {
      font-size: $--button-small-line-height; // 自定义的icon大小得跟行高一致
    }
    &:not(.el-dropdown__caret-button) {
      i:last-child.el-ksd-icon-arrow_down_22 {
        position: relative;
        right: -4px;
        margin-left: -4px;
      }
    }
    span {
      line-height: $--button-mini-line-height;
    }
    & [class*="el-icon-"], & [class*="el-ksd-icon"], & [class*="el-ksd-n-icon"] {
      & + span {
        margin-left: 2px;
      }
    }
    .button-text {
      display: inline-block;
      min-width: 34px;
    }
  }
  @include m(mini) {
    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius, $--button-mini-line-height, $--button-mini-icon-padding, $--button-mini-icon-mini-padding);
    i {
      font-size: $--button-mini-line-height; // 自定义的icon大小得跟行高一致
    }
    &:not(.el-dropdown__caret-button) {
      i:last-child.el-ksd-icon-arrow_down_22 {
        position: relative;
        right: -2px;
        margin-left: -2px;
      }
    }
    span {
      line-height: $--button-small-line-height;
    }
    & [class*="el-icon-"], & [class*="el-ksd-icon"], & [class*="el-ksd-n-icon"] {
      & + span {
        margin-left: 1px;
      }
    }
  }
  @include m(text) {
    border-color: transparent;
    color: $--color-text-regular;
    background: transparent;
    padding-left: 0;
    padding-right: 0;

    &:hover,
    &:#{$focus} {
      color: $--color-text-regular;
      border-color: $--background-color-hover;
      background-color: $--background-color-hover;
    }
    // &:#{$focus} {
    //   box-shadow: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px rgba(8, 121, 253, 0.64);
    // }
    &:active {
      color: $--color-text-regular;
      border-color: $--color-secondary-active;
      background-color: $--color-secondary-active;
      box-shadow: none;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:#{$focus} {
      border-color: transparent;
    }
  }
}

@include b(button-group) {
  @include utils-clearfix;
  display: inline-block;
  vertical-align: middle;

  & .el-button {
    float: left;
    position: relative;
    & + .el-button {
      margin-left: 0;
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right-color: rgba($--color-white, 0.5);
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left-color: rgba($--color-white, 0.5);
    }
    &:first-child:last-child {
      border-top-right-radius: $--button-border-radius;
      border-bottom-right-radius: $--button-border-radius;
      border-top-left-radius: $--button-border-radius;
      border-bottom-left-radius: $--button-border-radius;
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
      border-left-color: rgba($--color-white, 0.5);
      border-right-color: rgba($--color-white, 0.5);
      &.is-disabled{
        border-left-color: $--color-white;
        border-right-color: $--color-white;
      }
    }
    &:not(:last-child) {
      margin-right: -1px;
    }

    &:not(.is-disabled) {
      z-index: 1;
      &:hover,
      &:#{$focus},
      &:active {
        z-index: 2;
      }
      &:active {
        box-shadow: none;
      }
    }

    @include when(active) {
      z-index: 1;
      box-shadow: none;
    }

    @include when(plain) {
      &:first-child {
        border-right-color: $--button-default-plain-border;
        &.is-disabled{
          border-right-color: $--button-disabled-border;
        }
      }
      &:last-child {
        border-left-color: $--button-default-plain-border;
        &.is-disabled{
          border-left-color: $--button-disabled-border;
        }
      }
      &:not(:first-child):not(:last-child) {
        border-left-color: $--button-default-plain-border;
        border-right-color: $--button-default-plain-border;
        &.is-disabled{
          border-left-color: rgba($--button-default-plain-border, 0.3);
          border-right-color: rgba($--button-default-plain-border, 0.3);
        }
      }
    }
  }

  @each $type in (primary, success, warning, danger, info) {
    .el-button--#{$type} {
      &:first-child {
        border-right-color: rgba($--color-white, 0.5);
        &.is-disabled{
          border-right-color: $--button-disabled-border;
        }
      }
      &:last-child {
        border-left-color: rgba($--color-white, 0.5);
        &.is-disabled{
          border-left-color: $--button-disabled-border;
        }
      }
      &:not(:first-child):not(:last-child) {
        border-left-color: rgba($--color-white, 0.5);
        border-right-color: rgba($--color-white, 0.5);
        &.is-disabled{
          border-left-color: $--button-disabled-border;
          border-right-color: $--button-disabled-border;
        }
      }
      /* 次要按钮的时候，样式不同 */
      &.is-plain{
        &:first-child {
          border-right-color: $--color-secondary-hover;
          &.is-disabled{
            border-right-color: $--button-disabled-border;
          }
        }
        &:last-child {
          border-left-color: $--color-secondary-hover;
          &.is-disabled{
            border-left-color: $--button-disabled-border;
          }
        }
        &:not(:first-child):not(:last-child) {
          border-left-color: $--color-secondary-hover;
          border-right-color: $--color-secondary-hover;
          &.is-disabled{
            border-left-color: $--button-disabled-border;
            border-right-color: $--button-disabled-border;
          }
        }
      }
    }
  }

  /* 垂直排版的需要处理 */
  &.is-vertical{
    .el-button {
      display:block;
      float:none;
      &:first-child {
        border-top-right-radius: $--button-border-radius;
        border-right-color: $--button-default-border;
        border-bottom-color: rgba($--color-white, 0.5);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        &.is-disabled{
          border-bottom-color: $--color-white;
        }
      }
      &:last-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top-color: rgba($--color-white, 0.5);
        border-left-color: $--button-default-border;
        border-bottom-left-radius: $--button-border-radius;
        &.is-disabled{
          border-top-color: $--color-white;
        }
      }
      &:first-child:last-child {
        border-top-right-radius: $--button-border-radius;
        border-bottom-right-radius: $--button-border-radius;
        border-top-left-radius: $--button-border-radius;
        border-bottom-left-radius: $--button-border-radius;
      }
      &:not(:first-child):not(:last-child) {
        border-radius: 0;
        border-top-color: rgba($--color-white, 0.5);
        border-bottom-color: rgba($--color-white, 0.5);
        border-left-color: $--button-default-border;
        border-right-color: $--button-default-border;
        &.is-disabled{
          border-top-color: $--color-white;
          border-bottom-color: $--color-white;
        }
      }
      &:not(:last-child) {
        margin-right: 0px;
        margin-bottom: -1px;
      }
      
      @include when (plain) {
        &:first-child {
          border-bottom-color: $--button-default-plain-border;
        }
        &:last-child {
          border-top-color: $--button-default-plain-border;
        }
        &:not(:first-child):not(:last-child) {
          border-top-color: $--button-default-plain-border;
          border-bottom-color: $--button-default-plain-border;
          &.is-disabled{
            border-left-color: $--button-default-plain-border;
            border-right-color: $--button-default-plain-border;
          }
        }
      }
    }

    @each $type in (primary, success, warning, danger, info) {
      .el-button--#{$type} {
        &:first-child {
          border-right-color: $--color-primary;
          border-bottom-color: rgba($--color-white, 0.5);
          &.is-disabled{
            border-bottom-color: $--button-disabled-border;
          }
        }
        &:last-child {
          border-left-color: $--color-primary;
          border-top-color: rgba($--color-white, 0.5);
          &.is-disabled{
            border-top-color: $--button-disabled-border;
          }
        }
        &:not(:first-child):not(:last-child) {
          border-left-color: $--color-primary;
          border-right-color: $--color-primary;
          border-bottom-color: rgba($--color-white, 0.5);
          border-top-color: rgba($--color-white, 0.5);
          &.is-disabled{
            border-bottom-color: $--button-disabled-border;
            border-top-color: $--button-disabled-border;
          }
        }
        /* 次要按钮的时候，样式不同 */
        &.is-plain{
          &:first-child {
            border-right-color: $--color-primary;
            border-bottom-color: $--button-hover-color;
            &.is-disabled{
              border-right-color: $--button-disabled-border;
              border-bottom-color: $--button-disabled-border;
            }
          }
          &:last-child {
            border-left-color: $--color-primary;
            border-top-color: $--button-hover-color;
            &.is-disabled{
              border-left-color: $--button-disabled-border;
              border-top-color: $--button-disabled-border;
            }
          }
          &:not(:first-child):not(:last-child) {
            border-left-color: $--color-primary;
            border-right-color: $--color-primary;
            border-top-color: $--button-hover-color;
            border-bottom-color: $--button-hover-color;
            &.is-disabled{
              border-left-color: $--button-disabled-border;
              border-right-color: $--button-disabled-border;
              border-bottom-color: $--button-disabled-border;
              border-top-color: $--button-disabled-border;
            }
          }
        }
      }
    }
  }
}

/* 纯icon 无边框 按钮的 ui */
.el-button-only-icon{
  color: $--button-icon-btn;
  font-size: $--font-size-medium;
  &:hover {
    cursor:pointer;
    color: $--button-hover-color;
  }

  &:active {
    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
    box-shadow: none;
  }
  &.is-disabled{
    color: $--button-disabled-color;
    cursor: not-allowed;
    &:hover {
      color: $--button-disabled-color;
      cursor: not-allowed;
    }
  }
}

/* 中英文切换按钮的特殊样式 */
.switch-button-group{
  .el-button{
    &.el-button--default{
      border: 1px solid $--border-color-base;
      min-width: 60px;
      color: $--color-info;
      &.el-button--mini,
      &.el-button--small{
        min-width: 42px;
      }
      &:hover{
        color: $--color-primary-light-2;
        background-color: $--color-white;
      }
      &.active{
        background: $--background-color-base;
        color: $--color-info;
        cursor: not-allowed;
        box-shadow: inset 1px 1px 2px 0 $--border-color-base;
      }
    }
  }
}