@use "sass:color";
@use "./../variables" as *;
@use "./../functions" as *;

@mixin button-variant(
  $main,
  $value,
  $color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l),
  $color-disabled: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l, 75%)
) {
  --button-color: #{$color};
  --button-hover-color: #{$color};
  --button-focus-color: #{$color};
  --button-active-color: #{$color};
  --button-disabled-color: #{$color-disabled};
  --button-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
  --button-hover-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-hover-percentage});
  --button-focus-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-hover-percentage});
  --button-active-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-hover-percentage});
  --button-disabled-border-color: color-mix(in oklab, var(--#{$main}), hsl(0 0% 0% / 5%) #{$border-shade-percentage});
  --button-background: var(--#{$main});
  --button-hover-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
  --button-focus-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
  --button-active-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
  --button-disabled-background: hsl(from var(--#{$main}) h s l / #{$button-disabled-border-alpha});
  --button-box-shadow: 0 0 0 0.125em transparent;
  --button-hover-box-shadow: 0 0 0 0.125em transparent;
  --button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
  --button-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
  --button-disabled-box-shadow: 0 0 0 0.125em transparent;
}

@mixin button-variant-outline(
  $main,
  $value,
  $color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l),
  $border-color: var(--#{$main}),
  $border-color-disabled: color-mix(in oklab, var(--#{$main}), hsl(0 0% 0% / 5%) #{$border-shade-percentage})
) {
  --button-color: var(--#{$main});
  --button-hover-color: #{$color};
  --button-focus-color: #{$color};
  --button-active-color: #{$color};
  --button-disabled-color: hsl(from var(--#{$main}) h s l / #{$button-disabled-border-alpha});
  --button-border-color: #{$border-color};
  --button-hover-border-color: #{$border-color};
  --button-focus-border-color: #{$border-color};
  --button-active-border-color: #{$border-color};
  --button-disabled-border-color: #{$border-color-disabled};
  --button-background: #{$button-outline-background};
  --button-hover-background: var(--#{$main});
  --button-focus-background: var(--#{$main});
  --button-active-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
  --button-disabled-background: transparent;
  --button-box-shadow: 0 0 0 0.125em transparent;
  --button-hover-box-shadow: 0 0 0 0.125em transparent;
  --button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
  --button-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
  --button-disabled-box-shadow: 0 0 0 0.125em transparent;
}

@mixin button-variant-link($color) {
  --button-color: var(--#{$color});
  --button-hover-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
  --button-focus-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
  --button-active-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
  --button-disabled-color: hsl(from var(--#{$color}) h s l / #{$color-disabled-alpha});
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  --button-focus-border-color: transparent;
  --button-active-border-color: transparent;
  --button-disabled-border-color: transparent;
  --button-background: transparent;
  --button-hover-background: hsl(from var(--#{$color}) h s l / #{$button-hover-background-alpha});
  --button-focus-background: hsl(from var(--#{$color}) h s l / #{$button-hover-background-alpha});
  --button-active-background: hsl(from var(--#{$color}) h s l / #{$button-hover-background-alpha});
  --button-disabled-background: transparent;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-active-box-shadow: none;
  --button-disabled-box-shadow: none;
}

@mixin button-variant-unstyled($color) {
  --button-color: var(--#{$color});
  --button-hover-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
  --button-focus-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
  --button-active-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
  --button-disabled-color: hsl(from var(--#{$color}) h s l / #{$color-disabled-alpha});
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  --button-focus-border-color: transparent;
  --button-active-border-color: transparent;
  --button-disabled-border-color: transparent;
  --button-background: transparent;
  --button-hover-background: transparent;
  --button-focus-background: transparent;
  --button-active-background: transparent;
  --button-disabled-background: transparent;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-active-box-shadow: none;
  --button-disabled-box-shadow: none;
  --button-padding-x: 0;
  --button-padding-y: 0;
  --button-small-padding-x: 0;
  --button-small-padding-y: 0;
  --button-large-padding-x: 0;
  --button-large-padding-y: 0;
  --button-hover-text-decoration: underline;
  --button-border-radius: 0;
  --button-small-border-radius: 0;
  --button-large-border-radius: 0;
}