.nav-bar {
    --nav-bar-height: 44px;
    font-size: 16px;

    .nav-tabs-container {
        .nav-tab-button {
            &:nth-child(n+5) {
                display: none;
            }
        }
    }
}

.nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: var(--nav-bar-height);
    background-color: var(--color-secondarydark);
    overflow: hidden;

    .back-button {
        flex: none;
        max-width: calc(var(--nav-bar-height) * 5);
        height: var(--nav-bar-height);
    }

    .nav-tabs-container {
        flex: none;
        display: flex;
        flex-direction: row;

        .nav-tab-button {
            flex: none;
            max-width: calc(var(--nav-bar-height) * 3.5);
            height: var(--nav-bar-height);
        }
    }

    .title {
        flex: 1;
        font-size: 1.1em;
        height: 1.4em;
        line-height: 1.4em;
        padding: 0 0.6em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-style: normal;
        font-weight: normal;
        color: var(--color-surfacelighter);
    }

    .search-bar {
        flex: 1;
        height: var(--nav-bar-height);
    }

    .user-menu {
        flex: none;
        width: var(--nav-bar-height);
        height: var(--nav-bar-height);
    }
}