@include namespace('header') {
    @include store((
        --colors: (
            --fg: prop(--colors --fg-hi, $global: true),
            --hover: (
                --fg: prop(--colors --fg-lo, $global: true),
            ),
            --active: (
                --fg: prop(--colors --fg-lo, $global: true),
            )
        ),
        --dims: (
            --height: 4rem,
            --pad-x: .6rem,
        )
    ));

    @include component(namespace()) {
        display:         flex;
        flex-direction:  row;
        justify-content: flex-start;
        height:          prop(--dims --height);

        @include element('item') {
            padding:         0 prop(--dims --pad-x);
            line-height:     prop(--dims --height);
            color:           prop(--colors --fg);
            text-decoration: none;

            &:hover {
                color: prop(--colors --hover --fg);
            }

            @include modifier('icon') {
                display:         flex;
                align-items:     center;
                justify-content: center;
                padding:         0;
                width:           prop(--dims --height);
            }

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

        @include element('icon') {
            width:  1.5em;
            height: 1.5em;
        }
    }
}