@import '../variables';
@import '../modules/transparent-navbar';

.cd-products-comparison-table {
	/*   overflow-x: auto; */
	/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
	/*   -webkit-overflow-scrolling: touch; */
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	.actions {
		float: right;
	}
	.reset {
		color: #404042;
		text-decoration: underline;
	}
	.filter {
		padding: .6em 1.5em;
		color: #ffffff;
		background-color: #cccccc;
		border-radius: 3px;
		margin-left: 1em;
		cursor: not-allowed;
		-webkit-transition: background-color 0.3s;
		-moz-transition: background-color 0.3s;
		transition: background-color 0.3s;
		.active {
			cursor: pointer;
			background-color: #9dc997;
		}
	}
}

.cd-products-wrapper {
  overflow-x: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
}

.cd-products-table {
	position: relative;
	overflow: hidden;

/* 	height: 50vh; */
	.cd-features {
		/* fixed left column - product properties list */
		position: absolute;
		z-index: 0.1;
		top: 0px;
		left: 0;
		width: 210px;
		padding-top: 200px;
		margin-bottom: 0px;
		padding-bottom: 0px;
		background-color: white;
		.cd-top-info {
			padding: 15px 20px;
			background: #fafafa;
			text-align: left;
			border-top: solid 1px #e6e6e6;
			border-left: solid 1px #e6e6e6;
			border-right: solid 1px #e6e6e6;
			border-bottom: solid 1px #e6e6e6;
			height: 60px;
			.check {
				    position: relative;
					display: inline-block;
					height: 16px;
					width: 16px;
					margin: 0 auto 1em;
					:before {
						border-radius: 50%;
						border: 1px solid #e6e6e6;
						background: #ffffff;
						-webkit-transition: background-color 0.3s, -webkit-transform 0.3s, border-color 0.3s;
						-moz-transition: background-color 0.3s, -moz-transform 0.3s, border-color 0.3s;
						transition: background-color 0.3s, transform 0.3s, border-color 0.3s;
						position: absolute;
						top: 0;
						left: 0;
						content: '';
						height: 100%;
						width: 100%;
					}
					:after {
						background: url(../img/compare/cd-check.svg) no-repeat center center;
						background-size: 24px 24px;
						opacity: 0;
						-webkit-transition: opacity 0.3s;
						-moz-transition: opacity 0.3s;
						transition: opacity 0.3s;
						position: absolute;
						top: 0;
						left: 0;
						content: '';
						height: 100%;
						width: 100%;
					}
			}
		}
		&:after {
			/* color gradient on the right of .features -  visible while scrolling inside the .cd-products-table */
			content: '';
			position: absolute;
			top: 0;
			left: 100%;
			width: 4px;
			height: 100%;
			background-color: transparent;
			background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.06), transparent);
			background-image: linear-gradient(to right,rgba(0, 0, 0, 0.06), transparent);
			opacity: 0;
		}
		.cd-features-list {
			margin-top:0px;
			padding-left:0px;
			li {
				background: #fafafa;
				text-transform: uppercase;
				padding: 5px 10px;
				letter-spacing: 1px;
				border-left: solid 1px #e6e6e6;
				border-right: solid 1px #e6e6e6;
				border-bottom: solid 1px #e6e6e6;
				text-align: left;
				margin: 0px;
				height: 60px;
				/* try flexbox'ing */
					display: flex;
					justify-content:center;
					align-content:center;
					flex-direction:column; /* column | row */
			}
			.cd-group {
				background: #eaeaea;
				border-top: solid 1px #e6e6e6;
				margin-top: 10px;
				font-weight: bold;
				height: 50px;
			}
			.long {
				height:120px;
			}
		}
	}
	.cd-products-columns {
		/* products list wrapper */
		width: 1600px; /* single column width * products number */
		margin-left: 210px; /* .features width */
		margin-top: 30px;
/* 		height: 800px; */
		.cd-product {
			text-align: center;
			display:inline-block;
/*			height: 1800px;*/
			width: 250px;
			img {
				width: auto;
				height: auto;
				max-height: 150px;
				max-width: 150px;
				margin-left: auto;
				margin-right: auto;
			}
			.cd-product-features {
				margin-top: 19px;
				margin-left: 0px;
				li {
					/* try flexbox'ing */
					height: 45px;
					display: flex;
					justify-content:center;
					align-content:center;
					flex-direction:column; /* column | row */
				}
				.cd-group {
					height: 45px;
				}
				.long {
					height: 105px;
				}
			}
		}
	}
}

.cd-products-table.scrolling .features::after {
  opacity: 1;
}

@media only screen and (min-width: 1170px) {
  .cd-products-table.top-fixed .cd-products-columns > li {
    padding-top: 160px;
  }

  .cd-products-table.top-fixed .cd-top-info {
    height: 160px;
    position: fixed;
    top: 0;
  }

  .cd-products-table.top-fixed .cd-top-info h3 {
    transform: translateY(-116px);
  }

  .cd-products-table.top-fixed .cd-top-info img {
    transform: translateY(-62px) scale(0.4);
  }

}