@keyframes woosc-spinner {
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes woosc-spinner {
	to {
		-webkit-transform: rotate(360deg);
	}
}

.woosc-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 99999999;
	opacity: 0;
	visibility: hidden;
	transition: all .5s;

	&.open {
		opacity: 1;
		visibility: visible;

		.woosc-popup-content {
			transform: translate3d(-50%, -50%, 0);
		}
	}

	.woosc-popup-inner {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.woosc-popup-content {
		position: absolute;
		padding: 15px;
		top: 50%;
		left: 50%;
		width: 360px;
		height: 400px;
		max-width: 90%;
		max-height: 90%;
		background-color: #fff;
		border-radius: 2px;
		transform: translate3d(-50%, -40%, 0);
		transition: all .5s;
	}

	.woosc-popup-content-inner {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.woosc-popup-close {
		width: 32px;
		height: 32px;
		line-height: 32px;
		position: absolute;
		top: -32px;
		right: -32px;
		color: #fff;
		text-align: center;
		background-image: url(../../woocommerce/compare/close.svg);
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
		user-select: none;
	}

	.woosc-search-input input {
		display: block;
		width: 100%;
		min-height: 40px;
		padding: 0 10px;
		-webkit-appearance: none;
	}

	.woosc-search-result {
		flex-grow: 1;
		margin-top: 15px;
		overflow-y: auto;
		position: relative;

		ul {
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				display: block;
				padding: 10px 0;
				border: 1px solid #fafafa;

				.item-inner {
					display: flex;
					align-items: center;
				}

				.item-image {
					width: 48px;

					img {
						width: 48px;
						height: 48px;
						border-radius: 2px;
						box-shadow: none;
					}
				}

				.item-name {
					flex-grow: 1;
					padding: 0 10px;
					color: #000;
				}

				.item-add {
					width: 48px;
					text-align: center;
					user-select: none;

					span {
						display: inline-block;
						width: 32px;
						height: 32px;
						line-height: 32px;
						text-align: center;
						color: #000;
						background-color: #f2f2f2;
						cursor: pointer;
						border-radius: 2px;
						transition: all .5s;

						:hover {
							color: #fff;
							background-color: #000;
						}
					}
				}
			}
		}

		&:before {
			content: '';
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 7;
			background-color: rgba(255, 255, 255, 0.7);
			opacity: 0;
			visibility: hidden;
		}

		&:after {
			width: 32px;
			height: 32px;
			display: block;
			margin-top: -16px;
			margin-left: -16px;
			content: '';
			background-image: url(../../woocommerce/compare/curve.svg);
			background-repeat: no-repeat;
			background-position: center;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 8;
			animation: woosc-spinner 1s linear infinite;
			opacity: 0;
			visibility: hidden;
		}

		&.woosc-loading {
			&:after {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	.woosc-settings-fields {
		margin: 10px 0 0 0;
		padding: 0;
		list-style-type: none;
		position: relative;
		overflow-y: auto;

		li span {
			cursor: move;
			margin-left: 5px;
			user-select: none;
		}
	}
}

.woosc-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999979;
	box-sizing: border-box;
	pointer-events: none;

	.woosc-inner {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.woosc-table {
		padding: 15px 15px 78px 15px;
		margin: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #292a30;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		z-index: 99999997;
		pointer-events: none;

		* {
			box-sizing: border-box;
		}

		&.woosc-table-open {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}
	}

	.woosc-table-inner {
		background-color: #fff;
		width: 100%;
		height: 100%;
		max-height: 100%;
		overflow: hidden;
		position: relative;

		&:before {
			content: '';
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(255, 255, 255, 0.7);
			opacity: 0;
			visibility: hidden;
			z-index: 7;
		}

		&:after {
			width: 32px;
			height: 32px;
			display: block;
			margin-top: -16px;
			margin-left: -16px;
			content: '';
			background-image: url(../../woocommerce/compare/curve.svg);
			background-repeat: no-repeat;
			background-position: center;
			position: absolute;
			top: 50%;
			left: 50%;
			opacity: 0;
			visibility: hidden;
			z-index: 8;
			animation: woosc-spinner 1s linear infinite;
		}

		&.woosc-loading {
			&:before,
			&:after {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	.woosc-table-close {
		z-index: 6;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		user-select: none;
	}

	.woosc-table-close-icon {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		min-width: 48px;
		min-height: 48px;
		background-color: #eee;
		background-image: url(../../woocommerce/compare/remove-dark.svg);
		background-repeat: no-repeat;
		background-position: center;
	}

	.woosc-table-items {
		z-index: 5;
		height: 100%;
		position: relative;
	}

	.woosc_table {
		border-spacing: 0;
		border-collapse: collapse;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index: 6;

		td, th {
			position: relative;
			vertical-align: middle;
			/*min-width: 200px;
			max-width: 400px;*/
			min-width: 301px; // 1px for border.
			background-color: #fff;
			border: 1px solid #eee;
			padding: 15px 30px;
			text-align: start;
			line-height: 26px;
		}

		thead {
			z-index: 8;

			tr {
				border: none;
				margin: 0;
				padding: 0;
			}

			th {
				z-index: 8 !important;
				margin: 0;
				font-size: 18px;
				color: $heading-color;
				font-weight: $body-font-weight-medium;
				background-color: #fff !important;
				border-bottom-width: 0;
				padding: 20px 20px 5px;

				a {
					text-decoration: none;
				}
			}
		}

		tbody {
			z-index: 7;

			tr {
				border: 0;
				margin: 0;
				padding: 0;

				&.tr-hide {
					display: none;
				}

				&:first-child {
					td {
						border-top: 0;
					}
				}
			}

			td {
				border-collapse: collapse;
				z-index: 6;

				&.td-placeholder {
					text-align: center;

					&:before {
						content: '';
						display: inline-block;
						width: 60px;
						height: 8px;
						background-color: #eee;
						border-radius: 2px;
					}
				}
			}

			tr {
				&.tr-image {
					td {
						padding: 15px 20px;
					}

					td.td-placeholder {
						background-image: url(../../woocommerce/compare/placeholder.png);
						background-repeat: no-repeat;
						background-position: center;
					}
				}

				&.tr-image td.td-placeholder:before {
					display: none;
				}

				&.tr-image a {
					text-decoration: none;
					outline: none;
					display: block;
				}

				&.tr-image img {
					display: block;
					width: 100%;
					margin: 0;
					padding: 0;
					border: none;
					height: auto;
					border-radius: 2px;
					box-shadow: none;
				}

				&.tr-add_to_cart {
					&:last-child {
						td {
							padding: 20px;
						}
					}

					p,
					.price {
						display: none;
					}

					.woocommerce_loop_add_to_cart_wrap {
						display: block;
						width: 100%;

						// Disable tooltip
						&:before,
						&:after {
							display: none;
						}
					}

					.button {
						display: block;
						width: 100%;
						height: 40px;
						line-height: 38px;
					}
				}
			}
		}

		thead th,
		tbody td {
			&:first-child {
				z-index: 9 !important;
				font-size: 16px;
				color: $heading-color;
				font-weight: $body-font-weight-medium;
				text-align: center;
				background: #f8f8f8 !important;
				min-width: 271px;
			}
		}

		&.has-1 {
			.th-placeholder,
			.td-placeholder {
				width: 25%;
			}
		}

		&.has-2 {
			.th-placeholder,
			.td-placeholder {
				width: 33.333333%;
			}
		}

		&.has-3 {
			.th-placeholder,
			.td-placeholder {
				width: 50%;
			}
		}

		&.has-4 {
			.th-placeholder,
			.td-placeholder {
				width: 100%;
			}
		}

		&:not(.has-1):not(.has-2):not(.has-3):not(.has-4) {
			thead th,
			tbody td {
				&:first-child {
					width: 100%;
				}
			}
		}
	}

	.woosc-no-result {
		display: block;
		padding: 15px;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}

	.woosc-bar {
		width: 100%;
		height: 78px;
		position: fixed;
		left: 0;
		bottom: -80px;
		padding: 15px;
		box-sizing: border-box;
		background-color: #292a30;
		color: #cfd2d4;
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		z-index: 99999998;
		transition: all 0.5s;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.woosc-bar-btn {
		height: 48px;
		line-height: 48px;
		padding: 0 20px 0 68px;
		position: relative;
		border-radius: 2px;
		background-color: $primary-color !important;
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		text-transform: uppercase;
		order: 1;
		margin-left: 15px;
		cursor: pointer;
		user-select: none;

		&.woosc-bar-btn-icon {
			font-size: 0;
			padding: 0;
			width: 48px;
			overflow: hidden;
		}
	}

	.woosc-bar-btn-icon-wrapper {
		width: 48px;
		height: 48px;
		line-height: 48px;
		background-color: rgba(0, 0, 0, 0.1);
		text-align: center;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.woosc-bar-btn-icon-inner {
		width: 16px;
		height: 12px;
		margin-top: 18px;
		margin-left: 16px;
		position: relative;

		span {
			display: block;
			position: absolute;
			height: 2px;
			width: 100%;
			background: #fff;
			border-radius: 2px;
			opacity: 1;
			left: 0;
			transform: rotate(0deg);
			transition: 0.25s ease-in-out;

			&:nth-child(1) {
				top: 0;
			}

			&:nth-child(2) {
				top: 5px;
			}

			&:nth-child(3) {
				top: 10px;
			}
		}
	}

	.woosc-bar-btn.woosc-bar-btn-open {
		.woosc-bar-btn-icon-inner {
			span {
				&:nth-child(1) {
					top: 6px;
					transform: rotate(135deg);
				}

				&:nth-child(2) {
					opacity: 0;
					left: -60px;
				}

				&:nth-child(3) {
					top: 6px;
					transform: rotate(-135deg);
				}
			}
		}
	}

	.woosc-bar-search {
		width: 48px;
		height: 48px;
		display: inline-block;
		position: relative;
		margin: 0 10px 0 0;
		cursor: pointer;
		background: rgba(255, 255, 255, 0.1) url(../../woocommerce/compare/add.svg) no-repeat center;
		background-size: 20px 20px;
		border-radius: 2px;
		transition: all .5s;
	}

	.woosc-bar-settings {
		width: 48px;
		height: 48px;
		display: inline-block;
		position: relative;
		margin: 0;
		cursor: pointer;
		background: transparent url(../../woocommerce/compare/checkbox.svg) no-repeat center;
		background-size: 16px 16px;
		border-radius: 2px;
		transition: all 0.5s;
	}

	.woosc-bar-remove {
		width: 48px;
		height: 48px;
		display: inline-block;
		position: relative;
		margin: 0 0 0 10px;
		cursor: pointer;
		background: #e32718 url(../../woocommerce/compare/trash.svg) no-repeat center;
		background-size: 16px 16px;
		border-radius: 2px;
		transition: all 0.5s;
	}

	.woosc-bar-items {
		height: 48px;
		max-width: 70%;
		white-space: nowrap;
		width: auto;
		text-align: right;
		order: 0;
	}

	.woosc-bar-item {
		width: 48px;
		height: 48px;
		display: inline-block;
		position: relative;
		margin: 0 5px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 2px;
		user-select: none;

		img {
			width: 48px;
			height: 48px;
			cursor: move;
			z-index: 6;
			border-radius: 2px;
			user-drag: none;
		}

		&.removing {
			opacity: .5;
		}

		&:hover {
			.woosc-bar-item-remove {
				opacity: 1;
				visibility: visible;
			}
		}

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

		&:last-child {
			margin-right: 0;
		}
	}

	.woosc-bar-item-remove {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 2px;
		right: 2px;
		z-index: 7;
		background: #000 url(../../woocommerce/compare/remove-light.svg) no-repeat center;
		background-size: 12px;
		border-radius: 1px;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;

		&:hover {
			background-color: $danger-color;
		}
	}

	.woosc-bar.woosc-bar-open {
		bottom: 0;
		pointer-events: auto;
		opacity: 1;
		visibility: visible;
	}

	.woosc-bar-notice {
		position: fixed;
		bottom: 88px;
		left: 50%;
		padding: 0 10px;
		background-color: rgba(0, 0, 0, .7);
		color: #fff;
		border-radius: 2px;
		transform: translate(-50%, 10px);
		opacity: 0;
		visibility: hidden;
		transition: all .5s;
	}

	.woocommerce-product-attributes {
		margin: 0;

		th,
		td {
			border: 0;
			line-height: 24px;
			min-width: 0;
			max-width: unset;
		}

		td {
			padding: 0 0 0 8px;
		}

		th {
			padding: 0 8px 0 0;
			width: 100px;
		}
	}
}

.woosc-table-settings {
	background: url(../../woocommerce/compare/checkbox-dark.svg) no-repeat center left;
	background-size: 16px;
	padding: 0 0 0 21px;
}

.woosc-settings-tools {
	list-style-type: none;
	padding: 0;
	margin: 0 0 10px;
}

.woosc-remove {
	--line-color: #000;
	--hover-line-color: #000;
	@extend %LinkTransition02;
	text-transform: none;
	font-weight: 400;
	cursor: pointer;
	padding: 0;
}

.woosc_table {
	.entry-product-stock {
		margin: 0 !important;

		.minimog-progress {
			margin: 1px 0 0 !important;
		}
	}
}

.compare-price-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	.price {
		font-size: 18px;
		margin: 3px 15px 3px 0;

		.wc-price-separator {
			font-size: 18px;
		}

		.amount {
			color: $heading-color;
		}

		ins {
			.amount {
				color: $primary-color;
			}

			.wc-price-separator {
				color: $primary-color;
			}
		}

		del {
			font-size: 13px;

			.amount {
				color: $text-color;
			}

			.wc-price-separator {
				color: $text-color;
			}
		}
	}
}

.compare-reviews-wrap {
	display: flex;

	.tm-star-rating {
		line-height: 26px;
	}

	.star-rating {
		margin: 0 14px 0 0;
	}
}

.compare-rating-average {
	font-weight: $body-font-weight-medium;
	color: $heading-color;
	margin: 0 10px 0 0;
}

.compare-review-count {
	position: relative;
	padding: 0 0 0 10px;
	margin: 0 0 0 10px;
	color: $text-lighten-color;

	&:before {
		content: '';
		position: absolute;
		top: 5px;
		left: 0;
		height: 16px;
		width: 1px;
		background: currentColor;
	}
}

.compare-price-saved {
	flex-shrink: 0;
	color: #fff;
	background: $primary-color;
	font-size: 14px;
	font-weight: $body-font-weight-medium;
	line-height: 18px;
	padding: 3px 10px;
	margin: 3px 0;
	border-radius: 2px;
}

.woosc-table {
	.stock {
		font-size: $body-font-size;
	}
}

.woosc-table-items {
	.ps__rail-x,
	.ps__rail-y {
		z-index: 10;
	}
}

.woosc-area.woosc-area-open-bar.woosc-bar-click-outside-yes:not(.woosc-area-open-table) .woosc-inner .woosc-bar:hover .woosc-bar-notice,
.woosc-area.woosc-area-open-bar.woosc-bar-click-outside-yes-empty[data-count="0"]:not(.woosc-area-open-table) .woosc-inner .woosc-bar:hover .woosc-bar-notice {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.woosc-area .woosc-inner .woosc-bar[data-count="0"] .woosc-bar-search {
	margin-right: 0;
}

.woosc-area .woosc-inner .woosc-bar[data-count="0"] .woosc-bar-remove, .woosc-area .woosc-inner .woosc-bar[data-count="1"] .woosc-bar-remove {
	display: none;
}

.woosc-area.woosc-bar-top .woosc-inner .woosc-table {
	padding: 78px 15px 15px 15px;
}

.woosc-area.woosc-bar-top .woosc-inner .woosc-bar {
	top: -80px;
	bottom: auto;
}

.woosc-area.woosc-bar-top .woosc-inner .woosc-bar.woosc-bar-open {
	top: 0;
}

.woosc-area.woosc-bar-left .woosc-inner .woosc-bar {
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.woosc-area.woosc-bar-left .woosc-inner .woosc-bar .woosc-bar-btn {
	order: 0;
	margin-left: 0;
	margin-right: 15px;
}

.woosc-area.woosc-bar-left .woosc-inner .woosc-bar .woosc-bar-remove {
	order: 1;
	margin: 0 10px 0 0;
}

.woosc-area.woosc-bar-left .woosc-inner .woosc-bar .woosc-bar-items {
	order: 2;
	text-align: left;
}

.woosc-area.woosc-bar-left .woosc-inner .woosc-bar .woosc-bar-search {
	order: 3;
	margin: 0 0 0 10px;
}

.woosc-area.woosc-bar-left .woosc-inner .woosc-bar .woosc-bar-settings {
	order: 4;
}

.woosc-menu-item .woosc-menu-item-inner {
	position: relative;
}

.woosc-menu-item .woosc-menu-item-inner:after {
	content: attr(data-count);
	display: block;
	background-color: #e94b35;
	color: #fff;
	font-size: 10px;
	font-weight: $body-font-weight;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
	position: absolute;
	top: -10px;
	right: -10px;
}

body.woocommerce-cart .woosc-hide-checkout, body.woocommerce-checkout .woosc-hide-checkout {
	display: none;
}

.woosc_list {
	max-width: 100%;
	overflow-x: auto;
}

.woosc_table table tr th, .woosc_table table tr td {
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
}

@media screen and (max-width: 767px) {
	.woosc-bar .woosc-bar-btn {
		font-size: 0 !important;
		padding: 0 !important;
		width: 48px !important;
		overflow: hidden;
	}
}

@media print {
	.woosc_table .tr-add_to_cart {
		display: none;
	}
}

.woosc-area .woosc-inner .woosc-bar.woosc-bar-bubble {
	background-color: transparent !important;
	background: none !important;
	pointer-events: none;
}

.woosc-area .woosc-inner .woosc-bar.woosc-bar-bubble > a, .woosc-area .woosc-inner .woosc-bar.woosc-bar-bubble .woosc-bar-items, .woosc-area .woosc-inner .woosc-bar.woosc-bar-bubble .woosc-bar-remove {
	display: none !important;
}

.woosc-area .woosc-inner .woosc-bar.woosc-bar-bubble .woosc-bar-btn {
	pointer-events: auto;
	width: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	-moz-box-shadow: rgba(0, 0, 0, .15) 0px 0px 20px;
	-webkit-box-shadow: rgba(0, 0, 0, .15) 0px 0px 20px;
	box-shadow: rgba(0, 0, 0, .15) 0px 0px 20px;
}
