//@use "@fontsource-variable/roboto-flex";                    // Defaults to weight axis
//@use "@fontsource-variable/roboto-flex/wght.css";           // Use weight axis
//@use "@fontsource-variable/roboto-flex/full.css";           // Use all axis (not working for some axis)
//@use "@fontsource-variable/roboto-flex/opsz.css";           // Use optical size axis
//@use "@fontsource-variable/roboto-flex/wdth.css";           // Use width axis
//@use "@fontsource-variable/roboto-flex/slnt.css";           // Use [no idea] axis (slant, italic? - not working)

@use "color" as color;

// maybe some is still in use **************************************************
@use 'sass:meta';
@use 'sass:list';
@use 'sass:map';

// Configurable with importing.
// Example: @use "../styles/typography" with ( $font-family-base: "some", "custom", "fonts")

$font-family-base: var(--nxc-font-family)!default;
$font-family-regular: $font-family-base !default;
$font-family-medium: $font-family-base !default;
$font-family-light: $font-family-base !default;
$font-family-bold: $font-family-base !default;
$default-font-sizes: 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 56px;
$font-sizes: $default-font-sizes !default;
$rem-baseline: 16px !default;
$default-families: base, regular, medium, light, bold;
$font-families: $default-families !default;
$default-font-families-mapping: (
    list.nth($font-families, 1): $font-family-base,
    list.nth($font-families, 2): $font-family-regular,
    list.nth($font-families, 3): $font-family-medium,
    list.nth($font-families, 4): $font-family-light,
    list.nth($font-families, 5): $font-family-bold,
);
$font-families-mapping: $default-font-families-mapping !default;
$color-prefix: font-color- !default;
$default-font-colors: medium, regular, light, disabled, error, brand;
$font-colors: $default-font-colors !default;

@use 'sass-rem/rem' with (
    $baseline: $rem-baseline,
    $fallback: true
);

// Font property mixins

@mixin font-size($size, $use-sizes: $font-sizes) {
    @if not list.index($use-sizes, $size) {
        @error "#{$size} is not a valid font-size. Expected one of #{$use-sizes}.";
    }
    @include rem.convert(font-size, $size);
}

@mixin font-family($family, $use-family-mapping: $font-families-mapping) {
    $font-family: map.get($use-family-mapping, $family);
    @if not $font-family {
        @error "#{$family} is not a valid font family variant. Expected one of #{$use-family-mapping}.";
    }
    font-family: $font-family;
}

@mixin font-color($color, $use-font-colors: $font-colors) {
    @if not list.index($use-font-colors, $color) {
        @error "#{$color} is not a valid font color variant. Expected one of #{$use-font-colors}.";
    }
    color: var(--#{$color-prefix}#{$color});
}

// Predefined font variants
// defined by variant name and list of (family, size, color) tuples
$font-variants: (
    h1: (
        medium,
        56px,
        medium,
    ),
    h2: (
        medium,
        24px,
        medium,
    ),
    h3: (
        medium,
        20px,
        medium,
    ),
    h4: (
        medium,
        18px,
        medium,
    ),
    h5: (
        medium,
        16px,
        medium,
    ),
    h6: (
        medium,
        14px,
        medium,
    ),
    body: (
        regular,
        14px,
        regular,
    ),
    base: (
        regular,
        12px,
        regular,
    ),
    small: (
        regular,
        10px,
        regular,
    ),
);

@mixin _create_font_variant($family, $size, $color) {
    @include font-family($family, $default-font-families-mapping);
    @include font-size($size, $default-font-sizes);
    @include font-color($color, $default-font-colors);
}

@mixin variant($variant) {
    $font-variant: map.get($font-variants, $variant);

    @if not $font-variant {
        @error "#{$variant} is not a valid font variant. Expected one of #{$font-variants}.";
    }

    @include _create_font_variant($font-variant...);
}

@mixin text-color-modifiers {
    @each $color in $default-font-colors {
        .text-color-#{$color} {
            @include font-color($color, $default-font-colors);
        }
    }
}

@mixin text-size-modifiers {
    @each $size in $default-font-sizes {
        .text-size-#{$size} {
            @include font-size($size, $default-font-sizes);
        }
    }
}

@mixin text-family-modifiers {
    @each $family in $default-families {
        .text-family-#{$family} {
            @include font-size($family, $default-families);
        }
    }
}

@mixin text-modifiers {
    @include text-color-modifiers;
    @include text-size-modifiers;
    @include text-family-modifiers;
}

@function offset-color-by($color, $offset) {
    @return color-mix(
        in hsl,
        var(--color-mix-base) calc($offset * var(--step-size)),
        $color
    );
}

@mixin default-typography {
    :host {
        @include variant(body);
    }
    [disabled] {
        @include font-color(disabled, $default-font-colors);
    }

    @for $i from 1 through 6 {
        $variant-key: nth(map.keys($font-variants), $i);

        #{$variant-key} {
            @include variant($variant-key);
        }
    }

    a {
        @include font-color(brand, $default-font-colors);
        text-decoration: underline;
        cursor: pointer;

        &:visited {
            @include font-color(regular, $default-font-colors);
        }
    }

}

@mixin branded-background {
    background-color: color.$brand;
    color: color.$brandContrast;
}

@mixin defaults {
    @include default-typography;
    @include text-modifiers;
}
// ^^^ maybe some is still in use **********************************************

@font-face {
    font-display: swap;
    font-family: 'RobotoFlex';
    font-style: normal;
    font-weight: 100 1000;
    font-stretch: 100%;
    src: url('./fonts/roboto-flex/roboto-flex-variable.woff2') format('woff2-variations');
}

@mixin font($font-size, $line-height, $font-weight) {
    font-size: $font-size;
    line-height: $line-height;
    font-family: var(--nxc-font-family);
    font-optical-sizing: var(--nxc-font-optical-sizing);
    font-variation-settings:
        "slnt" var(--nxc-font-slant),
        "GRAD" var(--nxc-font-grade),
        "XOPQ" var(--nxc-font-thick-stroke),
        "YOPQ" var(--nxc-font-thin-stroke),
        "wdth" var(--nxc-font-width);
    text-rendering: var(--nxc-font-rendering);

    @if $font-weight == 'medium' {
        font-weight: var(--nxc-medium-font-weight);
    } @else if $font-weight == 'regular' {
        font-weight: var(--nxc-regular-font-weight);
    }
}

@mixin heading56medium {
    @include font(56px, 54px, 'medium');
}
@mixin heading24medium {
    @include font(24px, 30px, 'medium');
}
@mixin heading20medium {
    @include font(20px, 25px, 'medium');
}
@mixin heading18medium {
    @include font(18px, 22.5px, 'medium');
}
@mixin text16regular {
    @include font(16px, 24px, 'regular');
}
@mixin text16medium {
    @include font(16px, 24px, 'medium');
}
@mixin text14regular {
    @include font(14px, 21px, 'regular');
}
@mixin text14medium {
    @include font(14px, 21px, 'medium');
}
@mixin text12regular {
    @include font(12px, 15.6px, 'regular');
}
@mixin text12medium {
    @include font(12px, 15.6px, 'medium');
}
@mixin text10regular {
    @include font(10px, 13px, 'regular');
    letter-spacing: 0.3px;
}

:host {
    --nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);
    --nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;
    --nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);
    --nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);
    --nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);
    --nxc-font-grade: var(--nxc-font-grade, 0);
    --nxc-font-width: var(--nxc-font-width, 100);
    --nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);
    --nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);
    --nxc-font-slant: var(--nxc-font-slant, 0);
    --nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision);
}
