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

// Local Variables
$namespace: ".productQuickView";
$wrapper-selector: #{$namespace}_wrapper;
$wrapper-overlay-selector: #{$wrapper-selector}--overlay;
$wrapper-detailed-selector: #{$wrapper-selector}--detailed;
$wrapper-2columns-selector: #{$wrapper-selector}--2columns;

$wrapper-padding: 20px;
$close-icon-right: 18px;
$close-icon-width: 14px;
$logo-size: 82px;

// Local Placeholders
%subtitles {
	display: block;
	margin: 0;
	text-transform: uppercase;
}

// Component Styles
#{$namespace} {
	&_wrapper {
		padding: 22px $wrapper-padding $wrapper-padding;
		border-radius: 3px;
		font-size: 12px;
		line-height: 20px;
		color: $dark-gray;
		width: 302px;

		&--2columns {
			width: 600px;
			display: flex;
		}
	}

	&_header {
		#{$wrapper-detailed-selector} & {
			display: flex;
			margin: 0 0 15px;
		}

		#{$wrapper-overlay-selector} & {
			padding-right: $close-icon-width - ($wrapper-padding - $close-icon-right) + 5px;
		}
	}

	&_summary {
		font-size: 14px;
		line-height: 19px;
		color: $deep-gray;
	}

	&_title {
		display: block;
		font-size: 18px;
		line-height: 23px;
		font-weight: 700;
	}

	&_title + &_details {
		margin-top: 7px;
	}

	&_pricing,
	&_rating {
		margin: 7px 0 0;
		color: $deep-gray;
	}

	&_pricing {
		font-weight: bold;
		font-size: 14px;
	}

	&_feature {
		margin: 14px 0 0;

		&Title {
			@extend %subtitles;
		}

		&List {
			margin: 2px 0 0;
			padding: 0 0 0 1em;
		}
	}

	&_category {
		margin: 18px 0 0;

		&Title {
			@extend %subtitles;
		}

		&List {
			display: flex;
			flex-wrap: wrap;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		&Item {
			&:not(:last-of-type) {
				margin-right: 8px;
			}
		}
	}

	&_description {
		display: block;
		margin: 18px 0 0;
		font-size: 12px;
		line-height: 20px;
		color: $dark-gray;

		#{$wrapper-2columns-selector} & {
			margin-top: 7px;
		}
	}

	&_imageWrapper {
		order: -1;
		flex: 0 0 $logo-size;
		height: $logo-size;
		border-radius: 8px;
		overflow: hidden;

		#{$wrapper-detailed-selector} & {
			margin: 0 18px 0 0;
		}
	}

	&_screenshot {
		overflow: hidden;
		margin: 18px 0 0;

		#{$wrapper-overlay-selector} & {
			text-align: center;
		}

		#{$wrapper-2columns-selector} & {
			margin: 0 0 0 20px;

			&--align-left {
				margin: 0 20px 0 0;
				order: -1;
			}
		}
	}

	&_button {
		margin: 18px 0 0;
		text-align: center;

		svg {
			width: 8px;
			margin-left: 12px;
			fill: $white;
		}

		
		#{$wrapper-detailed-selector} & {
			text-align: right;
			button {
				padding: 5px 13px;
			}
	
		}

		#{$wrapper-2columns-selector} & {
			margin-top: 15px;
			text-align: left;

		}
	}
}