/**
 * Styles for the Testimonials Block
 *
 */

.section-testimonials {
	position: relative;
	width: 100%;
	margin: 0 auto;
	margin-bottom: var(--wp--preset--spacing--50) !important;
	box-shadow: 0 25px 40px -5px var(--wp--preset--color--light);
	--f-carousel-dot-width: 12px;
	--f-carousel-dot-height: 12px;
	--f-carousel-dot-gap: 8px;
	--f-carousel-dots-position: relative;
	--f-arrow-svg-stroke-width: 3px;
}
.section-testimonials svg {
	color: var(--wp--preset--color--red);
}

.section-testimonials footer {
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--heading);
}

/*Accent Style*/
.section-testimonials.accent,
.section-testimonials.accent .f-carousel__dots {
	background-color: var(--wp--preset--color--accent);
}
.section-testimonials.accent.f-carousel .f-button {
	--f-arrow-bg: var(--wp--preset--color--white);
	--f-arrow-color: var(--wp--preset--color--contrast-2);
}

/*Contrast Style*/
.section-testimonials.contrast,
.section-testimonials.contrast .f-carousel__dots {
	background-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
	img {
		filter: invert(1);
	}
}
.section-testimonials.contrast.f-carousel .f-button {
	--f-arrow-bg: var(--wp--preset--color--white);
	--f-arrow-color: var(--wp--preset--color--contrast-2);
}

/*Base Style*/
.section-testimonials.base,
.section-testimonials.base .f-carousel__dots {
	background-color: var(--wp--preset--color--base);
}
.section-testimonials.base.f-carousel .f-button {
	--f-arrow-bg: var(--wp--preset--color--contrast-2);
	--f-arrow-color: var(--wp--preset--color--base);
}

/*Carousel Dots*/
.section-testimonials .f-carousel__dots {
	color: var(--wp--preset--color--red);
	padding-bottom: 2rem;
}

.section-testimonials.f-carousel {
	--f-carousel-slide-width: 100%;
	--f-carousel-gap: 16px;
	--f-carousel-slide-padding: var(--wp--preset--spacing--50)
		var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
}

/*Carousel Common Button Styles*/
.section-testimonials.f-carousel .f-button {
	--f-arrow-border-radius: 50%;
	--f-arrow-pos: var(--wp--preset--spacing--30);
	--f-arrow-width: 35px;
	--f-arrow-height: 35px;
	@media (max-width: 767px) {
		display: none;
	}
}