@import url('variables.css');
@import url(base/mixins.css');

div.flickity-viewport {
	height: 0;
	@include transition(height .3s ease);
}

img {
	&.lazy {
		&.fadeIn {
			opacity: 0;
			transition: opacity .3s linear;
			-webkit-transition: opacity .3s linear;
			-will-change: opacity;
			
			&.loaded {
				opacity: 1 !important;
			}
		}
	}

	transition: opacity .5s linear;
	-webkit-transition: opacity .5s linear ;
	-will-change: opacity;

	&.lazy-load {
		opacity: 0 !important;

		&-active {
			opacity: 1 !important;
		}
	}
}

div.fixedBtn {
	position: fixed;
	bottom: 30px;
	left: 15px;
	margin: auto;
	@include border-radius(15px);
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	background: $color1;
	z-index: 999;
	display: none;
	max-width: calc(100% - 150px);

	button {
		display: flex;
		margin: 0;
		align-items: center;

		img {
			height: 30px;
			margin-left: 10px;
		}

		a {
			line-height: 1.4;

			@media screen and (max-width: $mb-wrapper) {
				padding: 5px 0;
				text-align: left;
				font-size: 15px;
			}
		}
	}

	@media screen and (max-width: $mb-wrapper) {
		display: block;
	}
}

div.product {
	transform: translateY(0);
	transition: transform .3s ease;
	cursor: pointer;

	div.slidePanel {
		position: absolute;
		left: 10px;
		top: calc(100% - 20px);
		background: #fff;
		width: 100%;
		z-index: -1;
		height: 0;
		transition: height .3s ease, box-shadow .2s ease;
		will-change: box-shadow;
		overflow: hidden;

		div.inner {
			position: relative;
			padding: 50px 30px 20px;
			height: 100%;

			div.exitBtn {
				position: absolute;
				top: 10px;
				right: 30px;
				cursor: pointer;

				img {
					height: 15px;
					width: 15px;
				}
			}

			div.flkSlider {
				position: relative;
				width: 100%;
				transition: height .3s ease;
				
				@media screen and (max-width: 550px) {
					width: calc(100% + 60px);
					transition: height 0.3s ease;
					margin-left: -30px;
				}

				div.slide {
					// position: relative;
					width: 100%;
					// height: 100%;
					overflow: hidden;
					@include transition(height .3s ease);
					z-index: 1;

					img {
						position: relative;
						height: auto;
						width: 100%;
						opacity: 0;
						z-index: 2;

						&.flickity-lazyloaded {
							opacity: 1;
						}
					}

					div.bg {
						position: absolute;
						z-index: 1;
						width: 100%;
						height: 100%;
					}
				}
			}

			div.thumbs {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				div.slide {
					position: relative;
					border: 1px solid #000;
					margin-bottom: 8px;
					width: calc(50% - 4px);
					height: 80px;
					overflow: hidden;
					background: #000;
					cursor: pointer;

					@media screen and (max-width: 768px) {
						height: 140px;
					}

					img {
						position: relative;
						object-fit: cover;
						height: 100%;
						width: 100%;
						opacity: 0;
						z-index: 2;

						&.lazyloaded {
							opacity: .7;
						}
					}

					div.bg {
						position: absolute;
						z-index: 1;
						width: 100%;
						height: 100%;
					}

					&:hover {
						img {
							opacity: 1;
						}
					}
				}
			}

			div.container {
				&.alignBottom {
					display: none;

					@media screen and (min-width: $mb-wrapper) {
						display: block;
					}

					div.col {
						&.btn {
							display: flex;
							justify-content: flex-end;
							padding-right: 0;
							padding-bottom: 0;
							margin-right: 0;

							@media screen and (min-width: 768px) {
								margin-left: -40px;
							}

							button.btn {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								padding: 0;
								margin-bottom: 0;

								a {
									color: $color1;
								}

								img {
									height: 20px;
									width: 20px;
									margin-left: 15px;
								}
							}
						}
					}
				}
			}
		}
	}

	&.activeSlidePanel {
		z-index: 2;

		div.slidePanel {
			height: auto;
			background: whitesmoke;
		}

		div.col-inner {
			div.product-small {
				background: whitesmoke !important;
			}
		}
	}
}


body {
	&.tax-product_cat {
		div#shop-sidebar{
			@media screen and (max-width: 850px) {
				display: none;	
			}
		}
	}

	header {
		&#header {
			transition: transform .3s ease;
			-webkit-transition: transform .3s ease;
			-moz-transition: transform .3s ease;
		}
	}
}

div#homePage {
	@import 'base/grid/bootstrap';
	@import 'base/framework';
	position: relative;

	article {
		&#mainSlider {
			width: 100%;

			// .flickity-viewport {
			// 	height: 100% !important;
			// }
		
			div#slider {
				height: 800px;

				div.slide {
					width: 100%;
					height: 800px;

					a {
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
					}
				}
			}
		}

		&#categories {
			margin: 50px 0;

			div.wrapper {
				div.container {
					div.row {
						div.col {
							div.category {
								a {
									position: relative;
									width: 100%;
									height: 350px;
									z-index: 1;
									@include center-content();
									overflow: hidden;

									div.img {
										position: absolute;
										width: 100%;
										height: 100%;
										z-index: -1;
										@include transform(scale(1));
										@include transition(transform .5s ease);
									}
	
									div.name {
										position: relative;
										z-index: 2;
										display: inline-block;
										border: 1.5px solid #000;
										background: rgba(255,255,255,.7);
										padding: 5px 15px;
										@include center-content();
										@include transition(background-color .5s ease);
	
										span {
											text-transform: uppercase;
											letter-spacing: 3px;
											font-size: 18px;
											color: #000;
										}
									}
	
									&:hover {
										div.img {
											@include transform(scale(1.1));
										}
	
										div.name {
											background: rgba(255,255,255,.3);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}