/* Gravity Swatches - stili dei pallini colore.
   Le variabili (--gsw-*) arrivano dalle impostazioni del plugin. */

.gsw {
	box-sizing: border-box;
	width: 100%;
	margin: var(--gsw-mt, 10px) 0 var(--gsw-mb, 6px);
	line-height: 1;
}

/* Nascosti finché lo script non li ha messi al loro posto; se lo script non parte, compaiono comunque. */
.gsw:not(.gsw-ready) {
	visibility: hidden;
	animation: gsw-show 0s 1.5s forwards;
}

@keyframes gsw-show {
	to { visibility: visible; }
}

.gsw .gsw-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--gsw-justify, flex-start);
	gap: var(--gsw-gap, 8px);
	margin: 0;
	padding: 2px;
	list-style: none;
}

.gsw .gsw-list > li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

/* "all: unset" isola il pallino dagli stili globali dei pulsanti del tema. */
.gsw .gsw-dot {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: var(--gsw-size, 22px);
	height: var(--gsw-size, 22px);
	border-radius: var(--gsw-radius, 50%);
	border: var(--gsw-bw, 1px) solid var(--gsw-ring, #d4d4d4);
	background: linear-gradient(135deg, var(--gsw-c1, #ccc) 0 50%, var(--gsw-c2, var(--gsw-c1, #ccc)) 50% 100%);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gsw .gsw-dot:hover {
	transform: scale(1.08);
}

.gsw .gsw-dot.is-active {
	/* Anello tutto all'interno del pallino: così non esce mai dal box della scheda e non viene tagliato. */
	border-color: var(--gsw-ring-active, #222);
	border-width: calc(var(--gsw-bw, 1px) + 1px);
	box-shadow: inset 0 0 0 2px #fff;
}

.gsw .gsw-dot:focus-visible {
	outline: 2px solid var(--gsw-ring-active, #222);
	outline-offset: 3px;
}

.gsw .gsw-more {
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
}

.gsw .gsw-more:hover {
	opacity: 1;
	text-decoration: underline;
}