/**
 * Compare service
 *
 * Description: Styles for the compare service.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - My compare list
 *   1.1 - My compare list (responsive)
 * 2.0 - Compare button (no js)
 * 3.0 - Compare header
 *   3.1 - Compare header (responsive)
 * 4.0 - Compare table
 *   4.1 - Compare table (responsive)
 *   4.2 - Compare table (no js)
 * 5.0 - Compare table navigation
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - My compare list
 * -----------------------------------------------------------------------------
 */

.my-compare-list {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 0;
	max-height: 96%;
	text-align: center;
	z-index: 200;

	> .btn {
		position: absolute;
		top: 0;
		left: 50%;
		-webkit-transform: translate(-50%, -100%);
		-ms-transform: translate(-50%, -100%);
		transform: translate(-50%, -100%);
		@include transition(transform $transition-time-short ease-in);

		.no-csstransforms & {
			top: em(-56px);
		}

		.is-android-4 & {
			-webkit-transform: translate3d(-50%, -100%, 0);
			transform: translate3d(-50%, -100%, 0);
		}

		&.has-new-content {
			-webkit-transform: translate(-50%, -100%) scale(1.2);
			-ms-transform: translate(-50%, -100%) scale(1.2);
			transform: translate(-50%, -100%) scale(1.2);
		}
		.is-android-4 &.has-new-content {
			-webkit-transform: translate3d(-50%, -100%, 0) scale(1.2);
			-ms-transform: translate3d(-50%, -100%, 0) scale(1.2);
			transform: translate3d(-50%, -100%, 0) scale(1.2);
		}

		&.has-removed-content {
			-webkit-transform: scale(0.95) translate(-52%, -100%);
			-ms-transform: scale(0.95) translate(-52%, -100%);
			transform: scale(0.95) translate(-52%, -100%);
		}
		.is-android-4 &.has-removed-content {
			-webkit-transform: scale(0.95) translate3d(-52%, -100%, 0);
			-ms-transform: scale(0.95) translate3d(-52%, -100%, 0);
			transform: scale(0.95) translate3d(-52%, -100%, 0);
		}
	}

	.my-compare-list-content {
		overflow: auto;
		text-align: left;
		background-color: $white;
		border-top: em(4px) solid $accent-color;

		ul {
			@include clearfix();
			@include font-size($p-small-sizes);
			margin: 0;
			padding: em(24px, getFontsize($p-small-sizes, null)) 0 em(32px, getFontsize($p-small-sizes, null)) 0;
			list-style: none;
			font-weight: 600;

			li {
				position: relative;
				display: block;
				width: 48%;
				margin-right: 2%;
				float: left;
				border-bottom: 1px solid $grey-light;
				padding: em(6px, getFontsize($p-small-sizes, null)) em(25px, getFontsize($p-small-sizes, null)) em(8px, getFontsize($p-small-sizes, null));

				a {
					color: $text-color;
				}

				a.close-btn {
					position: absolute;
					right: em(4px, getFontsize($p-small-sizes, null));

					&:hover {
						color: $accent-color;
					}
				}
			}
		}

		.my-compare-list-buttons {
			text-align: center;
			margin-bottom: em(26px);
		}
	}
}


/**
 * 1.1 - My compare list (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.my-compare-list {
		.my-compare-list-content {
			ul {
				margin: 0 5%;

				li {
					width: 100%;
					float: none;
				}
			}
		}
	}
}



/**
 * 2.0 - Compare button (no js)
 * -----------------------------------------------------------------------------
 */

.compare-nojs-btn {
	position: fixed;
	bottom: 0;
	z-index: 200;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}



/**
 * 3.0 - Compare header
 * -----------------------------------------------------------------------------
 */

.compare-header {
	border-bottom: em(4px) solid $accent-color;
	margin-top: em(56px);

	.btn {
		margin-left: $margin-standard / 2;
		margin-top: em(20px, 15px);
	}
}


/**
 * 3.1 - Compare header (responsive)
 * -----------------------------------------------------------------------------
 */
@media (max-width: $device-small-max) {
	.compare-header {
		margin-top: em(36px);

		.btn {
			float: none;
			margin: em(5px, 15px) $margin-standard / 2 em(15px, 15px) 0;
		}
	}
}



/**
 * 4.0 - Compare table
 * -----------------------------------------------------------------------------
 */

