@layer blocks {
    .jumplinks-container {
        --section-spacing: 0;

        background-color: var(--color-white);
        box-shadow: 2px 1px 20px rgb(from var(--color-black) r g b / 5%);
        margin-block: 0;

        &:has(.jumplinks.horizontal) {
            position: sticky;
            top: var(--header-height);
            z-index: 1;
        }
    }

    .jumplinks-title {
        --max-width: 100%;
        --container-gutter: 0;

        background-color: var(--color-black);
        block-size: 0;
        display: none;
        overflow: hidden;
        transition: block-size var(--transition-time) ease-in-out,
            display var(--transition-time) allow-discrete;

        &[aria-hidden='false'] {
            block-size: auto;
            display: block;

            @starting-style {
                block-size: 0;
            }
        }

        & p {
            color: var(--color-white);
            font-size: var(--body-font-size-xxs);
            font-weight: 700;
            letter-spacing: 0.15em;
            padding: 7px 15px;
            text-transform: uppercase;
        }
    }

    .jumplinks.horizontal {
        --jumplinks-display: flex;

        & a {
            display: inline-block;
            font-weight: 700;
            line-height: 1;
            isolation: isolate;
            padding-block: 29px;
            position: relative;
            text-decoration: none;

            &:hover {
                --nav-underline-scale: 1;
            }

            &::after {
                background-color: var(--color-red-1);
                block-size: 5px;
                content: '';
                inset: auto 0 0;
                position: absolute;
                scale: 1 var(--nav-underline-scale, 0);
                transform-origin: center bottom;
                transition: scale var(--transition-time) ease-in-out;
            }
        }
    }

    .jumplinks-list {
        display: var(--jumplinks-display, grid);

        .horizontal & {
            --link-color: var(--color-black);

            gap: 85px;
        }
    }

    .jumplinks-label {
        align-items: center;
        display: flex;
        font-size: var(--body-font-size-l);
        font-weight: 700;
        inline-size: 100%;
        justify-content: space-between;
        padding: 20px;

        @media (width >= 75em) {
            display: none;
        }

        &[aria-expanded='true'] {
            --icon-rotate: 180deg;
        }
    }

    .jumplinks-icon {
        display: grid;
        place-content: center;
        rotate: var(--icon-rotate, 0deg);
        transition: rotate var(--transition-time) ease-in-out;

        &::before {
            color: currentColor;
            content: '\e313';
            font-family: var(--material-icons);
            font-size: 1.5em;
            line-height: 1;
        }
    }

    .jumplinks-dropdown {
        display: grid;
        gap: 15px;

        @media (width < 75em) {
            border-block-start: 1px solid
                rgb(from var(--color-white) r g b / 20%);
            block-size: 0;
            display: none;
            padding: var(--dropdown-padding, 0) 20px;
            overflow: hidden;

            &[aria-hidden='false'] {
                --dropdown-padding: 20px;

                block-size: auto;
                display: grid;

                @starting-style {
                    block-size: 0;
                }
            }
        }

        &[aria-hidden] {
            transition: block-size var(--transition-time) ease-in-out,
                padding var(--transition-time) ease-in-out,
                display var(--transition-time) allow-discrete;
        }

        & .button {
            inline-size: 100%;
        }
    }
    /* .active-jumplink {
        a {
            --link-color: var(--link-hover-color, var(--color-red-1));
            --underline-alpha: 1;
            &::after {
                background-color: var(--color-red-1);
                block-size: 5px;
                content: '';
                inset: auto 0 0;
                position: absolute;
                scale: 1 var(--nav-underline-scale, 0);
                transform-origin: center bottom;
                transition: scale var(--transition-time) ease-in-out;
            }
        }
    } */
}
