@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/keyframes';
$m-button-prefix: 'cn-ui-m-button';

//圆角、高度、内边距、颜色等细节
.#{$hashClassName}.#{$m-button-prefix} {
  // 主视觉色
  --color: transparent;
  // 文字颜色
  --text-color: #{$m-color-text};
  // 背景颜色
  --background-color: transparent;
  // 边框颜色
  --border-color: #{$m-color-bg};
  // 边框尺寸
  --border-width: #{$m-line};
  // 边框类型
  --border-style: solid;

  column-gap: $m-s-4;

  color: var(--text-color);
  background-color: var(--background-color);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  outline: none;
  height: auto;
  line-height: $m-font-lineheight-2;
  padding: 0 $m-s-16;
  margin: 0;
  font-size: $m-font-size-body-1;
  text-align: center;
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: opacity ease 0.15s;
  user-select: none;

  // size
  &-small {
    border-radius: $m-s-4;
    padding: $m-s-2 $m-s-8;
    font-size: $m-font-size-caption;
  }
  &-medium {
    border-radius: $m-radius;
    padding: $m-s-5 $m-s-12;
    font-size: $m-font-size-body-1;
  }
  &-large {
    border-radius: $m-radius;
    padding: $m-s-8 $m-s-24;
    font-size: $m-font-size-headline-5;
  }

  &-default {
    &.#{$m-button-prefix}-fill-outline {
      --background-color: #{$m-color-bg-white};
      --border-color: #{$m-color-bg};
    }
    &.#{$m-button-prefix}-fill-none {
      --background-color: transparent;
      --border-width: 0px;
      padding: 0;
    }
  }
  &:not(.#{$m-button-prefix}-default) {
    --text-color: #{$m-color-bg-white};
    --background-color: var(--color);
    --border-color: var(--color);
    &.#{$m-button-prefix}-fill-outline {
      --text-color: var(--color);
      --background-color: #{$m-color-bg-white};
    }
    &.#{$m-button-prefix}-fill-none {
      --text-color: var(--color);
      --background-color: transparent;
      --border-width: 0px;
      padding: 0;
    }
  }

  &-primary {
    --color: #{$m-color-primary};
  }

  &-warning {
    --color: #{$m-color-error};
  }

  &-secondary {
    --color: #{$m-color-primary};
  }

  &-inverse {
    --color: #1f1f1f;
    &.#{$m-button-prefix}-fill-outline {
      --color: #{$m-color-bg-white};
      --border-color: rgba(255, 255, 255, 0.6);
      --background-color: #000;
    }
    &.#{$m-button-prefix}-fill-none {
      --color: #{$m-color-bg-white};
    }
    &:not(&-default).#{$m-button-prefix}-fill-outline {
      --background-color: transparent;
    }
  }

  &-default.#{$m-button-prefix}-fill-outline:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --border-color: #{$m-color-primary};
    --background-color: #{$m-color-secondary-lightest};
    --text-color: #{$m-color-primary};
  }

  &-primary.#{$m-button-prefix}-fill-solid:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --background-color: #{$m-color-primary-dark};
  }

  &-primary.#{$m-button-prefix}-fill-outline:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --border-color: #{$m-color-primary};
    --background-color: #{$m-color-secondary-lightest};
    --text-color: #{$m-color-primary};
  }

  &-warning.#{$m-button-prefix}-fill-solid:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --background-color: #{$m-color-error-dark};
  }

  &-warning.#{$m-button-prefix}-fill-outline:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --border-color: #{$m-color-error-dark};
    --text-color: #{$m-color-error-dark};
  }

  &-warning.#{$m-button-prefix}-fill-none:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --text-color: #{$m-color-error-dark};
  }

  &-secondary.#{$m-button-prefix}-fill-outline:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --border-color: #{$m-color-primary};
    --background-color: #{$m-color-secondary-lightest};
    --text-color: #{$m-color-primary};
  }

  &-secondary.#{$m-button-prefix}-fill-none:not(.#{$m-button-prefix}-disabled) {
    --text-color: #{$m-color-text-tip};
  }

  &-inverse:not(.#{$m-button-prefix}-disabled):active {
    --border-color: #141414;
    --background-color: #141414;
    --text-color: #a1a1a1;
  }

  &-inverse.#{$m-button-prefix}-fill-none:not(
      .#{$m-button-prefix}-disabled
    ):active {
    --background-color: transparent;
  }

  &-disabled {
    cursor: not-allowed;
    --text-color: #{$m-color-text-disabled};
    --border-color: #{$m-color-bg-disabled};
    &.#{$m-button-prefix}-primary {
      --text-color: #{$m-color-text-disabled};
      --background-color: #{$m-color-bg-disabled};
      --border-color: #{$m-color-bg-disabled};
    }
    &:not(#{$m-button-prefix}-default).#{$m-button-prefix}-fill-outline {
      --color: #{$m-color-text-disabled};
      --border-color: #{$m-color-bg-disabled};
    }
    &:not(#{$m-button-prefix}-default).#{$m-button-prefix}-fill-none {
      --color: #{$m-color-text-disabled};
    }
    &.#{$m-button-prefix}-warning.#{$m-button-prefix}-fill-outline {
      --color: #{$m-color-error-lightest};
      --border-color: #{$m-color-error-lightest};
    }
    &.#{$m-button-prefix}-warning {
      --background-color: #{$m-color-error-lightest};
      --border-color: #{$m-color-error-lightest};
    }
    &.#{$m-button-prefix}-warning.#{$m-button-prefix}-fill-none {
      --color: #{$m-color-error-lightest};
    }
    &.#{$m-button-prefix}-secondary {
      --color: #{$m-color-text-disabled};
      --border-color: #{$m-color-text-tip};
    }
  }

  // 改用 column-gap 实现，不再需要 margin-right
  // .cn-ui-m-icon {
  //   margin-right: $m-s-4;
  // }

  &-loading {
    pointer-events: none;

    .cn-ui-m-icon {
      display: none;
    }
    .#{$m-button-prefix}-loading-icon {
      display: block;
      animation: rotateCircle 2s infinite linear;
    }
  }

  &-fullwidth {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}