@import "variables";
.compatibleProduct {
	position: relative;
	margin-bottom: 16px;
	font-size: 14px;
	.btn {
		padding: 10px 16px !important;
		font-size: 14px;
	}

	.cpd-left & {
		margin-left: -12px;
		margin-right: -12px;
		//padding: 16px 12px !important;
	}

	&.warning {
		background: #FFFFCA;
		//padding: 24px;
		padding: 16px;
		.compatibleProduct__body {
			display: flex;
			&:not(:last-child){
				margin-bottom: 12px;
			}
			.b-side {
				align-self: center;
				margin-left: 16px;
				img {
					display: block;
					width: 24px;
				}
			}
			.b-body {
				flex-grow: 1;
				line-height: 1.25;
			}
		}
		.btn {
			padding: 6px 8px !important;
		}
	}
	&.success {
		//background: #EBFFD6;
		background: rgba(222,255,190,1);
		padding: 16px;
		line-height: 1.25;
		.dash-link {
			border-bottom-color: #b3b3b3;
			color: #9b9b9b;
		}
		.b-head {
			margin-bottom: 4px;
			font-weight: bold;
			color: $green_dark;
		}
		.b-model {}
		.b-controls {
			@media (max-width: 767px) {
				display: inline;
				white-space: nowrap;
			}
			text-align: right;
			a.dash-link {
				border-bottom-color: $color_gray_30;
				color: #9b9b9b;
				&:hover {
					border-bottom-color: transparent;
				}
			}
		}
	}
}
.compatibleHead {
	background: #fff;
	position: relative;
	z-index: 55;
	font-size: 14px;
	.compatibleHead__row {
		position: relative;
		display: flex;
		padding-left: 24px;
		padding-right: 24px;
		@media(max-width: 767px){
			padding-left: 12px;
			padding-right: 12px;
		}
		&:before {
			content: '';
			background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(125,185,232,0) 100%);
			background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
			background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007db9e8',GradientType=0 );
			position: absolute; top: 100%; left: 0; right: 0;
			z-index: 5;
			height: 4px;
			opacity: .05;
		}
		.b-side {
			position: relative;
			width: 220px;
			min-width: 220px;
			margin-right: 30px;
			order: 1;
			img {
				position: absolute; top: 50%; left: 50%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.b-body {
			position: relative;
			padding: 32px 0;
			font-size: 14px;
			font-weight: bold;
			order: 2;
			@media(max-width: 767px){
				padding: 20px 0;
			}
			&:before {
				content: '';
				border: 10px solid transparent;
				border-top-color: #000;
				position: absolute; top: 100%; left: 0;
				z-index: 5;
				margin-top: 2px;
				opacity: .05;
			}
			&:after {
				content: '';
				border: 10px solid transparent;
				border-top-color: #fff;
				position: absolute; top: 100%; left: 0;
				z-index: 5;
			}
		}
		&.type {
			background: #ffffff;
			.b-side {
				@media(max-width: 767px){
					margin-right: 0;
					margin-left: 16px;
					min-width: 120px;
					order: 3;
				}
				img {
					max-width: 90%;
					max-height: 90%;
				}
			}
			.b-body {
				a {
					border: 0 !important;
					color: $color_dark !important;
				}
			}
		}
		&.message {
			background: #FFFFCA;
			.b-side {
				@media(max-width: 767px){
					display: none;
				}
				img {
					max-width: 60%;
					max-height: 60%;
				}
			}
			.b-body {
				&:after {
					border-top-color: #FFFFCA;
				}
			}
		}
	}
}

.compatibleResult {
	display: flex;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.25;
	@media(max-width: 767px){
		margin-left: -12px;
		margin-right: -12px;
	}
	.compatibleResult__image {
		width: 160px;
		min-width: 160px;
		margin-right: 20px;
		@media(max-width: 767px){
			display: none;
		}
		img {
			display: block;
			max-width: 100%;
		}
	}
	.compatibleResult__body {
		flex-grow: 1;
		@media (min-width: 768px) {
			max-width: 600px;
		}
	}
	.compatibleResult__product {
		position: relative;
		display: flex;
		align-items: center;
		padding-bottom: 12px;
		@media(max-width: 767px){
			padding-left: 12px;
			padding-right: 12px;
		}
		.title {
			flex-grow: 1;
			font-size: 16px;
			font-weight: bold;
			color: $color_dark;
			a {
				border: 0;
				color: inherit;
			}
		}
		.image {
			@media(max-width: 767px){
				width: 100px;
				min-width: 100px;
			}
			@media(min-width: 768px){
				display: none;
			}
			img {
				display: block;
				margin-left: auto;
				max-width: 100%;
				max-height: 50px;
			}
		}
	}
	.compatibleResult__message {
		position: relative;
		padding: 16px;
		@media(max-width: 767px){
			padding: 12px;
		}
		/*&:before {
			content: '';
			background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(125,185,232,0) 100%);
			background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
			background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007db9e8',GradientType=0 );
			position: absolute; top: 100%; left: 0; right: 0;
			z-index: 2;
			height: 4px;
			opacity: .05;
		}
		&:after {
			content: '';
			border: 10px solid transparent;
			position: absolute; top: 100%; left: 8px;
			z-index: 2;
		}*/
		.b-controls {
			@media (max-width: 767px) {
				display: inline;
				white-space: nowrap;
			}
			text-align: right;
			a.dash-link {
				border-bottom-color: $color_gray_30;
				color: #9b9b9b;
				&:hover {
					border-bottom-color: transparent;
				}
			}
		}
		&.error {
			background: #FFEBEB;
			&:after {
				border-top-color: #FFEBEB;
			}
		}
		&.success {
			background: #DEFFBE;
			padding: 32px 16px;
			@media(max-width: 767px){
				padding: 32px 12px;
			}
			&:after {
				border-top-color: #DEFFBE;
			}
		}
	}

	.compatibleProductBox {
		margin-bottom: 0;
		& + .compatibleResult__message {
			&:before, &:after {
				display: none !important;
			}
			&:after {
				border-width: 16px;
				@media(max-width: 767px){
					border-width: 12px;
				}
			}
		}
		.compatibleProductB {
			@media(max-width: 575px){
				margin-left: 0;
				margin-right: 0;
			}
			/*&:after {
				content: '';
				border: 16px solid transparent;
				position: absolute; top: 100%; left: 8px;
				z-index: 1;
			}
			&.compatibleProductB_error {
				&:after {
					border-top-color: #FFEAEA;
				}
			}*/
		}
		&.in {
			.compatibleProductB {
				&.compatibleProductB_error {
					&:after {
						border-top-color: #FFFFCA;
					}
				}
			}
		}
	}
}

.compatible-shadow-arrow {
	position: absolute; top: 100%; left: 0; right: 0;
	z-index: 2;
	height: 4px;
	&:before {
		content: '';
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(125,185,232,0) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007db9e8',GradientType=0 );
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		opacity: .05;
	}
	.arrow {
		position: absolute; top: 0; left: 0;
		overflow: hidden;
		width: 50px;
		height: 50px;
		&:before {
			content: '';
			background: transparent;
			border: 2px solid transparent;
			position: absolute; top: 0; left: 50%;
			display: none;
			width: 28px;
			height: 28px;
			@include box-shadow(0 0 3px rgba(0,0,0,.15));
			@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
		}
		/*&:before {
			content: '';
			position: absolute; top: 0; left: -2px;
			border: 18px solid transparent;
			border-top-color: rgba(0,0,0,1);
			opacity: 0.035;
		}
		&:after {
			content: '';
			position: absolute; top: 0; left: 0;
			border: 16px solid transparent;
		}*/
	}

	.compatibleProductB.compatibleProductB_error & {
		.arrow {
			&:before {
				background: #FFEAEA;
				display: block;
			}
			/*&:after {
				border-top-color: #FFEAEA;
			}*/
		}
	}
	.compatibleProductBox.in .compatibleProductB.compatibleProductB_error & ,.compatibleProductB.compatibleProductB_error.in & {
		.arrow {
			&:before {
				background: #FFFFCA;
				display: block;
			}
			/*&:after {
				border-top-color: #FFFFCA;
			}*/
		}
	}
	.compatibleResult__message.error & {
		.arrow {
			&:before {
				background: #FFEBEB;
				display: block;
			}
			/*&:after {
				border-top-color: #FFEBEB;
			}*/
		}
	}
	.compatibleResult__message.success & {
		.arrow {
			&:before {
				background: #DEFFBE;
				display: block;
			}
			/*&:after {
				border-top-color: #DEFFBE;
			}*/
		}
	}
	.compatibleResult .compatibleResult__message.success & {
		&:before {
			position: absolute; top: 2px; right: 0; bottom: auto; left: 0;
			height: 4px;

			background: -moz-linear-gradient(top, rgba(45,185,45,1) 0%, rgba(125,185,232,0) 100%);
			background: -webkit-linear-gradient(top, rgba(45,185,45,1) 0%,rgba(125,185,232,0) 100%);
			background: linear-gradient(to bottom, rgba(45,185,45,1) 0%,rgba(125,185,232,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db92d', endColorstr='#007db9e8',GradientType=0 );
			opacity: .2;
			//2db92d
		}
		&:after {
			content: '';
			background: #2DB92D;
			position: absolute; top: 0; left: 0; right: 0;
			height: 2px;
		}
		.arrow {
			z-index: 2;
			&:before {
				background: #DEFFBE;
				border-color: #2DB92D;
				display: block;
			}
		}
	}
	.compatibleResult__product & {
		.arrow {
			&:before {
				background: $white;
				@media(max-width: 767px){
					display: block;
				}
			}
		}
	}
}