@import './../../theme/vars.scss';
@import './../../mixins/index.scss';

$btnPrefixCls: amos-btn;

$btnInnerColors: pink, red, yellow, orange, cyan, green, blue, purple, magenta, gold, lime;

@mixin make-btn-color($bgColor: pink) {
  background-color: $bgColor;
  border: 1px solid $bgColor;

  &:hover {
    background-color: rgba($bgColor, 0.9);
    border-color: darken($bgColor, 5%);
  }

  &:active {
    background-color: rgba($bgColor, 0.9);
    border-color: darken($bgColor, 5%);
  }
}

// 此处不是用变量 $color 防止 warning
// It may end up represented as purple, which will likely produce invalid CSS.
// Always quote color names when using them as strings or map keys (for example, "purple").
// If you really want to use the color value here, use '"" + $color'.
@mixin make-btn-color-classes() {
  @each $--color in $btnInnerColors {
    &.#{$btnPrefixCls}-#{"#{$--color}"} {
      @include make-btn-color($--color);
    }
  }
}

.#{$btnPrefixCls} {
  @include make-btn-color-classes();
  @include reset-component2;

  height: 2.8em;
  padding: 0 1.8em;
  color: white;
  vertical-align: middle;
  cursor: pointer;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: $border-radius-sm;
  transition: all 0.12s ease-in 0s; // transition: background-color .1s ease, color .1s ease, border-color .1s ease;
  user-select: none;

  &:hover {
    background-color: $primary-color-deep;
    border-color: $primary-color-deep;
  }

  &:active {
    background-color: $primary-color-deeper;
    border-color: $primary-color-deeper;
  }

  &:focus {
    outline: none;
  }

  &[disabled] {
    color: $btn-disabled-color;
    cursor: not-allowed;
    background-color: $btn-disabled-bg-color;
    border-color: $btn-disabled-border-color;
  }

  i[class*='icon'] {
    margin-right: 0.3em;
    color: inherit;
  }
}

.#{$btnPrefixCls}-minor {
  color: $minor-color;
  background-color: $minor-bg-color;
  border-color: $minor-border-color;

  &:hover {
    background-color: $minor-bg-color-hover;
    border-color: $minor-border-color;
  }

  &:active {
    background-color: $minor-bg-color-active;
    border-color: $minor-border-color;
  }
}

.#{$btnPrefixCls}-ghost {
  color: $minor-color;
  background-color: white;
  border-color: $minor-border-color;

  &:hover,
  &:focus,
  &:active {
    color: $primary-color;
    background-color: white;
    border-color: $primary-color;
  }
}

.#{$btnPrefixCls}-sm {
  height: 1.8em;
  padding: 0 0.8em;
}

.#{$btnPrefixCls}-lg {
  height: 3.5em;
  padding: 0 2em;
}

.#{$btnPrefixCls}-icon,
.#{$btnPrefixCls}-circle {
  width: 2.5em;
  padding: 0;
  text-align: center;

  &.#{$btnPrefixCls}-sm {
    width: 1.8em;
  }

  &.#{$btnPrefixCls}-lg {
    width: 3.5em;
  }
}

.#{$btnPrefixCls}-icon {
  i[class*='icon'] {
    margin-right: 0;
  }
}

.#{$btnPrefixCls}-circle {
  border-radius: 50%;
}

.#{$btnPrefixCls}-transparent {
  color: inherit;
  background-color: transparent;
  border: 0;
  opacity: 0.7;
  transition: opacity 0.1s ease;

  &:hover:enabled {
    color: inherit;
    background-color: transparent;
    opacity: 0.85;
  }

  &:active:enabled {
    color: inherit;
    background-color: transparent;
    opacity: 1;
  }
}

// block 占满一行
.#{$btnPrefixCls}-block {
  display: block;
}

.#{$btnPrefixCls}-link {
  color: var(--primary-color);
  background-color: transparent;
  border: 0;

  &:hover:enabled,
  &:active:enabled {
    color: $primary-color-deep;
    background-color: transparent;
  }
}