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

@include b(button) {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $--primary-6;
  border: $--border-1 solid $--primary-6;
  color: $--button-primary-font-color;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: $--font-weight-400;

  &:hover{
    border-color: $--color-primary-hover;
    background-color: $--color-primary-hover;
    border-color: $--primary-5;
    background-color: $--primary-5;
  }
  &:active {
    border-color: $--color-primary-active;
    background-color: $--color-primary-active;
    border-color: $--primary-7;
    background-color: $--primary-7;
  }
  // &:focus:not( &:hover){
  //   border-color: $--button-primary-border-color;
  //   background: $--button-primary-background-color;
  // }

  &.is-disabled {
    cursor: not-allowed;
    &,
    &:hover,
    &:focus,
    &:active {
      background-color: $--primary-3;
      //border-color: $--primary-3;
      color: $--button-disabled-font-color;
    }
  }

  @include when(loading) {
    position: relative;
    pointer-events: none;
    font-size: 0;

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      // background-color: rgba(255,255,255,.65);
      background-color: rgba(255,255,255,0);
    }
    .loading-icon{
      display: inline-block;
      margin: -10px 8px 0px 0px;
      width: 14px;
      height: 14px;
      animation: loading-rotate 1.5s linear infinite;
    }
    .loading-right-icon{
      margin: -10px 0px 0px 8px;
    }
    .text-icon{
      margin: 0;
    }
  }

  @include utils-user-select(none);
  & + & {
    margin-left: 8px;
  }

  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);

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

  & [class*="el-icon-"], & [class*="el-qw-icon-"] {
    & + span {
      margin-left: 8px;
    }
  }

  & span {
    & + [class*="el-icon-"], & + [class*="el-qw-icon-"] {
      margin-left: 8px;
    }
  }

  .el-icon--right {
    margin-left: 8px;
  }


  @include m(large) {
    @include button-size($--button-large-padding-vertical, $--button-large-padding-horizontal, $--button-font-size, $--button-large-border-radius);
    span {
      font-size: $--font-size-body-3;
    }
    @include when(icon) {
      @include button-size(9px, 9px, 0, $--button-icon-border-radius);
      i {
        font-size: $--font-size-medium;
      }
    }
  }
  @include m(medium) {
    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-font-size, $--button-medium-border-radius);
    span {
      font-size: $--font-size-body-3;
    }
    &.el-drawer-footer-button {
      padding: $--button-medium-padding-vertical-drawer-default $--button-medium-padding-horizontal-drawer-default;
    }
    @include when(icon) {
      @include button-size(7px, 7px, 0, $--button-icon-border-radius);
    }
  }
  @include m(small) {
    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-font-size, $--button-small-border-radius);
    span {
      font-size: $--font-size-body-3;
    }
    @include when(icon) {
      @include button-size(5px, 5px, 0, $--button-icon-border-radius);
    }
  }
  @include m(mini) {
    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-font-size, $--button-mini-border-radius);
    span {
      font-size: $--font-size-body-1;
      line-height: $--button-small-font-size;
    }
    @include when(icon) {
      @include button-size(3px, 3px, 0, $--button-icon-border-radius);
    }
    .loading-icon{
      width: 12px !important;
      height: 12px !important;
      margin: -10px 10px 0px 0px !important;
    }
    .loading-right-icon{
      margin: -10px 0px 0px 10px !important;
    }
    .text-icon{
      margin: 0 !important;
    }

  }
  @include m(primary) {
    &[color~="linear"]{
      background: $--color-primary;
      border-color: $--primary-6;
      color: $--color-white;
    }
    &:hover {
      border-color: $--primary-5;
      background-color: $--primary-5;
    }
    &:active {
      border-color: $--primary-7;
      background-color: $--primary-7;
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        background-color: $--primary-3;
        border-color: $--primary-3;
        color: $--button-disabled-font-color;
      }
    }
    // &.is-disabled[color~="plain"] {
    //   color: $--button-plain-disabled-font-color;
    //   background: $--button-plain-disabled-background-color;
    //   border-color: $--button-plain-disabled-border-color;
    // }
  }
  @include m(secondary) {
    color: $--color-text-2;
    background: $--color-fill-3;
    border-color: $--color-fill-3;
    // border-left: none;
    // border-right: none;

    &:hover {
      // border-color: $--button-secondary-hover;
      // background-color: $--button-secondary-hover;
      border-color: $--color-fill-4;
      background-color: $--color-fill-4;
    }
    &:active {
      // border-color: $--button-secondary-active;
      // background-color: $--button-secondary-active;
      border-color: $--color-fill-5;
      background-color: $--color-fill-5;
    }
    // &:focus:not(.el-button .el-button--secondary:hover){
    //   background: $--color-fill-3;
    // border-color: $--color-fill-3;
    // }
    // &[color~="plain"] {
    //   color: $--button-icon-font-color;
    //   background: $--button-icon-background-color;
    //   border-color: $--button-icon-border-color;
    // }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        // background-color: $--button-secondary-disabled-background-color;
        // border-color: $--button-secondary-disabled-border-color;
        background-color: $--color-fill-2;
        border-color: $--color-fill-2;
        color: $--color-text-4;
      }
    }
  }
  @include m(text) {
    color: $--primary-6;
    border: $--border-width-base $--border-style-base transparent;
    // border-color: transparent;
    background: transparent;

    &:hover {
      color: $--primary-6;
       border-color: transparent;
      background-color: $--color-fill-2;
    }
    &:active {
      color: $--primary-6;
      // border-color: transparent;
      background-color: $--color-fill-4;
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        // background-color: $--button-text-disabled-background-color;
        // border-color: $--button-text-disabled-border-color;
        background-color: $--color-fill-2;
        // border-color: transparent;
        color: $--button-text-disabled-font-color;
      }
    }
  }
  @include m(linear) {
    color: $--primary-6;
    border-color: $--primary-6;
    background: $--button-linear-background-color;
    &[color~="linear"]{
      background: $--button-linear-background-color;
      border-color: $--button-linear-border-color;
      color: $--button-linear-font-color;
    }
    // &[color~="plain"]{
    //   background: $--button-plain-background-color;
    //   border-color: $--button-plain-border-color;
    //   color: $--button-plain-font-color;
    // }
    &:hover {
      background-color: $--primary-1;
    }
    &:active {
      background-color: $--primary-2;
      border-color: $--primary-6;
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
      background-color: $--button-linear-disabled-background-color;
      border-color: $--primary-3;
      color: $--primary-3;
      }
    }
    &.is-disabled[color~="linear"] {
      color: $--button-linear-disabled-font-color;
      background: $--button-linear-disabled-background-color;
      border-color: $--button-linear-disabled-border-color;
    }
    // &.is-disabled[color~="plain"] {
    //   color: $--button-plain-disabled-font-color;
    //   background: $--button-plain-disabled-background-color;
    //   border-color: $--button-plain-disabled-border-color;
    // }
  }
  @include m(plain) {
    color: $--color-text-2;
    border-color: $--color-border-3;
    background: $--button-plain-background-color;
    // &[color~="plain"] {
    //   color: $--button-plain-border-color;
    //   background: $--button-plain-background-color;
    //   border-color: $--button-icon-border-color;
    // }
    &:hover{
      border-color: $--color-border-3;
      background-color: $--color-fill-3;
    }
    &:active {
      border-color: $--color-border-4;
      background-color: $--color-fill-4;
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        background-color: $--button-plain-disabled-background-color;
        //border-color: $--color-fill-5;
        border-color: $--color-border-3;
        color: $--button-plain-disabled-font-color;
      }
    }
  }
  @include m(icon) {
    // padding-left: 12px;
    // padding-right: 12px;
    i {
      vertical-align: bottom;
    }
  }
  @include when(icon) {
    // color: $--button-icon-font-color;
    // background: $--button-icon-background-color;
    // border-color: $--button-icon-border-color;
    i {
      font-size: $--font-size-title-1;
    }
    .loading-icon{
      width: 16px !important;
      height: 16px !important;
      margin: 0;
    }
    // &:hover {
    //   background-color: $--button-icon-hover;
    //   border-color: $--button-icon-border-hover;
    // }

    // &:active {
    //   color: $--button-icon-font-active;
    //   background-color: $--button-icon-active;
    //   border-color: $--button-icon-border-active;
    // }
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}