@use "sass:list";
@use "sass:map";

@use "../../variables" as *;
@use "../../mixins" as *;
@use "../../utils" as *;

$extra-button-theme-colors: () !default;
$palette-keys: map.keys($palette);

$button-all-theme-colors: list.join(
  list.join(("accent", "warning", "error", "success"), $palette-keys),
  $extra-button-theme-colors
);

.mie.button.filled {
  --mie-button-bg-active: #{mvar("button.bg.filled.active", true)};
  --mie-button-bg-hover: #{mvar("button.bg.filled.hover", true)};
  --mie-button-bg-main: #{mvar("button.bg.filled.main", true)};
}

@include not-many(".mie.button.filled", $button-all-theme-colors) {
  @include mdvar("button.fg", mvar("button.fg.invert"), true);
}

.mie.button.transparent {
  @include mdvar("button.bg.main", mvar("button.bg.transparent"), true);
  @include mdvar("button.fg", mvar("button.bg.filled.main"), true);

  &:hover {
    @include mdvar("button.fg", mvar("button.fg.op"));
  }
}

@include not-many(".mie.button.transparent", $button-all-theme-colors) {
  @include mdvar("button.fg", mvar("button.fg.main"), true);
}

.mie.button.tertiary {
  @include mdvar("button.fg", mvar("button.bg.filled.main"), true);
  @include mdvar("button.bg.main", transparent, true);
  border-bottom: 0.3rem solid mvar("button.fg");
  border-radius: 0;

  &:hover {
    @include mdvar("button.bg.main", transparent, true);
    @include mdvar("button.fg", mvar("button.fg.op"), true);
  }

  &:active {
    @include mdvar("button.bg.main", transparent, true);
  }
}

@include not-many(".mie.button.tertiary", $button-all-theme-colors) {
  @include mdvar("button.fg", mvar("button.fg.main"), true);
}
