.topbar {
    height: var(--topbar-height);
    padding: var(--topbar-padding);
    display: flex;
    justify-content: end;
    align-items: center;
    border-bottom: 1px solid var(--topbar-border-color);
    background-color: var(--topbar-background-color);
    gap: 20px;
}

.topbar-search-container {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
}

#search {
    flex: 0 1 500px;
}

.topbar-item {
    text-decoration: none;
    color: var(--topbar-item-text-color);
    cursor: pointer;
    font-size: 1rem;
}

.topbar-item:hover {
    color: var(--topbar-item-hover-text-color);
}

#user-name-dropdown {
    top: calc(calc(100% + calc(var(--topbar-padding) * 2)) - 2px);
    right: calc(-1 * var(--topbar-padding));
}