.wpcb-configurator-form {
	position: relative;
	font-size: $font_size_regular;
	margin: 0;

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

	.admin-edit-link {
		display: block;
		margin: $spacing_form_field 0;
	}

	p {
		margin: 0;
	}

	small {
		font-size: 90%;
	}

	label {
		display: block;
	}

	button:not(.wpcb-button):not(.wpcb-panel-close) {
		appearance: none;
		border: 0;
		background-color: transparent;
		cursor: pointer;
	}

	.wpcb-panel-close:focus,
	.wpcb-panel-close:active {
		border-color: $option_active_border;
	}

	.wpcb-field-label-required {
		color: $color_error;
	}

	.wpcb-error-note {
		display: block;
		color: $color_error;
		margin-top: $spacing_form_note;
	}

	.wpcb-removed {
		display: none !important;
	}

	.wpcb-hidden {
		display: none !important;
	}

	.wpcb-configurator-step {
		margin-top: $spacing_form_field;
	}

	.wpcb-configurator-field-description {
		display: none;
	}

	.wpcb-option-summary {
		display: none;
	}

	.wpcb-option-description-html {
		display: none;
	}

	.wpcb-option.wpcb-option-out-of-stock {
		pointer-events: none;
		opacity: 0.5;

		input:disabled + div {
			opacity: 1;
			cursor: no-drop;
		}
	}

	.wpcb-configurator-field {

		.canvas-container,
		.wpcb-configurator-field-canvas {
			display: none;
		}

		.wpcb-canvas-popup .canvas-container,
		.wpcb-canvas-popup .wpcb-configurator-field-canvas {
			display: block;
		}
	}

	.wpcb-option input {
		position: absolute;
		visibility: hidden;
	}

	.wpcb-discount-label {
		display: inline-block;
		background-color: $color_error;
		color: $button_color;
		padding: $spacing_form_badge;
		border-radius: 4px;
		margin-left: 4px;
	}

	.wpcb-option-item {
		position: relative;
		border: 1px solid $option_border;
		background-color: $option_background;
		border-radius: 8px;
		cursor: pointer;

		.wpcb-option-stock:empty {
			display: none;
		}

		&--image-end {
			.wpcb-option-thumbnail {
				order: 5;
			
				+ .wpcb-option-stock {
					top: auto;
					bottom: 14px;
					z-index: 1;
				}
			}
		}

		&,
		p {
			color: $option_color;
		}
		
		&:before {
			background-color: $button_background;
			background-image: $checkbox_url;
			border-radius: 4px;
			background-size: 24px;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	.wpcb-option-thumbnail {
		position: relative;

		.wpcb-zoom-icon {
			z-index: 2;
		}
	}

	.wpcb-option-price del {
		margin-right: 6px;
		opacity: 0.8;
	}

	.wpcb-option-input {
		box-sizing: border-box;
		appearance: none;
		width: 24px;
		height: 24px;
		border: 1px solid $option_border;
		display: block;
		margin: 0 0 0 $spacing_option_field;
		padding: 0;
	}

	.wpcb-option-input-radio {
		border-radius: 12px;
	}
	.wpcb-option-input-checkbox {
		border-radius: 4px;
	}

	.wpcb-view-field-details,
	.wpcb-view-option-details {
		display: block;
		padding: 0;
		margin: 0;
		margin-left: $spacing_form_field_inner;

		img {
			display: block;
			width: inherit;
		}
	}

	.wpcb-view-field-details {
		color: $template_link;

		&.wpcb-view-field-details-below {
			margin-left: 0;
			margin-top: $spacing_form_note;
		}

		&.wpcb-text-link {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		&.wpcb-button {
			color: $button_color;
			padding: $spacing_summary;
		}
	}

	.wpcb-configurator-field-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wpcb-configurator-field.wpcb-collapsible {
		padding: $spacing_form_field_inner;
		border: 1px solid $template_border;
		background-color: $template_background;
		border-radius: 8px;
	}

	.wpcb-configurator-field-title {
		display: flex;
		align-items: center;

		.wpcb-configurator-field-value {
			span { 
				margin-left: $spacing_form_option;
			}
		}
	}

	.wpcb-admin-edit {
		margin-left: $spacing_form_option;
	}

	.wpcb-configurator-field.wpcb-collapsible .wpcb-configurator-field-header {
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0 0 $spacing_form_field_inner;
		cursor: pointer;

		.wpcb-view-field-details {
			position: relative;
			margin: 0;
			margin-right: $spacing_form_field_inner;
			z-index: 1;
		}

		.wpcb-configurator-field-title {
			display: block;
		}

		.wpcb-configurator-field-value {
			span {
				margin: 0;
				margin-right: $spacing_form_field_inner;

				&.wpcb-plus-sign {
					margin-right: 0;	
				}
			}
		}
		
		.wpcb-configurator-field-collapse-button {
			margin-left: auto;

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

	.wpcb-configurator-field.wpcb-collapsible.wpcb-collapsed { 
		.wpcb-configurator-field-header {
			margin-bottom: 0;
		}
		
		.wpcb-configurator-field-collapse-button {
			img {
				transform: rotate(0);
			}
		}

		.wpcb-input-content,
		.wpcb-input-footer,
		.wpcb-configurator-field-content {
			height: 0;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
	}

	input:not(:disabled):not(:checked) + .wpcb-option-item:hover {
		border-color: $option_hover_border;
		background-color: $option_hover_background;

		&,
		p:not(.wpcb-option-stock) {
			color: $option_hover_color;
		}
	}

	.wpcb-option-alt:not(.wpcb-option-has-input) input:checked + .wpcb-option-item {
		&:before {
			content: '';
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			z-index: 4;
		}
	}

	input:checked + .wpcb-option-item {
		border-color: $option_active_border;
		background-color: $option_active_background;

		&,
		p:not(.wpcb-option-stock) {
			color: $option_active_color;
		}

		&,
		.wpcb-option-input {
			border-color: $option_active_border;
		}

		.wpcb-option-input-radio {
			position: relative;
			border-color: $option_active_border;
			background-color: $option_active_background;

			&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 12px;
				height: 12px;
				border-radius: 12px;
				background: $option_active_border;
			}
		}

		.wpcb-option-input-checkbox {
			background-color: $button_background;
			background-image: $checkbox_url;
			background-size: 18px;
			background-repeat: no-repeat;
			background-position: center;
		}
	}
	
	input:disabled + div {
		cursor: default;
		opacity: 0.7;
	}

	.wpcb-option {

		.wpcb-zoom-icon {
			position: absolute;
			display: none;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: $template_background;
			padding: $spacing_form_badge;
			border-radius: 4px;
			
			img {
				width: 24px;
				height: 24px;
			}
		}
		
		&:hover {
			.wpcb-zoom-icon {
				display: block;
			}
		}
	}

	.wpcb-swatch-inner {
		.wpcb-zoom-icon {
			@media (max-width: 767px) {
				display: block;
				top: auto;
				bottom: -12px;
				transform: translateX(-50%);
			}
		}
	}

	label.wpcb-option {
		position: relative;
	}

	.wpcb-tooltip {
		visibility: hidden;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: $template_color;
		background: $template_accent;
		padding: $spacing_form_badge $spacing_form_badge_side;
		z-index: 5;
		text-align: center;
		pointer-events: none;

		@media (max-width: 767px) {
			display: none;
		}

		.wpcb-tooltip-preview {
			img,
			.wpcb-swatch-fill {
				max-width: 520px;
				height: auto;
			}
		}

		.wpcb-tooltip-label,
		.wpcb-tooltip-note {
			display: block;
			white-space: nowrap;
		}

		&.wpcb-tooltip-large {
			bottom: 100%;
			padding: $spacing_form_badge;
		}
		
		.tooltip-content {
			position: relative;

			.note {
				display: block;
				margin: 0 0 $spacing_form_note;
			}
		}
	}

	label:hover .wpcb-tooltip {
		visibility: visible;
	}

	p.wpcb-option-stock {
		padding: $spacing_form_badge / 2 $spacing_form_badge;
		font-size: $font_size_tiny - 2;
		text-transform: uppercase;
		margin: 0;
		border-radius: 4px;
		background-color: $stock_badge_background;
		border: 1px solid $stock_badge_border;
		color: $stock_badge_color;

		@media (min-width: 992px) {
			padding: $spacing_form_badge $spacing_form_badge_side;
			font-size: $font_size_tiny;
		}

		&.no-stock {
			background-color: $no_stock_badge_background;
			border-color: $no_stock_badge_border;
			color: $no_stock_badge_color;
		}
	}

	&.wpcb-border-square {

		.wpcb-collapsible,
		.wpcb-option-item,
		.wpcb-option-item:before,
		.wpcb-option-item img,
		.wpcb-option-input-checkbox,
		.wpcb-option-summary,
		.wpcb-option-stock,
		.wpcb-option-button,
		.wpcb-swatch,
		.wpcb-swatch:before,
		.wpcb-swatch img,
		.wpcb-swatch .wpcb-swatch-fill,
		.wpcb-button,
		.wpcb-select,
		.wpcb-option:first-child .wpcb-option-button,
		.wpcb-option:last-child .wpcb-option-button,
		.wpcb-input-switch,
		.wpcb-input-switch:after,
		.wpcb-input-content,
		.wpcb-input-file.active .wpcb-input-clear-file,
		.wpcb-zoom-icon,
		.wpcb-filter-item,
		.wpcb-configurator-accordeon,
		.wpcb-form-notice,
		input[type=text],
		input[type=number],
		textarea {
			border-radius: 0;
		}

		input[type="range"]::-webkit-slider-thumb {
			border-radius: 0;
		}
		input[type="range"]::-moz-range-thumb {
			border-radius: 0;
		}
		input[type="range"]::-ms-thumb {
			border-radius: 0;
		}

		.wpcb-datepicker-inline {
			border-radius: 0;

			.ui-datepicker-header {
				border-radius: 0;
			}
			
			.ui-datepicker-prev,
			.ui-datepicker-next {
				border-radius: 0;
			}

			.ui-state-default {
				border-radius: 0;
			}
		}
	}

	&.wpcb-border-pill {

		.wpcb-option-item,
		.wpcb-option-item:before,
		.wpcb-option-item img,
		.wpcb-option-summary,
		.wpcb-option-stock,
		.wpcb-swatch,
		.wpcb-swatch:before,
		.wpcb-swatch img,
		.wpcb-swatch .wpcb-swatch-fill,
		.wpcb-button,
		.wpcb-select,
		.wpcb-input-switch,
		.wpcb-input-switch:after,
		.wpcb-input-content,
		.wpcb-input-file.active,
		.wpcb-input-file.active img,
		.wpcb-input-file.active .wpcb-input-clear-file,
		.wpcb-zoom-icon,
		.clr-field button,
		.wpcb-configurator-accordeon,
		.wpcb-form-notice,
		input[type=text],
		input[type=number],
		textarea {
			border-radius: 30px;
		}

		input[type="range"]::-webkit-slider-thumb {
			border-radius: 30px;
		}
		input[type="range"]::-moz-range-thumb {
			border-radius: 30px;
		}
		input[type="range"]::-ms-thumb {
			border-radius: 30px;
		}

		.wpcb-configurator-list {
			.wpcb-option-item,
			.wpcb-option-item img {
				border-radius: 80px;
			}
		}

		.wpcb-swatch {
			&,
			& img,
			.wpcb-swatch-fill {
				border-radius: 80px;
			}
		}

		.wpcb-filter-item {
			border-radius: 80px;
		}

		.wpcb-option:first-child .wpcb-option-button {
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
		}
		.wpcb-option:last-child .wpcb-option-button {
			border-top-right-radius: 30px;
			border-bottom-right-radius: 30px;
		}

		.wpcb-configurator-file-upload,
		.wpcb-configurator-file-upload input {
			border-radius: 40px;
		}

		.wpcb-configurator-datepicker .wpcb-input-content {
			border-radius: 0;
		}

		.wpcb-datepicker-inline {
			border-radius: 20px;

			.ui-datepicker-header {
				border-radius: 20px;
			}
			
			.ui-datepicker-prev,
			.ui-datepicker-next {
				border-radius: 20px;
			}

			.ui-state-default {
				border-radius: 20px;
			}
		}
	}
}

.wpcb-configurator-inline-quote-form {
	&.hidden {
		display: none;
	}
}

// Variation form fix.
.woocommerce-js div.product form.cart .single_variation_wrap .wpcb-configurator-options p,
.woocommerce-js div.product form.cart .single_variation_wrap .wpcb-price-table p,
.woocommerce-js div.product form.cart .single_variation_wrap .wpcb-configurator-form-totals p {
	margin-bottom: 0;
}