@import "../../../../assets/sass/vars";
@import "../../../../assets/sass/mixins";

@keyframes c_spinner {
	to {
		transform: rotate(360deg);
	}
}

.slick-slide {
	.woocommerce-product-gallery__trigger {
		display: none !important;
	}
}

.wc-product-inner {
	.wc-product-media {
		// overflow: hidden;
	}
	.tophive-wc-quick-view {
		z-index: 15;
		overflow: hidden;
		text-align: center;
		transition: all 0.3s ease;
		background: rgba(0, 0, 0, 0.5);
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.82em;
		font-weight: 500;
		text-transform: uppercase;
		padding: 5px;
		&:before {
			font-family: "FontAwesome";
			content: "\f06e";
			box-sizing: border-box;
			width: 15px;
			height: 15px;
			overflow: hidden;
			display: inline-flex;
			margin-left: 0px;
			border-radius: 50%;
			margin-right: 6px;
			text-align: center;
			border: 0px solid transparent;
			align-items: center;
			justify-content: center;
			transform: translateY(0px);
		}
		&.loading {
			transform: translateY(0);
			&:before {
				content: "";
				border: 2px solid #cccccc;
				transform: translateY(0px);
				border-top-color: currentColor;
				animation: c_spinner 0.6s linear infinite;
			}
		}
	}
}

.woocommerce {
	.tophive-wc-modal {
		.product_title {
			font-size: 1.6em;
			@include for_device(mobile) {
				font-size: 1.5em;
			}
			a {
				color: currentColor;
			}
		}
	}
}

// Modal
.tophive-wc-modal {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 9000;
	display: flex;
	transition: opacity 0.5s linear;
	align-items: center;

	div.product
		div.images
		.woocommerce-product-gallery__image:nth-child(n + 2) {
		display: none;
	}

	.tophive-wc-modal-overlay {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		display: block;
		flex: none;
		z-index: 9010;
		background: rgba(0, 0, 0, 0.5);
		transition: opacity 0.3s linear;
		cursor: pointer;
	}
	&-cont {
		display: block;
		align-items: center;
		z-index: 9020;
		padding: 0;
		max-width: calc(100% - 2em);
		overflow: auto;
		width: 960px;
		max-height: 90vh;
		margin: 4em auto;
		transform: translateY(50px);
		@include for_device(mobile) {
			margin: 1em auto;
		}
		transition: opacity 0.3s linear, transform 0.3s linear;
		.tophive-wc-modal-col {
			margin: 0px;
			padding: 0px;
			> .product {
				&:after {
					content: "";
					display: block;
					clear: both;
				}
			}
			.woocommerce-product-gallery,
			.summary {
				width: 50%;
				float: left;
			}
		}

		.media-product-media {
			.woocommerce-product-gallery {
				width: 100%;
				img {
					min-height: 40vh;
					display: block;
					object-fit: cover;
				}
			}
			padding: 0px;
			img {
				width: 100%;
				max-width: 100%;
			}
		}

		.tophive-wc-modal-inner {
			margin: 0;
			width: 100%;
			display: block;
			background: #fff;
			padding: 0;
			position: relative;
			transition: all 0.3s ease;
			.tophive-wc-modal-close {
				display: block;
				position: absolute;
				top: 15px;
				right: 15px;
				@include for_device(tablet) {
					top: 15px;
					left: 15px;
					right: auto;
				}
				@include for_device(mobile) {
					top: 0.5em;
					left: 0.5em;
					right: auto;
				}
				overflow: hidden;
				z-index: 500;
			}
			.tophive-container {
				padding-left: 0px;
				padding-right: 0px;
				margin: 0px;
				transition: all 0.3s ease;
			}
			.tophive-grid {
				margin: 0px;
				padding: 0px;
			}
			div.images {
				margin-bottom: 0px;
			}
			div.summary {
				margin-bottom: 0px;
				padding: 2em;
				height: 100%;
				overflow-x: hidden;
				overflow-y: scroll;
				position: absolute;
				right: 0px;
				top: 0px;
				@include for_device(tablet) {
					position: relative;
					right: auto;
					top: auto;
				}
				.added_to_cart {
					display: inline-block;
				}
			}
			.added_to_cart {
				margin: 8px 10px;
			}
		}
	}

	&.hide {
		opacity: 0;
		z-index: 0;
		height: 0px;
		width: 0px;
		overflow: hidden;
		.tophive-wc-modal-overlay,
		.tophive-wc-modal-cont {
			opacity: 0;
			z-index: 0;
		}
	}

	&.show {
		.tophive-wc-modal-overlay {
			opacity: 1;
			z-index: 900010;
		}
		.tophive-wc-modal-cont {
			opacity: 1;
			z-index: 900020;
			transform: translateY(0px);
		}
	}

	.woocommerce-product-gallery {
		.woocommerce-product-gallery__wrapper {
			opacity: 0;
			transition: all 0.5s linear;
			&.slick-initialized {
				opacity: 1;
			}
		}
		.flex-viewport {
			.woocommerce-product-gallery__wrapper {
				opacity: 1;
			}
		}
		.slick-slide {
			line-height: 0px;
		}
		img {
			line-height: 0px;
		}
		// disable default gallery thumbs
		.flex-control-thumbs {
			display: none;
		}

		.flex-control-nav {
			position: absolute;
			bottom: 15px;
			list-style: none;
			display: block;
			text-align: center;
			padding: 0;
			margin: 0;
			z-index: 30;
			left: 40px;
			right: 40px;
			li {
				position: relative;
				display: inline-block;
				text-align: center;
				height: 15px;
				width: 15px;
				margin: 0 5px;
				padding: 0;
				cursor: pointer;
				a {
					border: 0;
					background: #333333;
					display: inline-block;
					text-decoration: none !important;
					height: 10px;
					width: 10px;
					outline: none;
					line-height: 0px;
					font-size: 0px;
					color: transparent;
					padding: 5px;
					cursor: pointer;
					box-shadow: none;
					border-radius: 50%;
					opacity: 0.5;
					transition: all 0.3s linear;
					&:hover,
					&:focus &.flex-active {
						outline: none;
						background: none;
						box-shadow: none;
						opacity: 1;
						background: #333333;
					}
				}
				.slick-active {
					opacity: 1;
					background: #333333;
				}
			}
		}
	}
}