@use 'iro-sass/src/index' as iro;
@use 'iro-design/src/functions' as fn;
@use 'iro-design/src/mixins' as mx;

@include iro.props-namespace('subheader') {
    @include iro.props-store((
        --colors: (
            --fg:     fn.global-color(--fg-hi),
            --strong: fn.global-color(--fg-lo),
        ),
    ), 'colors');
    
    @include iro.bem-component(iro.props-namespace()) {
        @include mx.set-font(--headline, (
            --line-height: 1.4,
            --size:        fn.global-dim(--font-size --400),
            --weight:      350
        ));
    
        color: fn.color(--fg);

        > * {
            display: inline;
            margin:  0;
        }

        strong {
            color:       fn.color(--strong);
            font-weight: 500;
        }

        @include iro.bem-elem('title') {
            margin-right:   .2em;
            font-size:      inherit;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
    }
}