@use "sass:map";

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

// 设置了变量 - 设置了 color background-color 和border-color样式
@mixin button-plain($type) {
  $button-color-types: (
    "": (
      "text-color": (
        "color",
        $type
      ),
      "bg-color": (
        "color",
        $type,
        "light-9"
      ),
      "border-color": (
        "color",
        $type,
        "light-5"
      )
    ),
    "hover": (
      "text-color": (
        "color",
        "white"
      ),
      "bg-color": (
        "color",
        $type
      ),
      "border-color": (
        "color",
        $type
      )
    ),
    "active": (
      "text-color": (
        "color",
        "white"
      )
    )
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(("button", $type, $typeColor), $list);
    }
  }

  &.is-disabled {
    //  &:focus,
    &,
    &:hover,
    &:active {
      color: getCssVar("color", $type, "light-5");
      background-color: getCssVar("color", $type, "light-9");
      border-color: getCssVar("color", $type, "light-8");
    }
  }
}

// 设置了变量 - 调用了button-plain
@mixin button-variant($type) {
  $button-color-types: (
    "": (
      "text-color": (
        "color",
        "white"
      ),
      "bg-color": (
        "color",
        $type
      ),
      "border-color": (
        "color",
        $type
      ),
      "outline-color": (
        "color",
        $type,
        "light-5"
      ),
      "active-color": (
        "color",
        $type,
        "dark-2"
      )
    ),
    "hover": (
      "text-color": (
        "color",
        "white"
      ),
      "link-text-color": (
        "color",
        $type,
        "light-5"
      ),
      "bg-color": (
        "color",
        $type,
        "light-3"
      ),
      "border-color": (
        "color",
        $type,
        "light-3"
      )
    ),
    "active": (
      "bg-color": (
        "color",
        $type,
        "dark-2"
      ),
      "border-color": (
        "color",
        $type,
        "dark-2"
      )
    ),
    "disabled": (
      "text-color": (
        "color",
        "white"
      ),
      "bg-color": (
        "color",
        $type,
        "light-5"
      ),
      "border-color": (
        "color",
        $type,
        "light-5"
      )
    )
  );
  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(("button", $type, $typeColor), $list);
    }
  }

  &.is-plain,
  &.is-text,
  &.is-link {
    @include button-plain($type);
  }
}

// 按钮大小 样式
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}