.wpcb-configurator-gallery {
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100%;
	width: 100%;
	background-color: $template_gallery;
	display: flex;
	align-items: center;
	overflow: hidden;

	.wpcb-configurator-gallery-content {
		width: 100%;
	}

	&--model {
		.wpcb-configurator-gallery-content {
			height: 100%;
		}
	}

	&.loading {
		&:before {
			content: '';
			display: block;
			position: absolute;
			z-index: 1000;
			right: 0;
			left: 0;
			bottom: 0;
			top: 0;
			background: $template_gallery;
			opacity: 0.5;
			transition: all .3s ease-in-out;
		}
	}

	.slick-prev.slick-arrow,
	.slick-next.slick-arrow {
		appearance: none;
		display: inline-block;
		border: 1px solid $template_border;
		background-color: $template_accent;
		border-radius: 8px;
		padding: 12px;
		width: 50px;
		height: 50px;
		visibility: hidden;
		cursor: pointer;
		z-index: 1;

		img {
			display: block;
			width: 24px;
			height: 24px;
		}

		&.slick-disabled {
			opacity: 0.3;
		}
	}

	&:hover {
		.slick-prev.slick-arrow,
		.slick-next.slick-arrow {
			visibility: visible;
		}
	}

	.slick-prev.slick-arrow {
		position: absolute;
		left: 30px;
		top: 50%;
		transform: translateY(-50%);

		img {
			transform: rotate(-180deg);
		}
	}

	.slick-next.slick-arrow {
		position: absolute;
		right: 30px;
		top: 50%;
		transform: translateY(-50%);
	}

	.wpcb-configurator-gallery__wrapper {
		width: 100%;
	}

	.wpcb-configurator-gallery__image {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		padding: 30px 0;

		@media (min-width: 992px) {
			padding: 90px 0;
		}
	}

	.wpcb-configurator-gallery__model {
		display: block;
		height: inherit;
		width: 100%;

		model-viewer {
			display: block;
			width: 100%;
			height: 100%;

			.ar-button {
				appearance: none;
				position: absolute;
				right: 30px;
				bottom: 15px;
				display: inline-flex;
				align-items: center;
				border: 1px solid $template_border;
				color: $template_color;
				background-color: $template_background;
				border-radius: 8px;
				padding: 12px;
				outline: 0;
				cursor: pointer;

				span {
					margin-left: 4px;
				}

				&:hover,
				&:focus {
					border-color: $button_border;
				}
			}
			
			.hotspot {
				position: relative;
				padding: 0;
				background-color: transparent;
				appearance: none;
				border: 0;
				--min-hotspot-opacity: 0;

				.hotspot-toggle {
					background-color: $template_background;
					padding: 8px;
					border-radius: 8px;

					.hotspot-plus,
					.hotspot-minus {
						width: 20px;
						height: 20px;
						align-items: center;
					}

					.hotspot-plus {
						display: flex;
					}

					.hotspot-minus {
						display: none;
					}
				}

				.hotspot-content {
					display: none;
				}

				&.active {
					.hotspot-toggle {
						.hotspot-minus {
							display: flex;
						}
						.hotspot-plus {
							display: none;
						}
					}
			
					.hotspot-content {
						position: absolute;
						top: 0;
						left: 42px;
						background-color: $template_background;
						color: $template_color;
						padding: 8px;
						display: block;
						width: 200px;
						text-align: left;
						
						img {
							width: 100%;
							margin-bottom: 10px;
						}
					}
				}
			}
		}

		.wpcb-dot {
			display: none;
		}

		.wpcb-dim {
			box-sizing: border-box;
			display: block;
			border-radius: 6px;
			background-color: var(--wpcb-template-background);
			border: 1px solid var(--wpcb-template-border-color);
			color: var(--wpcb-template-color);
			max-width: 128px;
			font-weight: 700;
			font-size: 16px;
			overflow-wrap: break-word;
			padding: 0.5em 1em;
			position: absolute;
			width: max-content;
			height: max-content;
			transform: translate3d(-50%, -50%, 0);
			pointer-events: none;
			--min-hotspot-opacity: 0;
		}

		.wpcb-dim-lines {
			pointer-events: none;
			display: block;
		}

		.wpcb-dim-line {
			stroke: var(--wpcb-template-border-color);
			stroke-width: 2;
			stroke-dasharray: 2;
		}

		.hide {
			display: none;
		}
	}

	&.wpcb-border-square {

		.slick-prev,
		.slick-next {
			border-radius: 0;
		}

		.wpcb-configurator-gallery__model {
			model-viewer {
				.hotspot .hotspot-toggle {
					border-radius: 0;
				}
				.ar-button {
					border-radius: 0;
				}
			} 

			.wpcb-dim {
				border-radius: 0;
			}
		}
	}

	&.wpcb-border-pill {

		.slick-prev,
		.slick-next {
			border-radius: 25px;
		}

		.wpcb-configurator-gallery__model {
			model-viewer {
				.hotspot .hotspot-toggle {
					border-radius: 20px;
				}
				.ar-button {
					border-radius: 0;
				}
			}

			.wpcb-dim {
				border-radius: 20px;
			}
		}
	}
}

.wpcb-configurator-visuals {

	&.visuals-fullwidth {

		.wpcb-configurator-gallery-nav--underneath {
			margin: 15px;

			@media (min-width: 1200px) {
				margin: 30px 30px 0;
			}
		}
	}

	&.visuals-sticky {
		@media (max-width: 991px) {
			position: sticky;
			top: 0;
			z-index: 1;
		}
	}
}