@import "../../../base/less/mixins";

@testimonial_padding: 10px;

@testimonial_background: transparent;
@text_background: #f0f0f0;
@text_color: #666;
@text_border_radius: 4px;
@equalize_testimonial_height: default;

@title_font_family: default;
@title_font_weight: default;
@title_font_size: default;
@name_font_family: default;
@name_font_weight: default;
@name_font_size: default;
@location_font_family: default;
@location_font_weight: default;
@location_font_size: default;
@text_font_family: default;
@text_font_weight: default;
@text_font_size: default;

// Testimonial sizes
@testimonial_size: 33.333%;
@tablet_testimonial_size: 50%;
@mobile_testimonial_size: 100%;

// Image Sizes
@image_size: 75px;
@tablet_image_size: default;
@mobile_image_size: default;

// Responsive breakpoints
@tablet_width: 800px;
@mobile_width: 480px;

.widget-title {
	font-family: @title_font_family;
	font-weight: @title_font_weight;
	font-size: @title_font_size;
}

.sow-testimonials {

	.sow-testimonial-wrapper {
		width: @testimonial_size;

		@media screen and (max-width: @tablet_width) {
			width: @tablet_testimonial_size;
		}

		@media screen and (max-width: @mobile_width) {
			width: @mobile_testimonial_size;
		}
	}

	.sow-testimonial {
		background: @testimonial_background;
	}

	.sow-testimonial-name {
		font-family: @name_font_family;
		font-weight: @name_font_weight;
		font-size: @name_font_size;
	}

	.sow-testimonial-location {
		font-family: @location_font_family;
		font-weight: @location_font_weight;
		font-size: @location_font_size;
	}

	.sow-testimonial-text {
		font-family: @text_font_family;
		font-weight: @text_font_weight;
		font-size: @text_font_size;
		background: @text_background;
		color: @text_color;
		padding: @testimonial_padding @testimonial_padding*1.5;
		.rounded(@text_border_radius);
	}

	.sow-round-image-frame {
		border-radius: @image_size;
	}

	.sow-round-image-frame, .sow-image-wrapper-shape-square {
		width: @image_size;
		height: @image_size;
		max-width: 100%;
		
		@media screen and (max-width: @tablet_width) {
			width: @tablet_image_size;
			height: @tablet_image_size;
		}

		@media screen and (max-width: @mobile_width) {
			width: @mobile_image_size;
			height: @mobile_image_size;
		}
	}

	// All the specific layouts

	.sow-testimonial-wrapper {
		& when (@equalize_testimonial_height = true) {
			display: flex;

			.sow-testimonial {
			  display: flex;

			}
			&.sow-layout-text-above,
			&.sow-layout-text-below {
				.sow-testimonial {

					flex-direction: column;
				}
			}
			
			.sow-testimonial-text {
				display: flex;
				height: 100%;
			}
		}

		&.sow-layout-side {
			&.sow-user-left,
			&.sow-user-middle {
				.sow-testimonial-user {
					width: 33%;
					float: left;
					padding: @testimonial_padding @testimonial_padding*2 @testimonial_padding @testimonial_padding;

					img {
						margin: 0 auto;
						max-width: 100%;
					}
				}

			}

			&.sow-user-right {

				.sow-testimonial-user {
					width: 33%;
					float: right;
					padding: @testimonial_padding @testimonial_padding @testimonial_padding @testimonial_padding*2;

					img {
						margin: 0 auto;
						max-width: 100%;
						height: auto;
					}
				}

			}

		}

		&.sow-layout-text-above,
		&.sow-layout-text-below {

			.sow-testimonial-user {
				width: auto;
				padding: @testimonial_padding;

				img {
					height: auto;
				}
			}

			.sow-testimonial-text {

			}

		}

		&.sow-layout-text-below {

			.sow-testimonial-user {
				padding:@testimonial_padding;
			}

		}

	}

}

@media (max-width: @mobile_width) {
	&.so-widget-sow-testimonials > .sow-testimonials > .sow-testimonial-wrapper {
		padding: 0 10px;
		margin-bottom: 30px;

		&.sow-layout-text-above .sow-testimonial {
			.sow-testimonial-text {
				margin-bottom: 15px;
			}

			.sow-testimonial-user {
				padding-bottom: 0;
			}
		}

		.sow-testimonial {
			align-items: center;
			flex-direction: column;

			.sow-testimonial-user {
				float: none;
				padding: 0 0 15px;
				text-align: center;
				width: 100%;

				.sow-image-wrapper {
					height: auto;
					width: 100%;

					img {
						width: @image_size;
						height: @image_size;
						max-width: 100%;
					}
				}
			}
		}
	}
}