@include namespace('nav') {
    @include store((
        --dims: (
            --font-size: 15px,
            --pad-y: 1em,
            --pad-y-sm: .5em,
            --item: (
                --pad-x: 1em,
                --pad-x-sm: .75em,
                --pad-y: 1em,
                --pad-y-sm: .75em,
            ),
        ),
        --colors: (
            --logo: (
                --idle: (
                    --fg: prop(--colors --fg-hi, $global: true),
                ),
                --hover: (
                    --fg: prop(--colors --fg-lo, $global: true),
                )
            ),
            --item: (
                --idle: (
                    --fg: prop(--colors --fg, $global: true),
                ),
                --hover: (
                    --fg: prop(--colors --fg-lo, $global: true),
                ),
                --active: (
                    --fg: prop(--colors --fg-lo, $global: true),
                )
            )
        )
    ));

    @include component(namespace()) {
        display: flex;
        align-items: center;
        padding: prop(--dims --pad-y) 0;
        font-size: prop(--dims --font-size);

        @include element('logo') {
            display: inline-block;
            margin: 0;
            padding: prop(--dims --item --pad-y) 0;
            color: prop(--colors --logo --idle --fg);
            font-family: $font-fam--mono;
            text-decoration: none;

            &:link,
            &:visited {
                &:hover {
                    background-color: transparent;
                    color: prop(--colors --logo --hover --fg);
                }
            }
        }

        @include element('logo-symbol') {
            display: block;
            width:  $line-height * .9em;
            height: $line-height * 1em;
        }

        @include element('item') {
            display: inline-block;
            margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
            padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
            color: prop(--colors --item --idle --fg);
            text-decoration: none;
            text-transform: uppercase;

            &:hover {
                background-color: transparent;
                color: prop(--colors --item --hover --fg);
                text-decoration: underline;
            }

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

        @include media('<=sm') {
            padding: prop(--dims --pad-y-sm) 0;

            @include element('logo', 'item') {
                padding-top: prop(--dims --item --pad-y-sm);
                padding-bottom: prop(--dims --item --pad-y-sm);
            }

            @include element('item') {
                margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
                margin-left: prop(--dims --item --pad-x-sm);
                padding-right: prop(--dims --item --pad-x-sm);
                padding-left: prop(--dims --item --pad-x-sm);
            }
        }
    }
}