.wp-block-splide-carousel {
    display: flex;
    flex-direction: column;
}

.wp-block-splide-carousel .splide__arrows {
    display: flex;
    gap: var(--wp--preset--spacing--30);
    justify-content: flex-end;
    order: 1;
    padding-block-start: var(--wp--preset--spacing--50);
}

.wp-block-splide-carousel .splide__arrow {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    opacity: 1;
    position: static;
    transform: none;
    transition: color 0.25s ease-out;
}

.wp-block-splide-carousel .splide__arrow:hover {
    color: var(--wp--preset--color--accent);
}

.wp-block-splide-carousel .splide__arrow[disabled] {
    pointer-events: none;
}

.wp-block-splide-carousel .splide__arrow > svg {
    fill: currentColor;
}

.wp-block-splide-carousel .splide__pagination {
    justify-content: flex-start;
    order: 2;
    padding: 0;
    position: static;
    transform: translateY(-100%);
}

.wp-block-splide-carousel .splide__pagination .splide__pagination__page {
    background-color: currentColor;
    color: var(--wp--preset--color--neutral);
    transform: none;
    transition-property: color;
}

.wp-block-splide-carousel .splide__pagination .splide__pagination__page:hover {
    color: var(--wp--preset--color--accent);
}

.wp-block-splide-carousel .splide__pagination .splide__pagination__page.is-active {
    color: var(--wp--preset--color--contrast);
    pointer-events: none;
}

/* Arrows Outside style */

.wp-block-splide-carousel__container.is-style-arrows-outside > .wp-block-splide-carousel {
    padding-inline: 3rem;
    position: relative;
    width: calc(100% - 6rem);
}

.wp-block-splide-carousel__container.is-style-arrows-outside .splide__pagination {
    justify-content: center;
}

.wp-block-splide-carousel__container.is-style-arrows-outside .splide__arrows {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    left: 0;
    padding: 0;
    position: absolute;
    width: 100%;
}

@media screen and (max-width: 599px) {
    .wp-block-splide-carousel__container.is-style-arrows-outside > .wp-block-splide-carousel {
        padding-inline: 0;
        width: 100%;
    }

    .wp-block-splide-carousel__container.is-style-arrows-outside .splide__arrows > .splide__arrow {
        height: 2rem;
        width: 2rem;
    }

    .wp-block-splide-carousel__container.is-style-arrows-outside .splide__arrows > .splide__arrow--prev {
        transform: translateX(-92.5%);
    }

    .wp-block-splide-carousel__container.is-style-arrows-outside .splide__arrows > .splide__arrow--next {
        transform: translateX(92.5%);
    }
}
