/**
 * Attribute Types — frontend renderer styles.
 * Theme tokens + swatch selected/disabled/shape variants (reference UX).
 */

.st-attr {
	--st-attr-primary: var(--st-color-primary, #0d6efd);
	--st-attr-text-color: var(--st-text, #111827);
	--st-attr-muted: color-mix(in srgb, var(--st-text, #111827) 55%, transparent);
	--st-attr-border-color: var(--st-border, #e5e7eb);
	--st-attr-surface: var(--st-surface, #f8f9fa);
	--st-attr-page-bg: var(--st-bg, #ffffff);
	--st-attr-radius-base: var(--st-radius-md, 10px);
	--st-attr-radius-sm: calc(var(--st-radius-md, 10px) - 4px);
	--st-attr-radius-pill: var(--st-radius-pill, 999px);
	--st-attr-transition: var(--st-transition, 0.2s ease);
	--st-attr-focus: var(
		--st-focus-ring,
		0 0 0 3px color-mix(in srgb, var(--st-attr-primary) 25%, transparent)
	);
	--st-attr-font: var(--st-body-font, inherit);
	--st-attr-spacing: 8px;
	--st-attr-size: 32px;

	display: flex;
	flex-wrap: wrap;
	gap: var(--st-attr-spacing);
	align-items: center;
	font-family: var(--st-attr-font);
	color: var(--st-attr-text-color);
}

.st-attr__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	cursor: default;
	vertical-align: middle;
	box-sizing: border-box;
	transition:
		color var(--st-attr-transition),
		background-color var(--st-attr-transition),
		border-color var(--st-attr-transition),
		box-shadow var(--st-attr-transition),
		opacity var(--st-attr-transition);
}

.st-attr__item.is-interactive {
	cursor: pointer;
}

.st-attr__item.is-interactive:focus-visible {
	outline: none;
	box-shadow: var(--st-attr-focus);
}

/* Variation form: keep select for WC JS, show swatches */
.st-attr-variations {
	display: block;
	width: 100%;
}

.st-attr-variations__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.st-attr-variations .st-attr {
	position: relative;
}

.woocommerce table.variations td.value .st-attr-variations,
.st-product-cart__compat table.variations td.value .st-attr-variations {
	margin: 0;
}

.woocommerce table.variations td.value,
.st-product-cart__compat table.variations td.value {
	position: relative;
}

.st-attr__label {
	font-size: 0.85em;
	color: var(--st-attr-muted);
}

/* ── Shape ── */
.st-attr__shape--circle .st-attr__swatch-dot,
.st-attr__shape--circle.st-attr__text,
.st-attr__shape--circle.st-attr__button {
	border-radius: 50%;
}

.st-attr__shape--rounded .st-attr__swatch-dot,
.st-attr__shape--rounded.st-attr__text,
.st-attr__shape--rounded.st-attr__button {
	border-radius: var(--st-attr-radius-sm);
}

.st-attr__shape--square .st-attr__swatch-dot,
.st-attr__shape--square.st-attr__text,
.st-attr__shape--square.st-attr__button {
	border-radius: 0;
}

/* ── Color swatch ── */
.st-attr__swatch-dot {
	display: block;
	width: var(--st-attr-size);
	height: var(--st-attr-size);
	background: var(--st-attr-color, transparent);
	box-sizing: border-box;
}

.st-attr__swatch.has-border .st-attr__swatch-dot {
	border: 1px solid color-mix(in srgb, var(--st-attr-border-color) 70%, var(--st-attr-text-color));
}

/* ── Text / button as swatch ── */
.st-attr__text--swatch,
.st-attr__button {
	min-width: var(--st-attr-size);
	min-height: var(--st-attr-size);
	padding: 0 0.65em;
	border: 1px solid var(--st-attr-border-color);
	background: var(--st-attr-page-bg);
	color: var(--st-attr-text-color);
	font-size: 0.8125rem;
	line-height: 1;
}

.st-attr__button {
	padding: var(--st-attr-padding, 8px) calc(var(--st-attr-padding, 8px) * 1.25);
	background: var(--st-attr-bg, var(--st-attr-page-bg));
	color: var(--st-attr-text, var(--st-attr-text-color));
}

.st-attr__button:hover {
	background: var(
		--st-attr-hover,
		color-mix(in srgb, var(--st-attr-primary) 8%, var(--st-attr-surface))
	);
	border-color: color-mix(in srgb, var(--st-attr-primary) 40%, var(--st-attr-border-color));
}

/* ── Selected: check ── */
.st-attr__selected--check.is-selected.st-attr__swatch .st-attr__swatch-dot {
	box-shadow: inset 0 0 0 999px color-mix(in srgb, #000 28%, transparent);
}

.st-attr__selected--check.is-selected.st-attr__text,
.st-attr__selected--check.is-selected.st-attr__button {
	background: var(--st-attr-selected, var(--st-attr-text-color));
	border-color: var(--st-attr-selected, var(--st-attr-text-color));
	color: #fff;
}

.st-attr__check {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.st-attr__selected--check.is-selected .st-attr__check {
	display: flex;
}

.st-attr__check::before {
	content: "";
	width: 0.45em;
	height: 0.85em;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-10%);
}

/* ── Selected: ring (thick border + gap) ── */
.st-attr__selected--ring.is-selected.st-attr__swatch .st-attr__swatch-dot {
	box-shadow:
		0 0 0 2px var(--st-attr-page-bg),
		0 0 0 4px var(--st-attr-selected-border, var(--st-attr-primary));
}

.st-attr__selected--ring.is-selected.st-attr__text,
.st-attr__selected--ring.is-selected.st-attr__button {
	border-color: var(--st-attr-selected-border, var(--st-attr-primary));
	border-width: 2px;
	box-shadow: 0 0 0 2px var(--st-attr-page-bg);
	color: var(--st-attr-primary);
	font-weight: 600;
}

/* ── Selected: outer outline ── */
.st-attr__selected--outline.is-selected {
	outline: 1px solid var(--st-attr-selected-border, var(--st-attr-primary));
	outline-offset: 3px;
}

.st-attr__selected--outline.is-selected.st-attr__text,
.st-attr__selected--outline.is-selected.st-attr__button {
	border-color: var(--st-attr-border-color);
	color: var(--st-attr-text-color);
}

/* ── Selected: underline ── */
.st-attr__selected--underline.is-selected::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -6px;
	height: 2px;
	background: var(--st-attr-selected-border, var(--st-attr-primary));
	border-radius: 1px;
}

.st-attr__selected--underline.is-selected.st-attr__button {
	background: var(--st-attr-selected, var(--st-attr-primary));
	border-color: var(--st-attr-selected, var(--st-attr-primary));
	color: #fff;
}

.st-attr__selected--underline.is-selected.st-attr__button::after {
	display: none;
}

/* Button filled selected (default feel for size row in reference) */
.st-attr__button.is-selected:not(.st-attr__selected--ring):not(.st-attr__selected--outline):not(.st-attr__selected--underline) {
	background: var(--st-attr-selected, var(--st-attr-primary));
	border-color: var(--st-attr-selected, var(--st-attr-primary));
	color: #fff;
}

/* ── Disabled ── */
.st-attr__item.is-disabled {
	pointer-events: none;
}

.st-attr__disabled--fade.is-disabled {
	opacity: 0.4;
	filter: grayscale(0.35);
}

.st-attr__disabled--slash.is-disabled::before,
.st-attr__disabled--cross.is-disabled::before,
.st-attr__disabled--cross.is-disabled::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.st-attr__disabled--slash.is-disabled::before {
	inset: 15%;
	background: linear-gradient(
		to top left,
		transparent 46%,
		var(--st-attr-text-color) 46%,
		var(--st-attr-text-color) 54%,
		transparent 54%
	);
	opacity: 0.7;
}

.st-attr__disabled--cross.is-disabled::before,
.st-attr__disabled--cross.is-disabled::after {
	left: 50%;
	top: 50%;
	width: 70%;
	height: 2px;
	background: #ef4444;
	border-radius: 1px;
}

.st-attr__disabled--cross.is-disabled::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.st-attr__disabled--cross.is-disabled::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ── Icon / Label leftovers ── */
.st-attr__icon {
	color: var(--st-attr-color, var(--st-attr-text-color));
	width: var(--st-attr-size, 24px);
	height: var(--st-attr-size, 24px);
}

.st-attr__icon.is-selected {
	color: var(--st-attr-selected-color, var(--st-attr-primary));
}

.st-attr__icon-svg {
	display: inline-flex;
	width: 100%;
	height: 100%;
}

.st-attr__icon-svg svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.st-attr__icon-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--st-attr-surface);
	border: 1px dashed var(--st-attr-border-color);
	border-radius: var(--st-attr-radius-sm);
}

.st-attr__badge {
	padding: var(--st-attr-padding, 6px) calc(var(--st-attr-padding, 6px) * 1.4);
	border-radius: var(--st-attr-radius, var(--st-attr-radius-sm));
	background: var(--st-attr-bg, var(--st-attr-surface));
	color: var(--st-attr-text, var(--st-attr-text-color));
	font-size: var(--st-attr-size, 0.75rem);
	border: 1px solid color-mix(in srgb, var(--st-attr-border-color) 80%, transparent);
	line-height: 1.3;
}

.st-attr__badge.is-selected {
	border-color: var(--st-attr-primary);
	box-shadow: var(--st-attr-focus);
}

.st-attr__image-media,
.st-attr__image-placeholder {
	display: block;
	width: var(--st-attr-size, 40px);
	height: var(--st-attr-size, 40px);
	object-fit: cover;
}

.st-attr__image-placeholder {
	background: var(--st-attr-surface);
	border: 1px dashed var(--st-attr-border-color);
}

.st-attr__image.is-rounded .st-attr__image-media,
.st-attr__image.is-rounded .st-attr__image-placeholder {
	border-radius: var(--st-attr-radius-sm);
}

.st-attr__image.has-border .st-attr__image-media {
	border: 1px solid var(--st-attr-border-color);
}

.st-attr__image.is-selected.st-attr__image-selected--ring .st-attr__image-media {
	box-shadow:
		0 0 0 2px var(--st-attr-page-bg),
		0 0 0 4px var(--st-attr-primary);
}

.st-attr__switch-track {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	border-radius: var(--st-attr-radius-pill);
	background: color-mix(in srgb, var(--st-attr-border-color) 70%, var(--st-attr-muted));
	vertical-align: middle;
}

.st-attr__switch.is-on .st-attr__switch-track {
	background: var(--st-attr-primary);
}

.st-attr__switch-thumb {
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--st-attr-page-bg);
	transition: transform var(--st-attr-transition);
}

.st-attr__switch.is-on .st-attr__switch-thumb {
	transform: translateX(16px);
}

[dir="rtl"] .st-attr__switch.is-on .st-attr__switch-thumb {
	transform: translateX(-16px);
}

.st-attr__switch-state {
	font-size: 0.85em;
	color: var(--st-attr-muted);
}