@import './token.less';
@import './mixin.less';

@btn-prefix-cls: ~'@{prefix}-Button';

.@{btn-prefix-cls} {
  display: inline-block;
  position: relative;
  outline: none;
  font-weight: @btn-font-weight;
  appearance: none;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all @animation-duration-1 linear;
  box-sizing: border-box;
  line-height: 1;
  border-style: @border-solid;
  vertical-align: middle;
  // display: inline-flex;
  // align-items: center;
  gap: @size-1;
  > a:only-child {
    color: currentColor;
  }

  &:active {
    transition: none;
  }

  &:empty {
    display: inline-block;
    vertical-align: bottom;
  }

  &-block {
    display: block;
    width: 100%;
  }
  &-dashed {
    border-style: @border-dashed;
  }

  // link
  &-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    &:not([href]) {
      color: var(--color-text-4);
    }

    &:hover {
      text-decoration: none;
    }
  }

  &-loading {
    cursor: default;
    position: relative;

    .@{prefix}-Icon-loading {
      animation: loadingCircle 1s infinite @ease-base-linear;
    }
    &::before {
      content: '';
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      z-index: 1;
      display: block;
      background: #fff;
      border-radius: inherit;
      opacity: 0.4;
      transition: opacity @animation-duration-1 @ease-base-linear;
      pointer-events: none;
    }
  }

  &-loading-fixed-width {
    transition: none;
  }

  &-two-chinese-chars > *:not(svg) {
    letter-spacing: 0.3em;
    margin-right: -0.3em;
  }
  // > span {
  //   &:first-child {
  //     margin-right: @size-1;
  //   }
  // }
  &-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    border: none;
    flex-shrink: 0;
    &-border {
      border: @btn-size-middle-border-width @border-solid var(--color-border-2);
    }
  }
}

.btn-type(default);
.btn-level(default, warning);
.btn-level(default, danger);
.btn-level(default, success);

.btn-type(dashed);
.btn-level(dashed, warning);
.btn-level(dashed, danger);
.btn-level(dashed, success);

.btn-type(primary);
.btn-level(primary, warning);
.btn-level(primary, danger);
.btn-level(primary, success);

.btn-type(secondary);
.btn-level(secondary, warning);
.btn-level(secondary, danger);
.btn-level(secondary, success);

.btn-type(text);
.btn-level(text, warning);
.btn-level(text, danger);
.btn-level(text, success);

.btn-type(link);
.btn-level(link, warning);
.btn-level(link, danger);
.btn-level(link, success);

// .btn-type(dashed);
// .btn-level(dashed, warning);
// .btn-level(dashed, danger);
// .btn-level(dashed, success);

.btn-type(ghost);
.btn-level(ghost, primary);
.btn-level(ghost, warning);
.btn-level(ghost, danger);
.btn-level(ghost, success);

.btn-size(small);
.btn-size(middle);
.btn-size(large);

// 分组
.@{btn-prefix-cls}-group {
  display: inline-block;

  .@{btn-prefix-cls}-default:not(:first-child),
  .@{btn-prefix-cls}-outline:not(:first-child),
  .@{btn-prefix-cls}-dashed:not(:first-child) {
    margin-left: -1px;
  }

  .@{btn-prefix-cls}-primary:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_hover;
  }

  .@{btn-prefix-cls}-secondary:not(:last-child) {
    border-right: 1px solid @btn-secondary-color-bg_hover;
  }

  .@{btn-prefix-cls}-text:not(:last-child) {
    border-right: 1px solid @btn-text-color-border_hover;
  }

  .@{btn-prefix-cls}-level-warning:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_warning_hover;
    &.@{btn-prefix-cls}-text {
      border-right: 1px solid @btn-text-color-bg_warning_hover;
    }
  }

  .@{btn-prefix-cls}-level-danger:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_danger_hover;
    &.@{btn-prefix-cls}-text {
      border-right: 1px solid @btn-text-color-bg_danger_hover;
    }
  }

  .@{btn-prefix-cls}-level-success:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_success_hover;
    &.@{btn-prefix-cls}-text {
      border-right: 1px solid @btn-text-color-bg_success_hover;
    }
  }

  .@{btn-prefix-cls}-default,
  .@{btn-prefix-cls}-outline,
  .@{btn-prefix-cls}-dashed {
    &:hover,
    &:active {
      z-index: 2;
    }
  }

  .@{btn-prefix-cls}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}