@use "../../jkl";

// Hver `size` mapper til en komplett tekst-stil fra `$text-styles` i
// `styles/jkl/_typography.scss` — både font-size, line-height, font-weight
// og ikon-variabler settes via `jkl.text-style`-mixinen.
$_size-styles: (
    "xs": "heading-5",
    "s": "heading-4",
    "m": "heading-3",
    "l": "heading-2",
    "xl": "heading-1",
);

@layer jokul.components {
    @each $name, $style in $_size-styles {
        :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size="#{$name}"] {
            margin-block: 0;

            @include jkl.text-style($style);
        }
    }

    // Skjema-elementer skal ikke arve heading sine fete font-weight og
    // tight line-height. De er tekst som beskriver et skjemafelt eller en
    // gruppe, ikke strukturelle overskrifter.
    :is(label, legend)[data-text-size] {
        font-weight: var(--jkl-font-weight-normal);
        line-height: var(--jkl-line-height-relaxed);
    }

    // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
    :is(label)[data-text-size] {
        display: block;
        margin-block-end: var(--jkl-spacing-8);
    }

    :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size][data-center] {
        text-align: center;
    }
}