:root {
    --rt-nav-bg: var(--rt-container-header-bg);
    --rt-nav-border: var(--rt-border-subtle);
    --rt-nav-color: var(--rt-text-primary);
    --rt-nav-color-active: var(--color-purple-500);
    --rt-nav-bg-active: var(--rt-bg-subtle);
    --rt-nav-bg-hover: linear-gradient(to bottom, var(--color-gray-150), var(--color-gray-250));
}

.nav {
    display: flex;
    background: var(--rt-nav-bg);
    border: 1px solid var(--rt-nav-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    border-radius: 15px;
}

.nav__item {
    border-right: 1px solid var(--rt-nav-border);
}

.nav__link {
    box-sizing: border-box;
    display: flex;
    height: 41px;
    padding: 0 clamp(12px, 2.5vw, 24px);
    align-items: center;
    font-weight: bold;
    font-size: clamp(12px, 3vw, 16px);
    text-decoration: none;
}

.nav__link, .nav__link:visited {
    color: var(--rt-nav-color);
}

.nav__link:hover {
    background: var(--rt-nav-bg-hover);
}

.nav__link.active {
    position: relative;
    background-color: var(--rt-nav-bg-active);
}

.nav__link.active, .nav__link.active:visited {
    color: var(--rt-nav-color-active);
}

.nav__link.active:hover {
    background-color: var(--rt-nav-bg-active);
}

@media (max-width: 600px) {
    .nav__item {
        flex: 1;
    }

    .nav__link {
        justify-content: center;
    }
}