/* Kodulehe Arendus Base – swatchid */

.kab-swatches__select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.kab-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kab-swatch-gap, 8px);
}

.kab-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--kab-swatch-border, #d1d5db);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.kab-swatch:hover {
	border-color: var(--kab-swatch-hover, #111);
}

.kab-swatch.is-selected {
	border-color: var(--kab-swatch-active, #111);
	box-shadow: 0 0 0 1px var(--kab-swatch-active, #111);
}

.kab-swatch.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	position: relative;
}

.kab-swatch.is-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent calc(50% - 1px), currentColor, transparent calc(50% + 1px));
	opacity: 0.5;
	pointer-events: none;
}

/* Nupp */
.kab-swatch--button {
	min-width: var(--kab-swatch-size, 40px);
	height: var(--kab-swatch-size, 40px);
	padding: 0 12px;
	border-radius: var(--kab-swatch-radius, 4px);
	font-size: 0.875rem;
}

/* Värv */
.kab-swatch--color {
	width: var(--kab-swatch-size, 36px);
	height: var(--kab-swatch-size, 36px);
	border-radius: var(--kab-swatch-radius, 50%);
	padding: 3px;
}

.kab-swatch__color {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

/* Pilt */
.kab-swatch--image {
	width: var(--kab-swatch-size, 56px);
	height: var(--kab-swatch-size, 56px);
	border-radius: var(--kab-swatch-radius, 4px);
	overflow: hidden;
}

.kab-swatch__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kab-swatch--image .kab-swatch__text {
	font-size: 0.75rem;
	padding: 4px;
}