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

@mixin define-color-variables($title, $color) {
  --#{$title}-h: #{color.channel($color, "hue", $space: hsl)};
  --#{$title}-s: #{color.channel($color, "saturation", $space: hsl)};
  --#{$title}-l: #{color.channel($color, "lightness", $space: hsl)};
}

@mixin make-color($title) {
  --color: var(--#{$title});
  --color-hover: color-mix(in oklab, var(--#{$title}), #000 #{$link-shade-percentage});
  --color-disabled: hsl(from var(--#{$title}) h s l / #{$color-disabled-alpha});
}

@mixin make-background-color($title) {
  --background-color: var(--#{$title});
}

@mixin make-border-color($title) {
  --border-color: var(--#{$title});
}