@use "sass:color";
@use "../sizes" as *;
@use "../colors" as *;

// adduse

$button-border-radius: $base-border-radius !default;

/**
* $name 10. Text color
* $type color
*/
$button-normal-color: $base-text-color !default;

/**
* $name 20. Background color (contained)
* $type color
*/
$button-normal-bg: null !default;

/**
* $name 21. Background color (outlined)
* $type color
*/
$button-normal-outlined-bg: null !default;

/**
* $name 22. Background color (text)
* $type color
*/
$button-normal-text-bg: null !default;

/**
* $name 30. Border color
* $type color
*/
$button-normal-border-color: null !default;
$button-normal-bg-inverted: null !default;
$button-normal-contained-bg-hover: null !default;
$button-normal-contained-bg-focused: null !default;
$button-normal-contained-bg-active: null !default;

/**
* $name 20. Selected contained item background color
* $type color
*/
$button-normal-contained-bg-selected: null !default;
$button-normal-outlined-bg-hover: null !default;
$button-normal-outlined-bg-focused: null !default;
$button-normal-outlined-bg-active: null !default;

/**
* $name 20. Selected outlined item background color
* $type color
*/
$button-normal-outlined-bg-selected: null !default;
$button-normal-text-bg-hover: null !default;
$button-normal-text-bg-focused: null !default;
$button-normal-text-bg-active: null !default;

/**
* $name 20. Selected text item background color
* $type color
*/
$button-normal-text-bg-selected: null !default;

/**
* $name 10. Text color (contained)
* $type color
*/
$button-default-color: $base-inverted-text-color !default;

/**
* $name 20. Background color
* $type color
*/
$button-default-bg: null !default;

/**
* $name 30. Border color
* $type color
*/
$button-default-border-color: null !default;
$button-default-contained-bg-hover: null !default;
$button-default-contained-bg-focused: null !default;
$button-default-contained-bg-active: null !default;

/**
* $name 20. Selected contained item background color
* $type color
*/
$button-default-contained-bg-selected: null !default;

/**
* $name 11. Text color (outlined)
* $type color
*/
$button-default-outlined-color: null !default;
$button-default-outlined-bg-hover: null !default;
$button-default-outlined-bg-focused: null !default;
$button-default-outlined-bg-active: null !default;

/**
* $name 20. Selected outlined item background color
* $type color
*/
$button-default-outlined-bg-selected: null !default;

/**
* $name 11. Text color (text)
* $type color
*/
$button-default-text-color: null !default;
$button-default-text-bg-hover: null !default;
$button-default-text-bg-focused: null !default;
$button-default-text-bg-active: null !default;

/**
* $name 20. Selected text item background color
* $type color
*/
$button-default-text-bg-selected: null !default;

/**
* $name 10. Text color
* $type color
*/
$button-danger-color: $base-inverted-text-color !default;

/**
* $name 20. Background color
* $type color
*/
$button-danger-bg: $base-danger !default;

/**
* $name 30. Border color
* $type color
*/
$button-danger-border-color: null !default;
$button-danger-contained-bg-hover: null !default;
$button-danger-contained-bg-focused: null !default;
$button-danger-contained-bg-active: null !default;

/**
* $name 20. Selected contained item background color
* $type color
*/
$button-danger-contained-bg-selected: null !default;
$button-danger-outlined-bg-hover: null !default;
$button-danger-outlined-bg-focused: null !default;
$button-danger-outlined-bg-active: null !default;

/**
* $name 20. Selected outlined item background color
* $type color
*/
$button-danger-outlined-bg-selected: null !default;
$button-danger-text-bg-hover: null !default;
$button-danger-text-bg-focused: null !default;
$button-danger-text-bg-active: null !default;

/**
* $name 20. Selected text item background color
* $type color
*/
$button-danger-text-bg-selected: null !default;

/**
* $name 10. Text color
* $type color
*/
$button-success-color: $base-inverted-text-color !default;

