/* Section Navigator */

.section-nav {
    top: var(--nys-space-600);
    margin-top: var(--nys-space-250);
    margin-bottom: 0;
    font-size: var(--nys-font-size-ui-md);
    overflow: hidden;
}

.section-nav__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    border: solid var(--nys-border-width-md) var(--nys-color-neutral-50);
    border-radius: var(--nys-radius-md);
}

/* Remove border from nested tables */
li > .section-nav__list {
    border: none;
}

/* Section Nav Item */
.section-nav__item {
    position: relative;
    margin: 0;
}

    .section-nav__item:first-child {
        border-top: none;
    }

/* Active (current) Section */

.section-nav__item--active {
    font-weight: bold;
    background-color: var(--nys-color-theme-faint);
}

.section-nav__item--active-section {
    font-weight: bold;
    background-color: var(--nys-color-theme-faint);
}

    /* Active border with ::after pseudo element */
    .section-nav__item--active-section::after {
        content: "";
        background: var(--nys-color-theme-mid);
        width: var(--nys-border-width-lg);
        height: 100%;
        left: calc(var(--nys-border-width-md) * -1);
        top: 0;
        position: absolute;
    }

.section-nav__list > .section-nav__item:first-child.section-nav__item--active-section:first-child::after {
    border-top-left-radius: var(--nys-radius-md);
    top: calc(var(--nys-border-width-md) * -1);
    height: calc(100% + var(--nys-border-width-md));
}

.section-nav__list > .section-nav__item:last-child.section-nav__item--active-section:last-child::after {
    border-bottom-left-radius: var(--nys-radius-md);
    bottom: var(--nys-border-width-md);
    height: calc(100% + var(--nys-border-width-md));
}

/* Hide nested section nav children when parent not active */

.section-nav__item:not(.section-nav__item--active-section) > .section-nav__list {
    display: none;
}

/* Section Nav Link */

.section-nav__link {
    display: block;
    text-decoration: none;
    color: var(--nys-color-ink);
    padding: var(--nys-space-150) var(--nys-space-200);
    border-bottom: solid var(--nys-border-width-sm) var(--nys-color-neutral-50);
    line-height: var(--nys-font-lineheight-2xs);
}

    .section-nav__link:hover,
    .section-nav__link:focus {
        color: var(--nys-color-link);
        text-decoration: underline;
        cursor: pointer;
    }

    .section-nav__link:active {
        color: var(--nys-color-link-strong);
    }

.section-nav__list > .section-nav__item:last-child > .section-nav__list > .section-nav__item:last-child > .section-nav__link {
    border-bottom-width: 0;
}

.section-nav__list .section-nav__list .section-nav__link {
    font-size: var(--nys-font-size-ui-sm);
    padding-left: var(--nys-space-400);
}

/* Section Nav toggle functionality (modifies accordion) */

.section-nav__toggle[aria-expanded="true"] {
    border-radius: var(--nys-radius-md) var(--nys-radius-md) 0 0;
}

.section-nav__list[aria-expanded="true"] {
    display: block;
    border-top: none;
    border-radius: 0 0 var(--nys-radius-md) var(--nys-radius-md);
}

/* Hide section nav on mobile, show toggle button */
@media (max-width: 1023px) {

    /* .section-nav__list {
        display: none;
    } */
    .section-nav__toggle {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .section-nav {
        margin-top: var(--nys-space-600);
    }

    .section-nav__toggle {
        display: none;
    }

    .section-nav__list {
        display: block;
    }
}