@include namespace('footer') {
    @include store((
        --colors: (
            --fg:     prop(--colors --obj, $global: true),
            --border: prop(--colors --obj-hi, $global: true),
        )
    ));

    @include component(namespace()) {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        height:          prop(--dims --outer, $global: true);
        padding-right:   prop(--dims --outer, $global: true);
        font-size:       1 / 16 * 15em;

        @include element('content') {
            width:        100%;
            height:       100%;
            margin-top:   -1px;
            margin-right: prop(--container --dims --pad-x, $global: true);
            margin-left:  prop(--container --dims --pad-x, $global: true);
            border-top:   1px solid prop(--colors --border);
            color:        prop(--colors --fg);
            line-height:  prop(--dims --outer, $global: true);
        }
    }
}