.compare-table, .poll-table {
	position: relative;
	font-size: em(17px);

	th {
		background-color: transparent;
		font-weight: 400;

		.h-standfirst {
			font-size: em(24px, 17px);
			margin-top: -2px !important;
			margin-bottom: 0 !important;
			padding: 0;
			display: inline-block;
		}
	}

	th, td {
		width: 25%;
		border: 0;
		border-top: 1px solid $grey-light;
		border-left: 1px solid $grey-light;
		padding-top: em(8px, 17px);
		padding-bottom: em(8px, 17px);

		&:first-child {
			border-left: 0;
		}

		.info-btn {
			font-size: em(20px, 17px);
			display: inline-block;
			margin-top: em(-4px, 20px);
			margin-bottom: em(-2px, 20px);
		}
	}

	thead {
		th {
			border: 0;
		}

		.col-0 {
			padding-top: em(11px, 17px);
			padding-bottom: em(5px, 17px);
		}
	}

	tfoot {
		th, td {
			text-align: center;
		}
	}

	.expand-header {
		& th {
			height: em(48px);
			border: 0;
			border-top: 1px solid $grey;
			background-color: $grey-lighter;

			> a {
				font-size: em(18px, 17px);
				position: absolute;
				display: block;
				width: 95%;
				color: $text-color;
				font-weight: 600;
			}
		}
	}

	.steppable {
		th, td {
			&, &.hidden-col {
				position: absolute;
				clip: rect(1px, 1px, 1px, 1px);
				left: 0;
			}

			&.col-0, &.col-1, &.col-2, &.col-3, &.visible-col {
				position: relative;
				clip: auto;

				&.hidden-col {
					position: absolute;
					clip: rect(1px, 1px, 1px, 1px);
					left: 0;

				}
			}
		}
	}

	&.compare-count-1 {
		th, td {
			width: 50%;
		}
	}

	&.compare-count-2 {
		th, td {
			width: 33%;
		}
	}

	.compare-explanation {
		font-weight: 400;
		p {
			@include font-size($p-small-sizes);
		}
	}

	.bar {
		font-size: em(17px, 17px);
		margin: em(3px, 17px) 0 em(6px, 17px);
	}

	.btn, button, input[type="submit"] {
		&.btn-small {
			font-size: em(15px, 17px);
		}
	}
}

.poll-table {
	th, td {
		border-top: 0;
	}

	.bar .bar-meter .bar-text {
		top: -4px;
	}
}



/**
 * 4.1 - Compare table (responsive)
 * -----------------------------------------------------------------------------
 */

/*@media (max-width: $device-medium-max) {
	.compare-table {
		th, td {
			width: 33%;
		}
		&.compare-count-1 {
			th, td {
				width: 50%;
			}
		}
		.steppable {
			th, td {
				&.col-3 {
					position: absolute;
					clip: rect(1px, 1px, 1px, 1px);
					left: 0;

					&.visible-col {
						position: relative;
						clip: auto;
					}
				}
			}
		}
	}
}*/

@media (max-width: $device-small-max) {
	.compare-table {
		margin-bottom: 0;

		thead {
			display: none;
		}

		th, td {
			border-left: 0;
			padding-left: em(10px, 17px);
			padding-right: em(10px, 17px);
		}

		&, & .steppable {
			th, td {
				position: relative !important;
				max-width: 100%;
				width: 100%;
				display: block !important;
				clip: auto;
			}
		}

		td {
			&:before {
				display: block;
				content: attr(data-name);
				font-weight: bold;
			}
		}

		.col-0 {
			$font-size: 20px;
			font-size: em(20px, 17px);
			border-top: 10px solid $grey-lighter;
			font-weight: 600;
			padding-top: em(10px, $font-size);
			padding-bottom: em(10px, $font-size);
			background-color: $grey-lighter;
		}
		.col-1 {
			border-top: 0;
		}

		tfoot {
			td {
				position: relative;
				text-align: left;
				min-height: em(57px, 17px);

				&:before {
					display: inline-block;
					padding-top: 8px;
				}

				&.col-1 {
					padding-top: em(24px, 17px);
					min-height: em(71px, 17px);
				}
			}
			.btn {
				position: absolute;
				right: 0;
			}

			.col-0 {
				padding-top: 0;
				padding-bottom: 0;
			}
		}

		.expand-header {
			display: none;
		}

		.steppable {
			position: relative;
			height: auto;
			visibility: visible;
			opacity: 1;

			th, td {
				position: relative;
				clip: auto;

				&.hidden-col {
					position: absolute;
					clip: rect(1px, 1px, 1px, 1px);
					left: 0;
				}
			}
		}

		.is-visible-small {
			display: table-row-group !important;
		}

	}
}


/**
 * 4.2 - Compare table (no js)
 * -----------------------------------------------------------------------------
 */

html.no-js {
	.compare-table-holder {
		width: 100%;
		overflow: auto;

		.compare-table {
			width: auto;

			th, td {
				display: table-cell !important;
				position: relative !important;
				clip: auto !important;
			}
		}
	}
}



/**
 * 5.0 - Compare table navigation
 * -----------------------------------------------------------------------------
 */

.compare-table-nav {
	$size: 30px;

	margin: em(20px) 0 em(10px);

	a {
		visibility: hidden;

		> .icon {
			width: em($size);
			height: em($size);
			border-radius: em($size);
			border: em(2px) solid $accent-color;
			text-align: center;
			display: inline-block;
			margin-right: em(10px);
		}

		&.compare-table-nav-next > .icon {
			margin-left: em(10px);
			margin-right: 0;
		}

		&.is-initialized {
			visibility: visible;
		}

		&.is-inactive {
			pointer-events: none;
			cursor: default;
			visibility: hidden;
		}
	}
}