.wpcb-configurator-gallery-nav {
	display: inline-flex;

	.wpcb-configurator-gallery-nav__item {
		overflow: hidden;
	}
	
	&--inside {
		position: absolute;
		bottom: 30px;
		left: 30px;

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

	&--bullets {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		z-index: 3;

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

		.wpcb-configurator-gallery-nav__item {
			appearance: none;
			position: relative;
			width: 12px;
			height: 12px;
			padding: 0;
			margin: 0 5px;
			border: 0;
			border-radius: 2px;
			background-color: $button_background;
			opacity: 0.2;
			cursor: pointer;

			@media (max-width: 991px) {
				width: 8px;
				height: 8px;
			}

			&.active {
				opacity: 1;
			}

			&.disabled {
				pointer-events: none;
			}
		}
	}

	&--thumbnails,
	&--icons {

		.wpcb-configurator-gallery-nav__item {
			appearance: none;
			position: relative;
			width: 100px;
			height: 100px;
			padding: 0;
			margin: 0;
			border-radius: 8px;
			background-color: $template_background;
			border: 1px solid $template_border;
			cursor: pointer;

			@media (max-width: 991px) {
				width: 60px;
				height: 60px;
			}

			&:not(:first-child) {
				margin-left: 12px;
			}

			&.active {
				border: 1px solid $button_border;
			}

			&.disabled {
				pointer-events: none;
			}

			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				max-width: 100%;
				max-height: 100%;
				width: auto !important;
				height: auto !important;
			}
		}
	}

	&--labels {
		display: flex;
		gap: 12px;
		padding: 12px;
		border-radius: 8px;
		background-color: $template_background;

		@media (max-width: 991px) {
			gap: 8px;
			padding: 8px;
		}

		.wpcb-configurator-gallery-nav__item {
			appearance: none;
			position: relative;
			padding: 8px 12px;
			font-size: 16px;
			border-radius: 4px;
			border: 0;
			border: 1px solid $template_border;
			background-color: $template_background;
			color: $template_color;
			margin: 0;
			cursor: pointer;

			@media (max-width: 991px) {
				padding: 6px 10px;
				font-size: 14px;
			}

			&.active {
				background-color: $button_background;
				border: 1px solid $button_border;
				color: $button_color;
			}
		}
	}

	&.wpcb-border-square {
		border-radius: 0;

		.wpcb-configurator-gallery-nav__item {
			border-radius: 0;
		}
	}

	&.wpcb-border-pill {
		border-radius: 60px;

		.wpcb-configurator-gallery-nav__item {
			border-radius: 60px;
		}
	}
}