@import './../../../style/variables.css';

:root {
    --navunit: 40px;
}
 
@component Navbar {
    color: var(--mineshaft);
    lost-flex-container: row;
    line-height: var(--navunit);
    background-color: var(--alabaster);

    @descendent head {
        position: absolute;
        width: calc( var(--navunit)*2 );
        height: var(--navunit);
        text-align: center;
        & .action{
            cursor: pointer;
            & .fa{
                margin-right: 8px;
            }
        }
    }

    @descendent body {
        width: 100%;
        height: var(--navunit);
        & .title {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
        }
    }
}