/* Horizontally scrollable navigation for profile and other content sections. */

.section-nav
{
    --section-nav-color: var(--rf-accent, darkorange);
    --section-nav-active-text: var(--section-nav-color);
    --section-nav-active-badge-bg: var(--section-nav-color);
    --section-nav-active-badge-color: #ffffff;
    --section-nav-gutter: var(--main-padding-x);
    --section-nav-link-padding-x: .8rem;
    --section-nav-edge-margin: calc(var(--section-nav-gutter) - var(--section-nav-link-padding-x));

    position: relative;
    overflow: hidden;
    margin-inline: calc(var(--section-nav-gutter) * -1);
    border-bottom: 1px solid var(--bs-border-color);
}

.modal .section-nav
{
    --section-nav-gutter: var(--bs-modal-padding, 1rem);
}

.section-nav--accent
{
    --section-nav-color: var(--rf-accent, darkorange);
}

.section-nav--complementary
{
    --section-nav-color: var(--rf-complementary, teal);
}

.section-nav-track
{
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-inline: var(--section-nav-edge-margin);
    scroll-snap-type: x proximity;
}

.section-nav-track::-webkit-scrollbar
{
    display: none;
}

.section-nav-link
{
    position: relative;
    padding: .55rem var(--section-nav-link-padding-x) .65rem;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: .5rem .5rem 0 0;
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}

.section-nav-link:first-child
{
    margin-inline-start: var(--section-nav-edge-margin);
}

.section-nav-link:last-child
{
    margin-inline-end: var(--section-nav-edge-margin);
}

.section-nav-link:hover
{
    color: var(--bs-body-color);
    background: transparent;
}

.section-nav-link:focus-visible
{
    outline: 2px solid var(--section-nav-color);
    outline-offset: -2px;
}

.section-nav-link.active
{
    color: var(--section-nav-active-text);
    background: transparent;
    font-weight: 600;
}

.section-nav-link.active::after
{
    content: '';
    position: absolute;
    right: .75rem;
    bottom: -1px;
    left: .75rem;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--section-nav-color);
}

.section-nav-count
{
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.section-nav-link.active .section-nav-count
{
    background: var(--section-nav-active-badge-bg);
    color: var(--section-nav-active-badge-color);
}

.profile-ranking-nav-layout
{
    display: flex;
    align-items: stretch;
}

.profile-ranking-nav-filters
{
    flex: 1 1 auto;
    min-width: 0;
}

.profile-ranking-nav-action
{
    z-index: 2;
    flex: 0 0 auto;
    margin-inline-start: auto;
    background: var(--bs-body-bg);
}

.profile-ranking-nav-action > .section-nav-link
{
    height: 100%;
    margin-inline-end: var(--section-nav-edge-margin);
}

@media (max-width: 767.98px)
{
    .section-nav
    {
        --section-nav-link-padding-x: .55rem;
        --section-nav-edge-margin: calc(var(--section-nav-gutter) - .25rem);

        gap: 0 !important;
    }

    .section-nav-link
    {
        flex: 0 0 auto;
        justify-content: center;
        white-space: nowrap;
    }

    .section-nav-link.active::after
    {
        inset-inline: .25rem;
    }
}