@include namespace('header') {
    @include store((
        --colors: (
            --bg:     prop(--colors --bg-lo, $global: true),
            --fg:     prop(--colors --fg-lo, $global: true),
            --border: prop(--colors --bg, $global: true),
            --hover: (
                --bg: prop(--colors --fg-lo, $global: true),
                --fg: prop(--colors --bg-hi, $global: true),
            ),
            --active: (
                --fg: prop(--colors --fg-lo, $global: true),
            )
        ),
        --dims: (
            --height: 4rem,
            --icon:   1.5rem,
            --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))),
        )
    ));

    @include store((
        --colors: (
            --bg: prop(--colors --bg-hi, $global: true),
        )
    ), 'light');

    @include component(namespace()) {
        height:  prop(--dims --height);

        @include element('nav') {
            display:    inline-flex;
            height:     100%;
            box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
        }

        @include element('item') {
            padding:          0 prop(--dims --pad-x);
            line-height:      prop(--dims --height);
            color:            prop(--colors --fg);
            background-color: prop(--colors --bg);
            text-decoration:  none;
            transition:       background-color .2s, color .2s, border-left-color .2s;

            @include next-twin-element {
                border-left: 1px solid prop(--colors --border);
            }

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

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

            @include modifier('active') {
                font-weight: bold;
                color:       prop(--colors --active --fg);
            }
        }

        @include element('icon') {
            width:  prop(--dims --icon);
            height: prop(--dims --icon);
        }
    }
}