@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;

@forward 'heading.vars';
@use 'heading.vars' as vars;

@mixin styles {
    @include materialize-at-root(meta.module-variables('vars'));

    @include bem.object('heading') {
        display:               block;
        margin-block-start:    props.get(vars.$margin-bs);
        font-family:           props.get(vars.$font-family);
        font-weight:           props.get(vars.$font-weight);
        font-feature-settings: props.get(vars.$feature-settings);
        line-height:           props.get(vars.$line-height);
        text-transform:        none;
        letter-spacing:        normal;
        transform:             translateX(props.get(vars.$offset));

        & + & {
            margin-block-start: props.get(vars.$margin-bs-sibling);
        }

        @include bem.elem('highlight') {
            background-image: linear-gradient(to top,
            transparent               .05em,
            props.get(vars.$bg-color) .05em,
            props.get(vars.$bg-color) .5em,
            transparent               .5em);
        }

        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
            @include bem.modifier($mod) {
                font-family:           props.get($font-family);
                font-size:             props.get($font-size);
                font-weight:           props.get($font-weight);
                font-feature-settings: props.get($feature-settings);
                line-height:           props.get($line-height);
                letter-spacing:        props.get($letter-spacing);
            }
        }

        @include bem.modifier('display') {
            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
                @include bem.modifier($mod) {
                    font-family:           props.get($font-family);
                    font-size:             props.get($font-size);
                    font-weight:           props.get($font-weight);
                    font-feature-settings: props.get($feature-settings);
                    line-height:           props.get($line-height);
                    letter-spacing:        props.get($letter-spacing);
                }
            }
        }
    }
}