// // Mixins // —————————————-
@mixin button-variant($color-text, $color-background, $color-border, $color-background-hover: false, $color-border-hover: false, $color-background-active: false, $color-border-active: false, $color-background-disabled: false, $color-border-disabled: false) {
@if $color-background-hover == false { $color-background-hover: hsv-lighten($color-background, 7%, true); } @if $color-border-hover == false { $color-border-hover: hsv-lighten($color-border, 7%, true); } @if $color-background-active == false { $color-background-active: hsv-lighten($color-background, 15%, true); } @if $color-border-active == false { $color-border-active: hsv-lighten($color-border, 15%, true); } @if $color-background-disabled == false { $color-background-disabled: hsv-darken($color-element-background, 5%, true); } @if $color-border-disabled == false { $color-border-disabled: hsv-darken($color-element-border, 14%, true); } color: $color-text; background-color: $color-background; border-color: $color-border; &.focus, &:focus { color: $color-text; } &.hover, &:hover { color: $color-text; background-color: $color-background-hover; border-color: $color-border-hover; } &.active, &:active { color: $color-text; background-color: $color-background-active; border-color: $color-border-active; } &.disabled, &[disabled] { &, &.focus, &:focus, &.hover, &:hover { color: hsv-darken($font-color-regular, 50%, true); background: $color-background-disabled; border-color: $color-border-disabled; } }
}