@use "sass:string";
@use "sass:map";
@use "sass:list";
@use "screens";
@use "tokens" as *;
@use "responsive-units";

/// Gir deg responsive font-size, line-height og font-weight basert på navnet på typografien.
/// Du kan overstyre standardverdier ved å bruke `@content`. Dette er ment som en "escape hatch".
/// Ikke tukle med typografiskalaen med mindre du har en god grunn til det.
/// @param {"title" | "title-small" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "paragraph-large" | "paragraph-medium" | "paragraph-small" | "text-large" | "text-medium" | "text-small"} $style - Ønsket stilnavn.
/// @content Plasseres alltid etter mixinen har satt sine verdier, slik at du kan velge å overstyre deler av dem.
/// @example
///     .class {
///         @include jkl.text-style("body");
///     }
/// @example
///     .bold {
///         @include jkl.text-style("body") {
///             font-weight: jkl.$font-weight-bold;
///         }
///     }
@mixin text-style($style) {
    @if map.has-key($tokens, "textStyle", $style) {
        font: map.get($tokens, "textStyle", $style);
        @content;
    } @else {
        @error "No text style with the name #{$style} was found. Try one of these: #{map.keys($text-styles)}";
    }
}

/// Makes text bold without changing the space it takes up on screen.
/// Not perfect for all lengths of text, but close enough!
@mixin no-grow-bold {
    --jkl-icon-weight: 400;
    font-weight: $font-weight-bold;
    letter-spacing: -0.014em;
}

/// Definer egne variabler for fontstørrelse basert på design tokens fra :root. Kan enkelt brukes med `use-font-variables`.
/// @param {String} $name - Navn på variablen. Postfixes med `-font-size`, `-line-height`, og `-font-weight`.
/// @param {"title" | "title-small" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "body" | "small"} $level - Nivå i fontskalaen.
/// @output - CSS-variabler fro font-size, line-height, og font-weight.
/// @see use-font-variables
/// @example
///     @include jkl.declare-font-variables("jkl-accordion-title", "body");
/// @example
///     @include jkl.use-font-variables("jkl-accordion-title");
@mixin declare-font-variables($name, $level) {
    --#{$name}-font-size: var(--jkl-#{$level}-font-size);
    --#{$name}-line-height: var(--jkl-#{$level}-line-height);
    --#{$name}-font-weight: var(--jkl-#{$level}-font-weight);
}

/// Ta i bruk variabler du har laget med  `declare-font-variables`.
/// @param {String} $name - Navn på variablen. Postfixes med `-font-size`, `-line-height`, og `-font-weight`.
/// @output - CSS som setter font-size, line-height, og font-weight basert på CSS-variabler som følger standard format fra  `declare-font-variables`.
/// @see declare-font-variables
/// @example
///     @include jkl.use-font-variables("jkl-accordion-title");
/// @example
///     @include jkl.declare-font-variables("jkl-accordion-title", "body");
@mixin use-font-variables($name) {
    font-size: var(--#{$name}-font-size);
    line-height: var(--#{$name}-line-height);
    font-weight: var(--#{$name}-font-weight);
}

$_valid-font-family-values: (
    "Jokul",
    "Jokul Display",
    "Jokul Mono",
    "Jokul Icons"
);

/// Hjelper sette riktig remse med fallback-fonts for Jokul, Jokul Display, og Jokul Mono.
/// @param {"Jokul" | "Jokul Mono" | "Jokul Display" | "Jokul Icons"} $font - Regular justerer seg automatisk til italic og bold basert på font-style og font-weight. Display og Mono er adskilte fontfamilier.
/// @output - Ønsket fontfamilie med justert fallbackfont.
@mixin use-font-family($font) {
    @if not list.index($_valid-font-family-values, $font) {
        @error "#{$font} will not be used for font-family. Valid options are: #{$_valid-font-family-values}.";
    }

    @if $font == "Jokul Mono" {
        font-family: var(--jkl-font-family-mono);
    } @else if $font == "Jokul Display" {
        font-family: var(--jkl-font-family-display);
    } @else if $font == "Jokul Icons" {
        font-family: var(--jkl-font-family-icons);
    } @else {
        font-family: var(--jkl-font-family-regular);
    }
}