:root {
    --external--header--height: 60px;
}

@media (max-width: 939px) {

    .breakdown-scroller {
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);

        .breakdown-scroller__label,
        .breakdown-scroller__line,
        .breakdown-scroller__slide-list,
        .breakdown-scroller__hint,
        .breakdown-scroller__nav {
            display: none;
        }

        .breakdown-scroller-content {
            display: flex;
            flex-flow: column nowrap;
            gap: var(--wp--preset--spacing--small);
            padding-bottom: var(--wp--preset--spacing--medium);

            .breakdown__overlay,
            .breakdown__graident {
                display: none;
            }

            .breakdown__media {
                border-radius: 18px;
                max-width: 100%;
                height: auto;
                aspect-ratio: 4/5;
                object-fit: cover;
            }

            .breakdown__copy-inner {
                display: flex;
                flex-flow: column nowrap;
                gap: var(--wp--preset--spacing--small);

                .breakdown__heading {
                    margin: 0;
                }
            }

        }

        .swiper {
            display: block;
            
            .swiper-wrapper {
                display: block;
                height: auto;
            }
        }

    }
}

@media (min-width: 940px) {

    .breakdown-scroller--dummy {
        height: calc( 100vh - var(--external--header--height) );
    }

    html.breakdown-active {
        overflow: hidden;

        body {
            overflow: hidden;
        }
    }

    .breakdown-scroller {
        background: var(--breakdown--main--background);
        width: var(--breakdown--scroller--width);
        min-height: calc( var(--breakdown--scroller--height) * var(--breakdown--scroller--panel--count, 5));

        --wp--preset--color--base-dark: #ffffff;
        --wp--preset--color--base-slate: #ffffffcc;

        --breakdown--radius: 24px;
        --breakdown--padding: 32px;
        --breakdown--chrome--zindex: 20;

        /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48" xml:space="preserve"><path d="M24 48H0V24c0 13.3 10.7 24 24 24z"/></svg> */
        --breakdown--corner--bottom-left: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0yNCA0OEgwVjI0YzAgMTMuMyAxMC43IDI0IDI0IDI0eiIvPjwvc3ZnPg=="); 
        /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48" xml:space="preserve"><path d="M24 0h24v24C48 10.7 37.3 0 24 0z"/></svg> */
        --breakdown--corner--top-right: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0yNCAwaDI0djI0QzQ4IDEwLjcgMzcuMyAwIDI0IDB6Ii8+PC9zdmc+");
        /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48" xml:space="preserve"><path d="M0 24V0h24C10.7 0 0 10.7 0 24z"/></svg> */
        --breakdown--corner--top-left: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0wIDI0VjBoMjRDMTAuNyAwIDAgMTAuNyAwIDI0eiIvPjwvc3ZnPg==");
        /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48" xml:space="preserve"><path d="M24 48h24V24c0 13.3-10.7 24-24 24z"/></svg> */
        --breakdown--corner--bottom-right: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0yNCA0OGgyNFYyNGMwIDEzLjMtMTAuNyAyNC0yNCAyNHoiLz48L3N2Zz4=");

        --breakdown--scroller--height: calc( 100vh - var(--external--header--height) );
        --breakdown--scroller--width: 100vw;

        --breakdown--scroller--content--height: calc( var(--breakdown--scroller--height) - ( 2 * var(--breakdown--padding) ) );
        --breakdown--scroller--content--width: calc( var(--breakdown--scroller--width) - ( 2 * var(--breakdown--padding) ) );

        --breakdown--grid--columns: 400px auto 240px;
        --breakdown--grid--rows: 86px auto min-content 102px;

        --breakdown--main--background: white;
        --breakdown--main--color: var(--wp--preset--color--primary, #097289);

        --breakdown--list--padding: 0 24px calc( 2 * var(--breakdown--padding) ) calc( var(--breakdown--padding) - 7.5px);
        --breakdown--list--text--display: none;

        --breakdown--button--size: 48px;
        --breakdown--button--icon--size: 36px;

        --breakdown--copy--padding: 0 var(--breakdown--padding) calc( 2 * var(--breakdown--padding) ) calc( 2 * var(--breakdown--padding) );
        --breakdown--copy--columns: 1/3;

        body.admin-bar & {
            --external--header--height: 92px;
        }


        .breakdown-scroller__panel {
            height: var(--breakdown--scroller--height);
        }

        .breakdown-scroller__main {
            display: grid;
            grid-template-columns: var(--breakdown--grid--columns);
            grid-template-rows: var(--breakdown--grid--rows);
            gap: 0;
            width: var(--breakdown--scroller--width);
            height: var(--breakdown--scroller--height);
            z-index: 4;
            border: var(--breakdown--padding) solid var(--breakdown--main--background);
            z-index: 1;
            position: relative;

            > * {
                z-index: 10;
            }

            &:before {
                content: " ";
                width: 48px;
                height: 48px;
                background: var(--breakdown--main--background);
                position: absolute;
                bottom: 0;
                left: 0;
                mask: var(--breakdown--corner--bottom-left)
            }

            &:after {
                content: " ";
                width: 48px;
                height: 48px;
                background: var(--breakdown--main--background);
                position: absolute;
                top: 0;
                right: 0;
                mask: var(--breakdown--corner--top-right)
            }

        } 


        .breakdown-scroller__label {
            background: var(--breakdown--main--background);
            grid-row: 1/2;
            grid-column: 1/2;
            max-width: 286px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom-right-radius: var(--breakdown--radius);
            position: relative;

            div {
                text-transform: uppercase;
                color: var(--breakdown--main--color);
                font-size: var(--wp--preset--font-size--base);
                font-weight: bold;
                opacity: 0.6;
                z-index: var(--breakdown--chrome--zindex);
            }

            &:before {
                content: " ";
                width: 48px;
                height: 48px;
                background: var(--breakdown--main--background);
                position: absolute;
                top: 0;
                left: 100%;
                mask: var(--breakdown--corner--top-left)
            }

            &:after {
                content: " ";
                width: 48px;
                height: 48px;
                background: var(--breakdown--main--background);
                position: absolute;
                top: 100%;
                left: 0;
                mask: var(--breakdown--corner--top-left)
            }

        }

        .breakdown-scroller__line {
            grid-row: 1/2;
            grid-column: 1/4;

            > div {
                border-bottom: 1px solid rgb( 255 255 255 / 30% );
                margin: 43px 43px 0 calc(286px + 43px);
                z-index: var(--breakdown--chrome--zindex);
            }

        }

        .breakdown-scroller__slide-list {
            grid-row: 3/5;
            grid-column: 1/2;
            display: flex;
            justify-content: flex-end;
            flex-flow: column nowrap;
            padding: var(--breakdown--list--padding);
            position: relative !important;            

            .slide-list__item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 24px;
                color: white;
                padding: 36px 0 0;
                position: relative;
                z-index: var(--breakdown--chrome--zindex);

                .item__text {
                    display: var(--breakdown--list--text--display);
                    font-size: 18px;
                    line-height: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    flex: 1 1 auto;
                }

                /* Line */
                &:not(:first-child):before {
                    content: " ";
                    display: block;
                    height: 24px;
                    width: 1px;
                    position: absolute;
                    left: 7px;
                    top: 6px;
                    border-left: 1px dashed white;
                }

                /* Dot */
                &:after {
                    content: " ";
                    display: block;
                    width: 15px;
                    height: 15px;
                    flex: 15px 0 0;
                    border-radius: 7.5px;
                    transform: translateY(-1px);
                    order: -1;
                }

                &:is(.swiper-pagination-bullet) {
                    --swiper-pagination-bullet-width: 100%;
                    --swiper-pagination-bullet-height: auto;
                    --swiper-pagination-color: transparent;
                    --swiper-pagination-bullet-inactive-color: transparent;
                    --swiper-pagination-bullet-inactive-opacity: 1;
                    --swiper-pagination-bullet-vertical-gap: 0
                }


                &:is(.swiper-pagination-bullet-active) {
                    font-weight: bold;

                    &:after {
                        background-image: linear-gradient(to top, #0089a0, #00a795);
                    }

                }

                &:not(.swiper-pagination-bullet-active) {

                    &:after {
                        border: 2px solid var(--wp--preset--color--base-slate);
                    }

                }

            }
        }

        .breakdown-scroller__hint {
            grid-row: 3/4;
            grid-column: 3/4;
            color: var(--wp--preset--color--base-dark);
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            padding: 0 24px 24px 0;

            > div {
                width: calc(2 * var(--breakdown--button--size));
                text-align: center;
                font-weight: bold;
                z-index: var(--breakdown--chrome--zindex);
            }

        }

        .breakdown-scroller__nav {
            background: var(--breakdown--main--background);
            grid-row: 4/5;
            grid-column: 3/4;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top-left-radius: var(--breakdown--radius);
            position: relative;
            z-index: var(--breakdown--chrome--zindex);

            &:before {
                content: " ";
                width: 48px;
                height: 48px;
                background: var(--breakdown--main--background);
                position: absolute;
                bottom: 0;
                right: 100%;
                mask: var(--breakdown--corner--bottom-right)
            }

            &:after {
                content: " ";
                width: 48px;
                height: 48px;
                background: var(--breakdown--main--background);
                position: absolute;
                bottom: 100%;
                right: 0;
                mask: var(--breakdown--corner--bottom-right)
            }

            .breakdown-scroller__pagination {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                padding-left: 24px;
                color: var(--breakdown--main--color);
                font-size: 18px;
                font-weight: bold;

                .pagination__current{
                    min-width: 2ch;
                    text-align: right;
                }

            }

            .breakdown-scroller__buttons {
                padding-right: 24px;
                display: flex;
                align-items: center;

                button,
                button:is(.swiper-button-lock) {
                    appearance: none;
                    -webkit-appearance: none;
                    padding: 0;
                    margin: 0;
                    border: none;
                    background: none;
                    cursor: pointer;
                    display: block;

                    .icon{
                        width: var(--breakdown--button--size);
                        height: var(--breakdown--button--size);
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        svg {
                            width: var(--breakdown--button--icon--size);
                            height: var(--breakdown--button--icon--size);
                            fill: var(--breakdown--main--color);
                        }

                    }

                    &:is([disabled]) {
                        opacity: 0.6;
                        cursor: not-allowed;
                    }

                    &:is(.breakdown-scroller__prev) {}
                    &:is(.breakdown-scroller__next) {}

                }

            }

        }

        .swiper {
            grid-row: 1/5;
            grid-column: 1/4;
            width: var(--breakdown--scroller--content--width);
            height: var(--breakdown--scroller--content--height);
            margin: 0 auto;
            border-radius: var(--breakdown--radius);

            .swiper-slide {
                height: var(--breakdown--scroller--content--height);

                &:is(.swiper-slide-prev) {

                    .breakdown__media{
                        transform: scale(1.25);
                    }

                    .breakdown__copy{
                        opacity: 0.8;
                        transform: translateY(100px);
                    }

                }
                
                &:is(.swiper-slide-active) {

                    .breakdown__media{
                        transform: scale(1);
                    }

                    .breakdown__copy{
                        opacity: 1;
                        transform: translateY(0);
                    }

                }

                &:is(.swiper-slide-next) {

                    .breakdown__media{
                        transform: scale(1.25);
                    }

                    .breakdown__copy{
                        opacity: 0.8;
                        transform: translateY(-100px);
                    }

                }

            }
            
        }

        .breakdown-scroller__container {}

        .breakdown-scroller-content {
            width: var(--breakdown--scroller--content--width);
            height: var(--breakdown--scroller--content--height);
            display: grid;
            grid-template-columns: var(--breakdown--grid--columns);
            grid-template-rows: auto auto;
            background: black;
            grid-area: content;

            /* &:not([active]) {
                z-index: -1;
                pointer-events: none;
                opacity: 0;
            } */

            .breakdown__media {
                grid-column: 1/4;
                grid-row: 1/3;
                object-fit: cover;
                width: 100%;
                height: var(--breakdown--scroller--content--height);
                transition: all 250ms ease;
            }

            img.breakdown__media {}

            video.breakdown__media {}

            .breakdown__overlay {
                background-color: rgb(0 0 0 / var(--breakdown--overlay--percentage));
                grid-column: 1/4;
                grid-row: 1/3;
                position: relative;
            }

            .breakdown__graident {
                background-image: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(0 0 0 / 30%) 50%, rgb(0 0 0 / 0%));
                grid-column: 1/4;
                grid-row: 1/3;
                position: relative;
            }

            .breakdown__copy {
                grid-column: var(--breakdown--copy--columns);
                grid-row: 2/3;
                padding: var(--breakdown--copy--padding);
                transition: all 250ms ease;

                .breakdown__copy-inner {
                    display: flex;
                    flex-flow: column nowrap;
                    gap: 32px;

                    > h2:is(:first-child) {
                        font-size: 117px;
                        text-transform: none;
                    }

                    > * {
                        color: white;
                        padding: 0;
                        margin: 0;
                    }

                    .breakdown__text {
                        max-width: 900px;

                        > *:first-child {
                            margin-top: 0;
                        }

                        > *:last-child {
                            margin-bottom: 0;
                        }

                    }

                }

            }

        }

    }

}

@media (min-width: 1350px) {

    .breakdown-scroller {

        --breakdown--grid--columns: 400px auto 333px;
        --breakdown--list--padding: 0 24px calc( 2 * var(--breakdown--padding) ) 80px;
        --breakdown--list--text--display: block;

        --breakdown--copy--padding: 0 var(--breakdown--padding) calc( 2 * var(--breakdown--padding) ) 0;
        --breakdown--copy--columns: 2/3;

    }

}