//! These mixins allow the abstraction of the colors used by elements by having them use named "mixins".
//!
//! For example, the body's foreground color and the buttons' background color might use the "foreground" group, whose color may be dynamically changed at the time of the page viewing.
//!
//! Color mixins can only be defined via HSL due to the absence of color interpolation functions in the CSS Color Level 4 Specification.


/// Set the CSS variables of a certain color group to the given values.
.create-hsl-group(@name; @hue; @saturation; @lightness) {
    --bhsl-@{name}-hue: @hue;
    --bhsl-@{name}-saturation: @saturation;
    --bhsl-@{name}-lightness: @lightness;
}


/// Set the CSS variables of a certain color group to the ones of another.
.map-hsl-group(@to; @from) {
    --bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue");
    --bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation");
    --bhsl-@{to}-lightness: var(~"--bhsl-@{from}-lightness");
}


/// Set a CSS property to the color obtained from the CSS variables of the given color group.
///
/// The color may be altered via the @hue-changes, @saturation-changes and @lightness-changes parameters, which specify a string calculation to be appended to the CSS variables in a calc function.
///
/// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on.
.hsl-group(@name) {
    @c: hsl(
        var(~"--bhsl-@{name}-hue")
        var(~"--bhsl-@{name}-saturation")
        var(~"--bhsl-@{name}-lightness")
    );
}
.hsl-group(@name; @alpha) {
    @c: hsl(
        var(~"--bhsl-@{name}-hue")
        var(~"--bhsl-@{name}-saturation")
        var(~"--bhsl-@{name}-lightness")
        / @alpha
    );
}
.hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) {
    @c: hsl(
        calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}")
        calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
        calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
        / @alpha
    );
}
