@use "sass:string";
@use "sass:color";
@use "sass:list";

/// Brukes til å sette CSS-variabler for bruk i lyst tema, typisk tekst- og
/// bakgrunnsfarge. Se også dark-mode-variables.
/// @content Settes på :root hvis brukeren har lyst tema, og på [data-theme="light"]
/// @see dark-mode-variables
/// @see forced-colors-mode
@mixin light-mode-variables {
    @media screen and (prefers-color-scheme: light) {
        :root {
            @content;
        }
    }

    [data-theme="light"] {
        @content;
    }
}

/// Brukes til å sette CSS-variabler for bruk i mørkt tema, typisk tekst- og
/// bakgrunnsfarge. Se også light-mode-variables.
/// @content Settes på :root hvis brukeren har mørkt tema, og på [data-theme="dark"]
/// @see light-mode-variables
/// @see forced-colors-mode
@mixin dark-mode-variables {
    @media screen and (prefers-color-scheme: dark) {
        :root {
            @content;
        }
    }

    [data-theme="dark"] {
        @content;
    }
}

@mixin data-size-variables($size: null) {
    @if $size {
        [data-size="#{$size}"] {
            @content;
        }
    }

    @else {
        :root,
        [data-size] {
            @content;
        }
    }
}

/// Brukes til å overstyre stiler for bruk i Forced Colors-modus.
/// Her vil du typisk legge til fallbacks for manglende box-shadow,
/// som for eksempel `outline: revert;` og `border: revert;`,
/// og eventuelle andre problemer som oppstår for brukere av høykontrasttemaer.
/// Se https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
/// og https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/
/// @content Innholdet plasseres i et media query som matcher hvis høykontrasttema er i bruk
/// @see forced-colors-svg-fallback
/// @see light-mode-variables
/// @see dark-mode-variables
@mixin forced-colors-mode {
    @media screen and (forced-colors: active) {
        @content;
    }
}

$_valid-forced-colors-text-values: (
    "Canvas",
    "CanvasText",
    "LinkText",
    "GrayText",
    "Highlight",
    "HighlightText",
    "ButtonFace",
    "ButtonText"
);

/// Hjelper for å sette riktig farge på SVGer i Chrome for brukere med Forced Color-modus.
/// Se https://melanie-richards.com/blog/currentcolor-svg-hcm/ for detaljer
/// @param {"Canvas" | "CanvasText" | "LinkText" | "GrayText" | "Highlight" | "HighlightText" | "ButtonFace" | "ButtonText"} $stroke - Definer hvilken systemfarge som skal brukes til stroke. Fargene har en forventet betydning for brukeren. Følg den semantiske betydningen til fargen, ikke velg fargen du selv synes "ser best ut".
/// @param {"Canvas" | "CanvasText" | "LinkText" | "GrayText" | "Highlight" | "HighlightText" | "ButtonFace" | "ButtonText"} $fill [null] - Som $stroke, bare for fill. Valgfri.
/// @output Setter angitte verdier på nåværende selector og dens svg og path children, inni et media query som treffer dersom forced-colors er aktiv.
@mixin forced-colors-svg-fallback($stroke, $fill: null) {
    @if not list.index($_valid-forced-colors-text-values, $stroke) {
        @error "#{$stroke} will not be used for stroke in Forced Color mode. Valid options are: #{$_valid-forced-colors-text-values}. Use the correct color for your given context.";
    }

    @if $fill and not list.index($_valid-forced-colors-text-values, $fill) {
        @error "#{$fill} will not be used for fill in Forced Color mode. Valid options are: null, #{$_valid-forced-colors-text-values}. Use the correct color for your given context.";
    }

    @media screen and (forced-colors: active) {
        stroke: $stroke;
        fill: $fill;

        & svg,
        & path {
            stroke: $stroke;
            fill: $fill;
        }
    }
}

/// Jøkul har en automatisk overstyring av animasjoner og transitions i denne modusen,
/// men om du trenger å gjøre noe ekstra for brukere som ønsker redusert bevegelse
/// kan du bruke denne mixinen for å plassere CSS inni riktig media query.
/// @content Innholdet plasseres i et media query som matcher hvis brukeren foretrekker redusert bevegelse
@mixin prefers-reduced-motion {
    @media screen and (prefers-reduced-motion: reduce) {
        @content;
    }
}