@import '../../scss/variables.scss';
@import '../../scss/functions.scss';
@import '../../scss/mixins.scss';

// #variables
$s-button-height: 36px !default;
$s-button-padding-y: 0 !default;
$s-button-padding-x: $s-font-size !default;
$s-button-border-radius: $s-border-radius !default;
$s-button-font-size: $s-font-size !default;

$s-button-height-sm: 28px !default;
$s-button-padding-y-sm: 0 !default;
$s-button-padding-x-sm: $s-font-size-sm !default;
$s-button-border-radius-sm: $s-border-radius-sm !default;
$s-button-font-size-sm: $s-font-size-sm !default;

$s-button-height-lg: 50px !default;
$s-button-padding-y-lg: 0 !default;
$s-button-padding-x-lg: $s-font-size-lg !default;
$s-button-border-radius-lg: $s-border-radius-lg !default;
$s-button-font-size-lg: $s-font-size-lg !default;

$s-button-line-height: $s-line-height !default;
$s-button-white-space: nowrap !default;
$s-button-border-width: 1px !default;

$s-button-alpha-opacity: $s-active-opacity !default;

$s-button-active-bg-shade-amount: 20% !default;
$s-button-active-bg-tint-amount: 20% !default;
$s-button-active-bg-more-tint-amount: 90% !default;

$s-button-active-bg: $s-bg-active !default;

$s-button-transition-duration: $s-transition-duration !default;

$s-button-rounded-border-radius: 1000px !default;

$s-button-loading-opacity: 0.6 !default;
$s-button-loading-text-margin-left: 0.5rem !default;

// #endvariables

.s-button {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  border: $s-button-border-width solid transparent;
  border-radius: inherit;
  vertical-align: middle;
  font-family: inherit;
  line-height: $s-button-line-height;
  white-space: $s-button-white-space;
  text-align: center;
  background-clip: border-box;
  background-color: transparent;
  user-select: none;
  cursor: pointer;
  transition: $s-button-transition-duration;
  @include button-size(
    $s-button-height,
    $s-button-padding-y,
    $s-button-padding-x,
    $s-button-border-radius,
    $s-button-font-size
  );


  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-width: inherit;
    border-style: solid;
    border-color: transparent;
    border-radius: inherit;
    pointer-events: none;
    background-clip: border-box;
    background-color: currentColor;
    opacity: 0;
    color: inherit;
    content: '';
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
  }
  &[disabled],
  &.s-button-disabled {
    @include disabled;
  }

  @at-root {
    .s-button-content {
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
  }
}

// 尺寸
.s-button-small {
  @include button-size(
    $s-button-height-sm,
    $s-button-padding-y-sm,
    $s-button-padding-x-sm,
    $s-button-border-radius-sm,
    $s-button-font-size-sm
  );
}
.s-button-large {
  @include button-size(
    $s-button-height-lg,
    $s-button-padding-y-lg,
    $s-button-padding-x-lg,
    $s-button-border-radius-lg,
    $s-button-font-size-lg
  );
}

// 圆形按钮
.s-button-rounded {
  border-radius: $s-button-rounded-border-radius;
}

// 块级按钮
.s-button-block {
  display: flex;
  width: 100%;
}

// 主要类型主题色
@each $color, $value in $s-theme-colors {
  .s-button-#{$color} {
    @include button-primary-theme($value, $s-white, 0.2);
  }
}

// 次要类型主题色
@each $color, $value in $s-theme-colors {
  .s-button-secondary-#{$color} {
    @include button-secondary-theme($value, 0.075, 0.2);
  }
}

// 温和类型主题色
@each $color, $value in $s-theme-colors {
  .s-button-mild-#{$color} {
    @include button-mild-theme($value, $s-gray-200, 0.2);
  }
}

// 轮廓线类型主题色
@each $color, $value in $s-theme-colors {
  .s-button-outlined-#{$color} {
    @include button-outlined-theme($value, 0.075);
  }
}

// 文本类型主题色
@each $color, $value in $s-theme-colors {
  .s-button-text-#{$color} {
    @include button-text-theme($value, $s-gray-200);
  }
}

// 淡文本类型主题色
@each $color, $value in $s-theme-colors {
  .s-button-pale-text-#{$color} {
    @include button-pale-text-theme($value, $s-button-alpha-opacity);
  }
}

// 加载中
.s-button-loading {
  pointer-events: none;
  opacity: $s-button-loading-opacity;

  @at-root {
    .s-button-loading-text {
      margin-left: $s-button-loading-text-margin-left;
    }
  }
}