@use 'iro-sass/src/index' as iro;
@use 'iro-design/src/functions' as fn;
@use 'include-media/dist/include-media' as media;

@include iro.props-namespace('header') {
    @include iro.props-store((
        --colors: (
            --bg: fn.global-color(--bg-hi),
            --fg: fn.global-color(--fg-lo),
            --hover: (
                --bg: fn.global-color(--fg-lo),
                --fg: fn.global-color(--bg-hi),
            ),
            --active: (
                --fg: fn.global-color(--fg-lo),
            )
        )
    ), 'colors');

    @include iro.props-store((
        --dims: (
            --height: 4rem,
            --icon:   1.5rem,
            --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
            --gap:    2px,
        )
    ), 'dims');

    @include iro.props-store((
        --colors: (
            --bg: fn.global-color(--obj-hi),
        )
    ), 'colors-dark');

    @include iro.props-store((
        --dims: (
            --height: 3.4rem,
        )
    ), 'sm');

    @include iro.bem-component(iro.props-namespace()) {
        display: flex;
        width:   0;
        height:  fn.dim(--height);
        padding: fn.dim(--gap);
        gap:     fn.dim(--gap);

        @include iro.bem-elem('item') {
            padding:          0 fn.dim(--pad-x);
            transition:       background-color .2s, color .2s, border-left-color .2s;
            background-color: fn.color(--bg);
            color:            fn.color(--fg);
            line-height:      fn.dim(--height);
            text-decoration:  none;
            white-space:      nowrap;

            &:hover,
            &:focus {
                border-left-color: fn.color(--hover --bg);
                background-color:  fn.color(--hover --bg);
                color:             fn.color(--hover --fg);
            }

            @include iro.bem-modifier('icon') {
                display:         flex;
                align-items:     center;
                justify-content: center;
            }

            @include iro.bem-modifier('active') {
                color:       fn.color(--active --fg);
                font-weight: bold;
            }
        }

        @include iro.bem-elem('icon') {
            width:  fn.dim(--icon);
            height: fn.dim(--icon);
        }

        @include iro.bem-modifier('fixed') {
            position: fixed;
        }

        @include media.media('>=lg') {
            position:      sticky;
            z-index:       100;
            top:           0;
            margin-bottom: calc(-.75 * #{fn.dim(--height)});

            @include iro.bem-modifier('fixed') {
                position: fixed;
            }
        }

        @media print {
            display: none;
        }
    }
}