@import '../../../styles/definitions/mixins';

$image-default-size: 82px;

$namespace: '.productFeaturedQuotes';
$quote-selector: #{$namespace}_quote;
$quote-horizontal-selector: #{$quote-selector}--layout-horizontal;
$quote-vertical-selector: #{$quote-selector}--layout-vertical;

#{$namespace} {
	&_quote {
		&--layout-horizontal {
			display: flex;
		}

		&:not(:first-of-type) {
			margin-top: 50px;
		}
	}

	&_image {
		@include fit(contain);
		display: block;
		width: var(--logo-size, $image-default-size);
		height: var(--logo-size, $image-default-size);
	}

	&_image + &_content {
		--final-logo-spacing: var(--logo-spacing, 34px);
		
		#{$quote-vertical-selector} & {
			margin-top: var(--final-logo-spacing);
		}
		#{$quote-horizontal-selector} & {
			margin-left: var(--final-logo-spacing);
		}

		@include media-md-down {
			--final-logo-spacing: var(--logo-spacing, 20px);
		}
	}

	&_description {
		margin: 0;
		padding: 0;
		border: 0;
	}

	&_button {
		margin-top: 20px;
	}
}