/* Group block carousel style
   ========================================================================== */

*:has(>.wp-block-group.is-style-carousel) {
    position: relative;

    & .wp-block-group.is-style-carousel {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-inline: max(calc(50% - var(--wp--style--global--wide-size)/2), var(--wp--preset--spacing--small));
        scroll-padding-inline: max(calc(50% - var(--wp--style--global--wide-size)/2), var(--wp--preset--spacing--small));
        margin-inline: auto;

        will-change: scroll-position;
        scrollbar-width: none;

        & > * {
            margin-block-start: 0;
            flex: 0 0 auto;
            max-width: calc(100vw - var(--wp--preset--spacing--small) * 2);
            scroll-snap-align: start;

            @media (max-width: 781px) {
                scroll-snap-align: center;
            }
        }
    }
}



/* Query block carousel style
   ========================================================================== */

.wp-block-query.is-style-carousel {
    position: relative;

    & .wp-block-post-template {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-inline: max(calc(50% - var(--wp--style--global--wide-size)/2), var(--wp--preset--spacing--small));
        scroll-padding-inline: max(calc(50% - var(--wp--style--global--wide-size)/2), var(--wp--preset--spacing--small));
        margin-inline: auto;

        will-change: scroll-position;
        scrollbar-width: none;

        & > * {
            margin-block-start: 0;
            flex: 0 0 auto;
            max-width: calc(100vw - var(--wp--preset--spacing--small) * 2);
            scroll-snap-align: start;
            scroll-snap-stop: always;

            @media (max-width: 781px) {
                scroll-snap-align: center;
            }
        }
    }
}

/* Prev/next arrows
   ========================================================================== */
*:has(>.wp-block-group.is-style-carousel) .sym-carousel-controls,
.wp-block-query.is-style-carousel .sym-carousel-controls {
    position: absolute;
    max-width: calc(var(--wp--style--global--wide-size) + var(--wp--preset--spacing--small) * 4);
    margin: 0 auto;
    inset: 0;
    pointer-events: none;
    z-index: 5;

    & .sym-carousel-prev,
    & .sym-carousel-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: auto;
        padding: var(--wp--preset--spacing--x-small);
        background: var(--wp--preset--color--text-50);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:hover:not(:disabled) {
            background: var(--wp--preset--color--text-100);
        }

        &:disabled {
            opacity: 0;
            cursor: unset;
        }

        & svg {
            width: 1.6rem;
            height: 1.6rem;

            & path {
                fill: var(--wp--preset--color--white);
            }
        }
    }

    & .sym-carousel-prev {
        left: 3px;
    }

    & .sym-carousel-next {
        right: 3px;
    }
}