@use "sass:map";

@use "common/var" as *;
@use "mixins/mixins" as *;
@use "mixins/var" as *;
@use "mixins/function.scss" as *;
@use "mixins/button" as *;

// 生成默认的 Button 组件的作用域下的 CSS 变量
@include b(button) {
  @include set-component-css-var("button", $button);
}

// 使用变量给可变样式赋值
@include b(button) {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  line-height: 1;
  // min-height will expand when in flex
  // height: map.get($input-height, "default");
  white-space: nowrap;
  cursor: pointer;
  color: getCssVar("button", "text-color");
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  font-weight: getCssVar("button", "font-weight");
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: getCssVar("button", "bg-color");
  border: getCssVar("border");
  border-color: getCssVar("button", "border-color");
  //&:focus,
  &:hover {
    color: getCssVar("button", "hover", "text-color");
    border-color: getCssVar("button", "hover", "border-color");
    background-color: getCssVar("button", "hover", "bg-color");
    outline: none;
  }

  &:active {
    color: getCssVar("button", "active", "text-color");
    border-color: getCssVar("button", "active", "border-color");
    background-color: getCssVar("button", "active", "bg-color");
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid getCssVar("button", "outline-color");
    outline-offset: 1px;
  }

  > span {
    display: inline-flex;
    align-items: center;
  }

  & + & {
    margin-left: 12px;
  }
  @include e(icon) {
    padding-right: 5px;
  }
  @include button-size(
    map.get($button-padding-vertical, "default") - $button-border-width,
    map.get($button-padding-horizontal, "default") - $button-border-width,
    map.get($button-font-size, "default"),
    map.get($button-border-radius, "default")
  );

  // 重置变量的值，来影响样式
  @include when(plain) {
    @include css-var-from-global(("button", "hover", "text-color"), ("color", "primary"));
    @include css-var-from-global(("button", "hover", "bg-color"), ("fill-color", "blank"));
    @include css-var-from-global(("button", "hover", "border-color"), ("color", "primary"));
  }
  @include when(active) {
    color: getCssVar("button", "active", "text-color");
    border-color: getCssVar("button", "active", "border-color");
    background-color: getCssVar("button", "active", "bg-color");
    outline: none;
  }
  @include when(disabled) {
    // &:focus
    &,
    &:hover {
      color: getCssVar("button", "disabled", "text-color");
      cursor: not-allowed;
      background-image: none;
      background-color: getCssVar("button", "disabled", "bg-color");
      border-color: getCssVar("button", "disabled", "border-color");
    }
  }
  // 设置不同类型下，对应的变量和值，设置了颜色，背景颜色和边框样式
  @each $type in (primary, success, warning, danger, info) {
    @include m($type) {
      @include button-variant($type);
    }
  }
}