@import '~element-ui/packages/theme-chalk/src/mixins/button';

@include b(button) {
  @include when(never) {
    color: $--color-text-primary;
    background: #fff;

    &:not(.el-button--text) {
      border-color: $--button-default-border-color;

      &:hover,
      &:focus {
        border-color: $--button-default-border-color;
      }
    }

    &:hover,
    &:focus {
      color: $--color-text-primary;
      background: $--button-default-background-color;
    }
  }

  @include when(always-shadow) {
    box-shadow: 0 0 12px rgba(64, 158, 255, 0.5);
  }

  @include m(success) {
    @include when(always-shadow) {
      box-shadow: 0 0 12px rgba($--color-success, 0.5);
    }
  }

  @include m(warning) {
    @include when(always-shadow) {
      box-shadow: 0 0 12px rgba($--color-warning, 0.5);
    }
  }

  @include m(danger) {
    @include when(always-shadow) {
      box-shadow: 0 0 12px rgba($--color-danger, 0.5);
    }
  }

  @include m(info) {
    @include when(always-shadow) {
      box-shadow: 0 0 12px rgba($--color-info, 0.5);
    }
  }

  @include m(small) {
    @include when(long) {
      @include when(round) {
        min-width: 100px;
        padding: 9px 20px;
        border-radius: 20px;
      }
    }
  }

  @include m(gray) {
    background-color: #fcfdfc;
    border-color: #ededed;

    &:not(.is-disabled) {
      &:hover {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
      }
    }
  }

  @include m(xxs) {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
}

@include b(button-group) {
  & > .el-dropdown {
    float: left;

    & > .el-button {
      border-radius: $--button-border-radius;
    }

    $border-colors: (
      primary: $--button-primary-border-color,
      success: $--button-success-border-color,
      warning: $--button-warning-border-color,
      danger: $--button-danger-border-color,
      info: $--button-info-border-color,
    );

    &:first-child {
      & > .el-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        // 设置按钮组下首个dropdown>button，不同状态左边框颜色
        @each $k, $v in $border-colors {
          &.el-button--#{$k} {
            border-left-color: #{$v};
          }
        }

        &.is-round {
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
        }

        &.is-circle {
          border-top-left-radius: 50%;
          border-bottom-left-radius: 50%;
        }
      }
    }

    &:last-child {
      & > .el-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        // 设置按钮组下最后一个dropdown>button，不同状态右边框颜色
        @each $k, $v in $border-colors {
          &.el-button--#{$k} {
            border-right-color: #{$v};
          }
        }

        &.is-round {
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }

        &.is-circle {
          border-top-right-radius: 50%;
          border-bottom-right-radius: 50%;
        }
      }
    }

    &:not(:first-child):not(:last-child) {
      & > .el-button {
        border-radius: 0;
      }
    }
  }

  & > .el-button + .el-dropdown {
    & > .el-button {
      margin-left: -1px;
    }
  }

  & > .el-dropdown + .el-dropdown {
    & > .el-button {
      margin-left: -1px;
    }
  }

  & > .el-dropdown + .el-button {
    margin-left: -1px;
  }
}