/**
 * QBox Gallery Swatches.
 */

.qbox-gallery-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	max-width:20ch;
	justify-content:center;
}

.qbox-gallery-swatches button.qbox-gallery-swatches__item[type="button"] {
	appearance: none;
	/*width: 2rem;*/
	/*height: 2rem;*/
	min-width: 1.5rem;
	min-height: 1.5rem;
	padding: 0;
	/*border: 2px solid transparent;*/
	border-radius: 50%;
	background-image: none;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition:
		border-color 150ms ease,
		transform 150ms ease;
}

.qbox-gallery-swatches button.qbox-gallery-swatches__item--single[type="button"],
.qbox-gallery-swatches button.qbox-gallery-swatches__item--single[type="button"]:hover,
.qbox-gallery-swatches button.qbox-gallery-swatches__item--single[type="button"]:focus,
.qbox-gallery-swatches button.qbox-gallery-swatches__item--single[type="button"]:active {
	background-color: var(--qbox-primary-color);
	background-image: none;
}

.qbox-gallery-swatches button.qbox-gallery-swatches__item--dual[type="button"],
.qbox-gallery-swatches button.qbox-gallery-swatches__item--dual[type="button"]:hover,
.qbox-gallery-swatches button.qbox-gallery-swatches__item--dual[type="button"]:focus,
.qbox-gallery-swatches button.qbox-gallery-swatches__item--dual[type="button"]:active {
	background-color: transparent;
	background-image: linear-gradient(
		135deg,
		var(--qbox-primary-color) 0%,
		var(--qbox-primary-color) 50%,
		var(--qbox-secondary-color) 50%,
		var(--qbox-secondary-color) 100%
	);
}

.qbox-gallery-swatches button.qbox-gallery-swatches__item[type="button"]:hover {
	transform: scale(1.08);
}

.qbox-gallery-swatches button.qbox-gallery-swatches__item[type="button"]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.qbox-gallery-swatches button.qbox-gallery-swatches__item[type="button"].is-active {
	border: solid 2px #000;
}