/**
* $name 20. Background color
* $type color
*/
$button-success-bg: $base-success !default;

/**
* $name 30. Border color
* $type color
*/
$button-success-border-color: null !default;
$button-success-contained-bg-hover: null !default;
$button-success-contained-bg-focused: null !default;
$button-success-contained-bg-active: null !default;

/**
* $name 20. Selected contained item background color
* $type color
*/
$button-success-contained-bg-selected: null !default;
$button-success-outlined-bg-hover: null !default;
$button-success-outlined-bg-focused: null !default;
$button-success-outlined-bg-active: null !default;

/**
* $name 20. Selected outlined item background color
* $type color
*/
$button-success-outlined-bg-selected: null !default;
$button-success-text-bg-hover: null !default;
$button-success-text-bg-focused: null !default;
$button-success-text-bg-active: null !default;

/**
* $name 20. Selected text item background color
* $type color
*/
$button-success-text-bg-selected: null !default;

@if $color == "carmine" {
  $button-normal-bg: $base-element-bg !default;
  $button-normal-border-color: darken($base-border-color, 17%) !default;
  $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}

@if $color == "contrast" {
  $button-normal-border-color: $base-border-color !default;
  $button-normal-bg: $base-bg !default;
  $button-normal-contained-bg-hover: $base-hover-color !default;
  $button-normal-contained-bg-focused: $base-focus-color !default;
  $button-normal-contained-bg-active: $button-normal-bg !default;
  $button-normal-contained-bg-selected: $base-hover-color !default;
  $button-normal-outlined-bg: $base-bg !default;
  $button-normal-outlined-bg-hover: $base-hover-color !default;
  $button-normal-outlined-bg-focused: $base-focus-color !default;
  $button-normal-outlined-bg-active: $button-normal-outlined-bg !default;
  $button-normal-outlined-bg-selected: $base-hover-color !default;
  $button-normal-text-bg: $base-bg !default;
  $button-normal-text-bg-hover: $base-hover-color !default;
  $button-normal-text-bg-focused: $base-focus-color !default;
  $button-normal-text-bg-active: $button-normal-text-bg !default;
  $button-normal-text-bg-selected: $base-hover-color !default;
  $button-default-border-color: $base-default !default;
  $button-default-bg: $base-default !default;
  $button-default-contained-bg-hover: $base-inverted-bg !default;
  $button-default-contained-bg-focused: $base-inverted-bg !default;
  $button-default-contained-bg-active: $button-default-bg !default;
  $button-default-contained-bg-selected: $base-inverted-bg !default;
  $button-default-outlined-color: $base-default !default;
  $button-default-outlined-bg-hover: $base-inverted-bg !default;
  $button-default-outlined-bg-focused: $base-inverted-bg !default;
  $button-default-outlined-bg-active: $base-bg !default;
  $button-default-outlined-bg-selected: $base-inverted-bg !default;
  $button-default-text-color: $base-default !default;
  $button-default-text-bg-hover: $base-inverted-bg !default;
  $button-default-text-bg-focused: $base-inverted-bg !default;
  $button-default-text-bg-active: $base-bg !default;
  $button-default-text-bg-selected: $base-inverted-bg !default;
  $button-danger-border-color: $button-danger-bg !default;
  $button-danger-contained-bg-hover: $base-inverted-bg !default;
  $button-danger-contained-bg-focused: $base-inverted-bg !default;
  $button-danger-contained-bg-active: $button-danger-bg !default;
  $button-danger-contained-bg-selected: $base-inverted-bg !default;
  $button-danger-outlined-bg-hover: $base-inverted-bg !default;
  $button-danger-outlined-bg-focused: $base-inverted-bg !default;
  $button-danger-outlined-bg-active: $base-bg !default;
  $button-danger-outlined-bg-selected: $base-inverted-bg !default;
  $button-danger-text-bg-hover: $base-inverted-bg !default;
  $button-danger-text-bg-focused: $base-inverted-bg !default;
  $button-danger-text-bg-active: $base-bg !default;
  $button-danger-text-bg-selected: $base-inverted-bg !default;
  $button-success-border-color: $button-success-bg !default;
  $button-success-contained-bg-hover: $base-inverted-bg !default;
  $button-success-contained-bg-focused: $base-inverted-bg !default;
  $button-success-contained-bg-active: $button-success-bg !default;
  $button-success-contained-bg-selected: $base-inverted-bg !default;
  $button-success-outlined-bg-hover: $base-inverted-bg !default;
  $button-success-outlined-bg-focused: $base-inverted-bg !default;
  $button-success-outlined-bg-active: $base-bg !default;
  $button-success-outlined-bg-selected: $base-inverted-bg !default;
  $button-success-text-bg-hover: $base-inverted-bg !default;
  $button-success-text-bg-focused: $base-inverted-bg !default;
  $button-success-text-bg-active: $base-bg !default;
  $button-success-text-bg-selected: $base-inverted-bg !default;
}

