@import (reference) '../../Style/base.less';
@import (reference) './token.less';
@import './cssVariables.less';

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

.btn-type(@type) {
  .@{btn-prefix-cls}-@{type}:not(.@{btn-prefix-cls}-disabled) {
    background-color: ~'@{btn-@{type}-color-bg}';
    color: ~'@{btn-@{type}-color-text}';
    border: 1px solid~ '@{btn-@{type}-color-border}';

    &:not(.@{btn-prefix-cls}-loading):hover {
      border-color: ~'@{btn-@{type}-color-border-hover}';
      color: ~'@{btn-@{type}-color-text-hover}';
      background-color: ~'@{btn-@{type}-color-bg-hover}';
    }

    &:not(.@{btn-prefix-cls}-loading):active {
      border-color: ~'@{btn-@{type}-color-border-active}';
      color: ~'@{btn-@{type}-color-text-active}';
      background-color: ~'@{btn-@{type}-color-bg-active}';
    }

    &:focus-visible {
      box-shadow: 0 0 0 @btn-box-shadow-radius~ '@{btn-@{type}-color-box-shadow}';
    }
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-disabled {
    background-color: ~'@{btn-@{type}-color-bg-disabled}';
    color: ~'@{btn-@{type}-color-text-disabled}';
    border: 1px solid~ '@{btn-@{type}-color-border-disabled}';
    cursor: not-allowed;
  }
}

.btn-status(@type, @status) {
  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-status-@{status}:not(.@{btn-prefix-cls}-disabled) {
    background-color: ~'@{btn-@{type}-color-bg-@{status}}';
    color: ~'@{btn-@{type}-color-text-@{status}}';
    border-color: ~'@{btn-@{type}-color-border-@{status}}';

    &:not(.@{btn-prefix-cls}-loading):hover {
      border-color: ~'@{btn-@{type}-color-border-@{status}-hover}';
      color: ~'@{btn-@{type}-color-text-@{status}-hover}';
      background-color: ~'@{btn-@{type}-color-bg-@{status}-hover}';
    }

    &:not(.@{btn-prefix-cls}-loading):active {
      border-color: ~'@{btn-@{type}-color-border-@{status}-active}';
      color: ~'@{btn-@{type}-color-text-@{status}-active}';
      background-color: ~'@{btn-@{type}-color-bg-@{status}-active}';
    }

    &:focus-visible {
      box-shadow: 0 0 0 @btn-box-shadow-radius~ '@{btn-color-box-shadow_@{status}}';
    }
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-status-@{status}.@{btn-prefix-cls}-disabled {
    color: ~'@{btn-@{type}-color-text-@{status}-disabled}';
    background-color: ~'@{btn-@{type}-color-bg-@{status}-disabled}';
    border: 1px solid~ '@{btn-@{type}-color-border-@{status}-disabled}';
  }
}

// button base style
.@{btn-prefix-cls} {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  outline: none;
  padding: @btn-padding;
  height: @btn-height;
  font-size: var(--btn-font-size);
  appearance: none;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s @transition-timing-function-standard;
  box-sizing: border-box;
  line-height: 1.5715;
  border-radius: @btn-radius;

  > a:only-child {
    /* stylelint-disable-next-line value-keyword-case */
    color: currentColor;
  }

  &:active {
    transition: none;
  }

  &:active:not(.@{btn-prefix-cls}-loading):not(.@{btn-prefix-cls}-disabled) {
    transition: none;
  }

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

  &-long {
    display: block;
    width: 100%;
  }

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

    // white mask
    &::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 1s var(--transition-timing-function-linear);
      pointer-events: none;
    }
  }

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

  &-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0;
    width: 32px;
  }

  > svg + span {
    margin-left: 8px;
  }

  > span + span {
    margin-left: 8px;
  }
}

.btn-type(outline);
.btn-status(outline, warning);
.btn-status(outline, error);
.btn-status(outline, success);
.btn-status(outline, default);

.btn-type(brand);
.btn-status(brand, warning);
.btn-status(brand, error);
.btn-status(brand, success);
.btn-status(brand, default);

.btn-type(text);
.btn-status(text, warning);
.btn-status(text, error);
.btn-status(text, success);
.btn-status(text, default);

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

  .@{btn-prefix-cls}:first-child {
    border-radius: @btn-radius 0 0 @btn-radius;
  }

  .@{btn-prefix-cls}.@{btn-prefix-cls}-outline:first-child:hover {
    border-right-color: transparent;
  }

  .@{btn-prefix-cls}:not(:first-child):not(:last-child):hover {
    border-right-color: transparent;
  }

  .@{btn-prefix-cls}:last-child {
    border-radius: 0 @btn-radius @btn-radius 0;
  }

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

  .@{btn-prefix-cls}:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 20%);
  }
}