@import '../../../../../styles/definitions/mixins';
@import '../../../../../styles/definitions/colors';
//Local Variables
$namespace: ".compareProductDescription";
$compare-product-image-width: 114px;
$compare-product-image-height: $compare-product-image-width;
$compare-product-image-border-radius: 8px;

// Component Styles
#{$namespace} {
	&_container {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	&_summary {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	&_imageWrapper {
		margin: 0 0 14px;
		width: $compare-product-image-width;
		height: $compare-product-image-height;
		overflow: hidden;
		border-radius: $compare-product-image-border-radius;

		&--add {
            $add-product-thumbnail-bgcolor: $faint-gray;
            $add-product-thumbnail-border-color: $gray;
			
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto 36px;
			background-color: $add-product-thumbnail-bgcolor;
			border: 1px solid $add-product-thumbnail-border-color;
			box-shadow: 0 2px 3px 0 rgba(0,0,0,0.06);
		}
	}

	&_image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&_title {
		@include title-4;
		display: block;
		margin: 0;
	}

	&_description {
		display: block;
		margin: 8px 0 13px;
	}

	&_starsWrapper {
		margin: 0 0 10px;
	}

	&_pricing {
		margin-top: auto;
	}

	&_btnContainer {
		margin: 8px 0 0;
		text-align: center;

		.button_item {
			width: 100%;
			margin-top: 12px;
		}

		&--add {
			.button_item {
				width: auto;
				font-size: $bodyFontSize6;
			}
		}
	}
}