@use 'sass:map';
@use 'iro-sass/src/iro-sass' as iro;
@use '../props';
@use '../objects/heading.vars' as headings;

@mixin styles {
    /* stylelint-disable-next-line scss/dollar-variable-pattern */
    $-size-map: (
        xs: h6,
        sm: h5,
        md: h4,
        lg: h3,
        xl: h2,
        xxl: h1,
    );

    @include iro.bem-scope('headings') {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            display:               block;
            margin-block-start:    props.get(headings.$margin-bs);
            font-family:           props.get(headings.$font-family);
            font-weight:           props.get(headings.$font-weight);
            font-feature-settings: props.get(headings.$feature-settings);
            line-height:           props.get(headings.$line-height);
            text-transform:        none;
            letter-spacing:        normal;
            transform:             translateX(props.get(headings.$offset));
        }

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

        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes {
            #{map.get($-size-map, $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 iro.bem-modifier('display') {
            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes {
                #{map.get($-size-map, $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);
                }
            }
        }
    }
}