body.wpcb-panel-active,
body.wpcb-popup-active {
	overflow: hidden;
}

.wpcb-configurator-panel {
	position: fixed;
	display: none;
	transition: all .3s ease-in-out;
	top: 0;
	bottom: 0;
	right: -120%;
	box-sizing: border-box;
	width: 100%;
	z-index: 1100;

	@media (min-width: 600px) {
		right: -612px;
		width: 512px;
	}
	
	&.active {
		display: block;
		right: 0;
	}

	.wpcb-configurator-panel-inner {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		background-color: $template_accent;
		box-shadow: 0 0 10px rgba(0,0,0,0.14);
	}
	
	.wpcb-configurator-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $template_background;
		color: $template_title_color;
		box-sizing: border-box;
		padding: 15px 20px;

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

		del {
			margin-right: 5px;
		}
	}

	.wpcb-configurator-panel-close {
		appearance: none;
		border: 1px solid $template_border;
		background-color: $template_accent;
		border-radius: 6px;
		outline: 0;
		flex-shrink: 0;
		margin-left: auto;
		padding: 5px;
		cursor: pointer;

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

	.wpcb-configurator-panel-gallery.active + .wpcb-configurator-panel-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: transparent;

		.wpcb-configurator-panel-details {
			display: none;
		}
	}

	.wpcb-configurator-panel-title {
		padding: 15px 20px 0;

		@media (min-width: 768px) {
			padding: 20px 30px 0;
		}
	}

	.wpcb-configurator-panel-title:empty {
		padding: 0;
	}

	.wpcb-configurator-panel-gallery {
		background-color: $template_background;
		color: $template_title_color;

		.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: 8px;
			width: 42px;
			height: 42px;
			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-panel-label {
		font-weight: 700;
	}

	.wpcb-configurator-panel-details {
		p {
			margin: 0;
		}
	}

	.wpcb-configurator-panel-content {
		flex: 1;
		overflow-y: auto;
		padding: 15px 20px;

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

	.wpcb-price-table-totals {
		background-color: $template_background;
	}

	.wpcb-configurator-panel-action {
		width: inherit;
		box-sizing: border-box;
		background-color: $template_background;
		padding: 15px 20px;

		@media (min-width: 768px) {
			padding: 20px 30px;
		}
		
		form,
		button,
		a {
			display: block;
			width: 100%;
			text-align: center;
			text-decoration: none;
			box-sizing: border-box;
		}

		button,
		a {
			color: $button_color;
			outline: 0;
			box-sizing: border-box;
		}
	}

	&.wpcb-border-square {

		button,
		div.wpcb-wishlist-table-item-actions a.wpcb-wishlist-action,
		.wpcb-configurator-panel-action a,
		.wpcb-price-table-totals {
			border-radius: 0;
		}
	}

	&.wpcb-border-pill {

		button,
		div.wpcb-wishlist-table-item-actions a.wpcb-wishlist-action,
		.wpcb-configurator-panel-action a,
		.wpcb-price-table-totals {
			border-radius: 25px;
		}
	}
}

.wpcb-canvas-popup {
	.wpcb-input-field-canvas {
		text-align: center;

		.canvas-container {
			border: 1px solid $template_border;
			margin: 30px auto;
		}

		.wpcb-configurator-field-canvas-controls {
			display: flex;
			justify-content: center;

			button {
				appearance: none;
				position: relative;
				display: inline-block;
				border: 1px solid $template_border;
				color: $template_color;
				background-color: $template_background;
				border-radius: 6px;
				padding: 4px;
				outline: 0;
				cursor: pointer;
				margin: 0 4px;

				&:hover,
				&:focus {
					border-color: $button_border;
				}

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

			.wpcb-canvas-rotate-alt img {
				transform: scaleX(-1);
			}
		}
	}

	.wpcb-input-field-canvas-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid $template_border;
		padding-top: 20px;
		margin-top: 40px;
	}
}

.admin-bar .wpcb-configurator-wrapper .wpcb-configurator-panel {
	top: 32px;
}