@use "sass:list";
@use "sass:map";
@use "sass:string";
@use "../jkl/screens";
@use "../jkl/spacing";

@function get-class-name($spacing-combination) {
    $class-name: "jkl-spacing";

    @each $spacing in $spacing-combination {
        $class-name: "#{$class-name}-#{$spacing}";
    }

    @return $class-name;
}

@layer jokul.theme {
    // Sett CSS-variabler for alle spacing-kombinasjoner
    :root {
        @each $spacing-combination in spacing.$combinations {
            $_step: list.nth($spacing-combination, 1);

            --#{get-class-name($spacing-combination)}: #{map.get(
                spacing.$spacing,
                $_step
            )};
        }

        @include screens.from-medium-device {
            @each $spacing-combination in spacing.$combinations {
                @if list.length($spacing-combination) > 1 {
                    $_step: list.nth($spacing-combination, 2);

                    --#{get-class-name($spacing-combination)}: #{map.get(
                        spacing.$spacing,
                        $_step
                    )};
                }
            }
        }

        @include screens.from-large-device {
            @each $spacing-combination in spacing.$combinations {
                @if list.length($spacing-combination) > 2 {
                    $_step: list.nth($spacing-combination, 3);

                    --#{get-class-name($spacing-combination)}: #{map.get(
                        spacing.$spacing,
                        $_step
                    )};
                }
            }
        }
    }
}