.nav-bar-button-container {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.2em;
    overflow: hidden;
    cursor: pointer;

    &:hover {
        background-color: var(--color-secondary);
    }

    &:global(.active) {
        background-color: var(--color-background);
    }

    .icon {
        height: 1.2em;
        margin-right: 0.6em;
        fill: var(--color-surfacelighter);
    }

    .label {
        flex: 1;
        height: 1.4em;
        line-height: 1.4em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--color-surfacelighter);
    }
}