.wpcb-configurator-wrapper,
.wpcb-configurator-popup-wrapper {
	position: relative;
	width: 100%;
	background-color: $template_background;

	* {
		box-sizing: border-box;
	}

	&,
	input,
	select,
	p {
		color: $template_color;
	}

	a:not(.wpcb-button) {
		color: $template_link;
	}

	.wpcb-configurator-gallery-actions {

		button,
		.wpcb-configurator-gallery-action-label {
			background-color: $template_background;
		}

		&.wpcb-configurator-gallery-actions-right {
			left: auto;
			right: 30px;
			
			@media (max-width: 991px) {
				right: 15px;
			}
		}
	}

	.wpcb-configurator-form-actions-list {
		margin: 0 0 20px;
	}
}

.wpcb-configurator-visuals {
	position: relative;
	width: 100%;

	.wpcb-configurator-gallery-actions {
		position: absolute;
		top: 30px;
		left: 30px;
		z-index: 3;

		@media (max-width: 991px) {
			top: 15px;
			left: 15px;
		}

		&.wpcb-configurator-gallery-actions-right {
			left: auto;
			right: 30px;

			@media (max-width: 991px) {
				right: 15px;
			}
		}
	}
}

.wpcb-configurator-options {
	width: 100%;
	background-color: $template_background;

	* {
		box-sizing: border-box;
	}
}

.wpcb-configurator-summary {
	background-color: $template_background;
}

div.lightbox-container::after {
	background-color: $template_background;
}

.wpcb-loading {
	&:before {
		content: '';
		border: medium;
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		background: $template_background;
		opacity: 0.6;
		z-index: 1000;
		cursor: wait;
	}

	&:after {
		content: '';
		z-index: 1000;
		height: 1em;
		width: 1em;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -.5em;
		margin-top: -.5em;
		animation: spin 1s ease-in-out infinite;
		background: $spinner_url center center;
		background-size: auto;
		background-size: cover;
		line-height: 1;
		text-align: center;
		font-size: 2em;
		color: $template_color;
		opacity: 0.75;
	}
}

.wpcb-template-gallery-sticky .wpcb-configurator-visuals {
	@media (max-width: 991px) {
		position: sticky;
		top: 0;
		z-index: 99;
	}
}

.wpcb-template-height-fixed.wpcb-template-shortcode {
	.wpcb-configurator-visuals {
		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			position: relative;
			height: 100vh;
			overflow: hidden;
		}
	}
	
	.wpcb-configurator-options {
		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			height: 100vh;
			margin: 0;
			overflow: hidden;
			overflow-y: auto;
		}
	}

	&.wpcb-template-popup {

		.wpcb-configurator-options,
		.wpcb-configurator-visuals {
			@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
				height: 100%;
			}
		}
	}
}

.wpcb-configurator-visuals-right {
	@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
		.wpcb-configurator-visuals {
			order: 1;
		}

		.wp-block-column:first-of-type {
			order: 1;
		}
	}
}

.wpcb-template-shortcode-classic,
.wpcb-template-shortcode-fullwidth,
.wpcb-template-shortcode-floating,
.wpcb-template-shortcode-stepper {

	.wpcb-configurator-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}

	&.wpcb-template-height-auto {
		.wpcb-configurator-wrapper {
			align-items: flex-start;
		}
		
		.wpcb-configurator-visuals {
			height: 100%;
		}
	}

	&.alignfull {
		.wpcb-configurator-options-content {
			padding: 20px;

			@media (min-width: 1440px) {
				padding: 30px;
			}
		}
	}

	.wpcb-configurator-visuals {
		box-sizing: border-box;
		width: 100%;
		flex: 0 0 100%;

		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			width: calc(100% - 516px);
			flex: 0 0 calc(100% - 516px);
		}

		@media (min-width: 1440px) {
			width: calc(100% - 616px);
			flex: 0 0 calc(100% - 616px);
		}
	}
	
	.wpcb-configurator-options {
		width: 100%;

		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			width: 516px;
			flex-basis: 516px;
			flex-grow: 0;
		}

		@media (min-width: 1440px) {
			width: 616px;
			flex-basis: 616px;
			flex-grow: 0;
		}
	}
}

.wpcb-template-height-auto {

	.wpcb-configurator-wrapper {
		position: relative;
		align-items: flex-start;
	}

	.wpcb-configurator-visuals {
		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			position: sticky;
			top: 0;

			.wpcb-configurator-gallery__image {
				padding: 0;
			}
		}
	}
	
	.wpcb-configurator-gallery__model {
		position: relative;
		padding: 0;
		height: 0;
		width: 100%;
		padding-bottom: 56.25%;
		overflow: hidden;
	
		model-viewer {
			position: absolute;
			top: 0;
			left: 0;
		}
	
		&.ratio-landscape {
			padding-bottom: 56.25%;
		}
		&.ratio-wide {
			padding-bottom: 62.50%;
		}
		&.ratio-threetwo {
			padding-bottom: 66.67%;
		}
		&.ratio-fourthree {
			padding-bottom: 75%;
		}
		&.ratio-portrait {
			padding-bottom: 177.77%;
		}
		&.ratio-high {
			padding-bottom: 160%;
		}
		&.ratio-twothree {
			padding-bottom: 150%;
		}
		&.ratio-threefour {
			padding-bottom: 133.33%;
		}
		&.ratio-squared {
			padding-bottom: 100%;
		}
	}
}

.wpcb-template-height-auto,
.wpcb-template-height-fixed {

	.wpcb-configurator-gallery__model {
		
		@media (max-width: 991px) {
			position: relative;
			padding: 0;
			height: 0;
			width: 100%;
			padding-bottom: 56.25%;
			overflow: hidden;
		
			model-viewer {
				position: absolute;
				top: 0;
				left: 0;
			}
	
			&.ratio-mobile-landscape {
				padding-bottom: 56.25%;
			}
			&.ratio-mobile-wide {
				padding-bottom: 62.50%;
			}
			&.ratio-mobile-threetwo {
				padding-bottom: 66.67%;
			}
			&.ratio-mobile-fourthree {
				padding-bottom: 75%;
			}
			&.ratio-mobile-portrait {
				padding-bottom: 177.77%;
			}
			&.ratio-mobile-high {
				padding-bottom: 160%;
			}
			&.ratio-mobile-twothree {
				padding-bottom: 150%;
			}
			&.ratio-mobile-threefour {
				padding-bottom: 133.33%;
			}
			&.ratio-mobile-squared {
				padding-bottom: 100%;
			}
		}
	}
}
