/* General Carousel Styles
--------------------------------------------- */

.carousel {
    overflow: visible;
}

.carousel__navigation {
    column-gap: 0.25em;
    display: flex;
    text-align: initial;
}

.carousel__navigation-button {
    background-color: var(--wp--preset--color--secondary-accent);
    border-radius: 9999px;
    height: 2rem;
    margin: initial !important;
    position: static !important;
    transition: scale var(--transition);
    width: 2rem;
}

.carousel__navigation-button:hover {
    scale: 1.03;
}

.carousel__navigation-button::after {
    background-color: var(--wp--preset--color--base);
    content: "";
    height: 100%;
    --de-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M7.13861 12.146C7.291 11.9984 7.375 11.8018 7.375 11.5926C7.375 11.3834 7.291 11.1869 7.13861 11.0393L2.32508 6.37511L7.13901 1.71058C7.45308 1.40574 7.45308 0.909805 7.13901 0.604836C6.98663 0.456917 6.78389 0.375261 6.5681 0.375C6.35231 0.37474 6.1493 0.456004 5.99624 0.604053L0.611926 5.82127C0.461289 5.96684 0.374999 6.16889 0.374999 6.37537C0.374999 6.58186 0.461289 6.78313 0.611523 6.92844L5.99638 12.1462C6.31125 12.4513 6.82374 12.4511 7.13861 12.146Z' fill='currentColor' stroke='currentColor' stroke-width='0.75'/%3E%3C/svg%3E");
    -webkit-mask: var(--de-mask-image) no-repeat center;
    mask: var(--de-mask-image) no-repeat center;
    -webkit-mask-size: 27%;
    mask-size: 27%;
    width: 100%;
}

.carousel__navigation-button svg {
    display: none;
}

.carousel__navigation-button--next {
    transform: rotate(180deg);
}

/* Carousels in Columns on Desktop clip left side */

@media (min-width: 782px) {
    .wp-block-column .carousel {
        overflow: visible;
        clip-path: inset(-100vmax -100vmax -100vmax 0);
    }
}

/* Carousel w/ Brand or Green Gradient Background */

.carousel.is-style-bg-brand-gradient,
.carousel.is-style-bg-green-gradient {
    background: none;
    padding-top: var(--wp--preset--spacing--medium);
    padding-bottom: calc(2rem + var(--wp--preset--spacing--x-small) + var(--wp--preset--spacing--x-small)) !important;
}

.carousel.is-style-bg-brand-gradient::after,
.carousel.is-style-bg-green-gradient::after {
    background:
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.80%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(130deg, var(--wp--preset--color--primary) 1.69%, var(--wp--preset--color--secondary) 183.48%);
    border-top-left-radius: var(--wp--preset--border-radius--default);
    border-bottom-left-radius: var(--wp--preset--border-radius--default);
    content: "";
    height: 100%;
    left: var(--wp--preset--spacing--medium);
    top: 0;
    position: absolute;
    width: 100vw;
    z-index: -1;
}

.carousel.is-style-bg-green-gradient::after {
    background:
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.80%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(180deg, var(--wp--preset--color--secondary-accent) 0%, #004539 100%);
}

@media (min-width: 782px) {
    .wp-block-column .carousel.is-style-bg-brand-gradient::after,
    .wp-block-column .carousel.is-style-bg-green-gradient::after {
        width: 55vw;
    }
}

.carousel.is-style-bg-brand-gradient .carousel__navigation,
.carousel.is-style-bg-green-gradient .carousel__navigation {
    bottom: var(--wp--preset--spacing--x-small);
    left: calc(var(--wp--preset--spacing--medium) * 2);
    position: absolute;
}

.carousel.is-style-bg-brand-gradient .carousel__navigation-button {
    background-color: var(--wp--preset--color--base);
}

.carousel.is-style-bg-brand-gradient .carousel__navigation-button::after {
    background-color: var(--wp--preset--color--primary);
}

.carousel.is-style-bg-green-gradient .carousel__navigation-button {
    background-color: var(--wp--preset--color--base);
}

.carousel.is-style-bg-green-gradient .carousel__navigation-button::after {
    background-color: var(--wp--preset--color--secondary-accent);
}