.root {
    user-select: none;
    height: $navbar-height;
    /* display: flex;
    justify-content: space-between; */
}

.left {
    float: left;
    margin-right: 40px;
}

.middle {
    /* flex: auto; */
    margin: 0 40px;
}

.root[alignment="center"] .middle {
    text-align: center;
}

.root[alignment="right"] .middle {
    text-align: right;
}

.right {
    float: right;
    margin-left: 40px;
}

.root[color="inverse"] {
    background-color: $brand-primary;
}

.root[color="inverse"] .item {
    color: white;
}

.root[color="inverse"] .item:hover {
    color: white;
}

.root[color="inverse"] .item[selected] {
    color: white;
}