@use 'sass:color';
@use '../functions' as functions;

@mixin button-variant(
  $background,
  $border: color.adjust($background, $lightness: -25%),
  $color: functions.color-contrast($background),
  $hover-background: color.adjust($background, $lightness: -12.5%),
  $hover-border: color.adjust($border, $lightness: -12.5%),
  $hover-color: functions.color-contrast($hover-background),
  $active-background: color.adjust($background, $lightness: -20%),
  $active-border: color.adjust($border, $lightness: -20%),
  $active-color: functions.color-contrast($active-background)
) {
  --btn-active-color: #{$active-color};
  --btn-active-bg: #{$active-background};
  --btn-active-border-color: #{$active-border};
  --btn-bg: #{$background};
  --btn-border-color: #{$border};
  --btn-color: #{$color};
  --btn-hover-bg: #{$hover-background};
  --btn-hover-border-color: #{$hover-border};
  --btn-hover-color: #{$hover-color};
}

@mixin button-outline-variant(
  $color,
  $hover-background: rgba($color, 0.1),
  $hover-border: color.adjust($color, $lightness: -2.5%),
  $hover-color: color.adjust($color, $lightness: -2.5%),
  $active-background: color.adjust($color, $lightness: -2.5%),
  $active-border: color.adjust($color, $lightness: -2.5%),
  $active-color: functions.color-contrast($active-background)
) {
  --btn-active-color: #{$active-color};
  --btn-active-bg: #{$active-background};
  --btn-active-border-color: #{$active-border};
  --btn-border-color: #{$color};
  --btn-color: #{$color};
  --btn-hover-bg: #{$hover-background};
  --btn-hover-border-color: #{$hover-border};
  --btn-hover-color: #{$hover-color};
}