/**
 * Kruzni swatchevi boje/slike za WooCommerce varijacijske atribute.
 * Svaki swatch je samo debeli obrub u svojoj boji. Popunjena je samo jedna,
 * zajednicka tockica (.pbs-swatch__dot) koja animacijom "skace" na odabrani.
 * Namjerno neutralno, da ih tema lako nadjaca.
 */

.pbs-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pbs-swatches {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 4px 0;
}

.pbs-swatch {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 4px solid #d1d5db;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}

/* Swatch koji predstavlja sliku (rijedak slucaj) ostaje pun, obrub nema smisla. */
.pbs-swatch--image {
	border: 0;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.pbs-swatch--image.is-selected {
	box-shadow: 0 0 0 2px #1f2937;
}

.pbs-swatch:hover:not(.is-disabled) {
	transform: scale(1.08);
}

.pbs-swatch:focus,
.pbs-swatch:focus-visible {
	outline: none;
}

.pbs-swatch.is-disabled,
.pbs-swatch:disabled {
	/* Nedostupna kombinacija ne treba prikazivati svoju boju/obrub - samo
	   neutralan, zatamnjen krug s precrtom. Border:0 ovdje pobjedi i inline
	   border-color koji je PHP ispisao, jer je stil (none) jaci od boje. */
	cursor: not-allowed;
	opacity: .5;
	border: 0;
}

.pbs-swatch.is-disabled:not(.pbs-swatch--image),
.pbs-swatch:disabled:not(.pbs-swatch--image) {
	background-color: #d1d5db;
}

.pbs-swatch.is-disabled::before,
.pbs-swatch:disabled::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		rgba(0, 0, 0, .55) calc(50% - 1px) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* Zajednicka popunjena tockica - jedina "unutrasnjost" u cijelom redu,
 * skace s pozicije na poziciju kad se promijeni odabir. */
.pbs-swatch__dot {
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	transform: translate(-50%, -50%);
	transition: left .3s cubic-bezier(.34, 1.56, .64, 1), top .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease;
	pointer-events: none;
}