@if $color == "dark" {
  $button-normal-bg: $base-element-bg !default;
  $button-normal-border-color: $base-border-color !default;
  $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: lighten($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: lighten($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: lighten($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: lighten($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: lighten($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: lighten($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}

@if $color == "darkmoon" {
  $button-normal-bg: $base-element-bg !default;
  $button-normal-border-color: lighten($base-border-color, 13%) !default;
  $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: lighten($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: lighten($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: lighten($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: lighten($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: lighten($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: lighten($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}

@if $color == "darkviolet" {
  $button-normal-bg: #303038 !default;
  $button-normal-border-color: $base-hover-bg !default;
  $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: lighten($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: lighten($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: lighten($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: lighten($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: lighten($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: lighten($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}

@if $color == "greenmist" {
  $button-normal-bg: $base-element-bg !default;
  $button-normal-border-color: lighten($base-label-color, 16.5%) !default;
  $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}

@if $color == "light" {
  $button-normal-bg: $base-element-bg !default;
  $button-normal-border-color: $base-border-color !default;
  $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}

@if $color == "softblue" {
  $button-normal-bg: $base-element-bg !default;
  $button-normal-border-color: darken($base-border-color, 11%) !default;
  $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
  $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default;
  $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default;
  $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default;
  $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default;
  $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default;
  $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default;
  $button-normal-outlined-bg-active: color.change($button-normal-outlined-bg, $alpha: 0.24) !default;
  $button-normal-outlined-bg-selected: color.change($button-normal-outlined-bg, $alpha: 0.17) !default;
  $button-normal-text-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default;
  $button-normal-text-bg-hover: color.change($button-normal-text-bg, $alpha: 0.04) !default;
  $button-normal-text-bg-focused: color.change($button-normal-text-bg, $alpha: 0.08) !default;
  $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default;
  $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default;
  $button-default-bg: $base-accent !default;
  $button-default-border-color: darken($button-default-bg, 5%) !default;
  $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
  $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
  $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
  $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
  $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
  $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
  $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-default-text-color: darken($button-default-bg, 5%) !default;
  $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
  $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
  $button-default-text-bg-active: $button-default-outlined-bg-active !default;
  $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
  $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
  $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
  $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
  $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default;
  $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default;
  $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default;
  $button-danger-outlined-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-danger-text-bg-hover: $button-danger-outlined-bg-hover !default;
  $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
  $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
  $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
  $button-success-border-color: darken($button-success-bg, 5%) !default;
  $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
  $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
  $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
  $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default;
  $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default;
  $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default;
  $button-success-outlined-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
  $button-success-text-bg-hover: $button-success-outlined-bg-hover !default;
  $button-success-text-bg-focused: $button-success-outlined-bg-focused !default;
  $button-success-text-bg-active: $button-success-outlined-bg-active !default;
  $button-success-text-bg-selected: color.change($button-success-bg, $alpha: 0.3) !default;
}