.wpcb-configurator-swatches {

	.swiper {
		display: block;
		position: relative;
		padding: 0;

		.swiper-scrollbar {
			background-color: $template_border;
		}
		.swiper-scrollbar-drag {
			background-color: $button_background;
		}

		&.swiper-has-arrows {
			padding: 0 36px;
		}

		&.swiper-has-scrollbar {
			padding-bottom: 12px;
		}
		
		.swiper-button-prev,
		.swiper-button-next {
			appearance: none;
			display: inline-block;
			border: 1px solid $template_border;
			background-color: $template_accent;
			border-radius: 6px;
			padding: 4px;
			width: 32px;
			height: 32px;
			margin: 0;
			z-index: 1;
			cursor: pointer;

			&:after {
				content: unset;
			}

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

			&.swiper-button-disabled {
				opacity: 0.3;
			}
		}

		&.swiper-horizontal {
			.wpcb-swatch-option {
				margin-bottom: 0;
			}
			
			.swiper-button-prev {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);

				img {
					transform: rotate(-180deg);
				}
			}
			.swiper-button-next {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.swiper-scrollbar,
			.swiper-scrollbar-drag {
				bottom: 0;
				height: 2px;
			}
		}

		&.swiper-vertical {
			padding: 0 20px 0 0;

			.wpcb-swatch-option {
				margin-top: 5px;
			}

			.swiper-button-prev,
			.swiper-button-next {
				display: none;
			}

			.swiper-button-prev {
				position: absolute;
				right: 6px;
				left: auto;
				bottom: auto;
				top: 0;

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

			.swiper-button-next {
				position: absolute;
				right: 6px;
				bottom: 0;
				left: auto;
				top: auto;

				img {
					transform: rotate(90deg);
				}
			}

			.swiper-scrollbar,
			.swiper-scrollbar-drag {
				right: 0;
				width: 2px;
			}
		}

		.swiper-slide-removed {
			display: none;
		}
	}

	.wpcb-option.wpcb-swatch-option {
		box-sizing: border-box;
		padding: 5px;
		
		input {
			position: absolute;
			visibility: hidden;
		}
	}

	.wpcb-swatch-inner {
		cursor: pointer;
	}

	.wpcb-swatch {
		position: relative;
		box-sizing: border-box;
		border: 1px solid $option_border;
		border-radius: 8px;
		width: 100%;
		height: 100%;
		aspect-ratio: 1/1;
		padding: 5px;

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

		&:hover {
			border: 1px solid $option_hover_border;
		}

		.wpcb-swatch-fill,
		img {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 4px;
			object-fit: contain;
		}
	}

	.wpcb-swatch-comp {
		padding: 0;
	}

	input:checked + .wpcb-swatch-inner .wpcb-swatch {
		border: 1px solid $option_active_border;
		background-color: $template_background;
	}

	input:checked + .wpcb-swatch-inner .wpcb-swatch-comp {
		padding: 5px;
		margin: -5px;
		width: calc(100% + 10px);
		height: calc(100% + 10px);
	}

	.wpcb-option-alt input:checked + .wpcb-swatch-inner .wpcb-swatch {
		&:before {
			content: '';
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
		}
	}
}