@import 'proto-ui.vusion/src/u-navbar-item.vue/module.css';

.root {
    composes: item from '../u-navbar.vue/module.css';
    height: $navbar-height;
    line-height: $navbar-height;
    padding: 0 10px;
}

.root + .root {
    margin-left: 30;
}

.root::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: currentColor;
}

.root:hover {
    color: $brand-primary;
}

.root:hover::after {
    transition: width 0.5s;
    width: 100%;
}

.root[selected] {
    color: $brand-primary;
}

.root[selected]::after {
    width: 100%;
}