/**
 * DWITS Swatches 2.0
 *
 * Los valores NO son inventados: son los que Do'or tenia guardados en la opcion
 * `veb_variation_swatches` del plugin anterior, para que Angela no note el cambio.
 *
 *     shape_style              squared     -> cuadrados, no redondos
 *     width / height           30 / 30
 *     single_font_size         16
 *     border_color / size      #a8a8a8 / 1
 *     background / text        #FFFFFF / #000000
 *     hover_border  / size     #000000 / 3
 *     selected_border / size   #000000 / 2
 *     tooltip bg / texto       #333333 / #FFFFFF
 *
 * Todo por variables: si algun dia quiere cambiar el color, se toca aqui arriba y ya.
 */

.dwits-swatches {
	--dwits-sw-lado: 30px;
	--dwits-sw-letra: 16px;
	--dwits-sw-borde: #a8a8a8;
	--dwits-sw-borde-grosor: 1px;
	--dwits-sw-fondo: #fff;
	--dwits-sw-texto: #000;
	--dwits-sw-hover-borde: #000;
	--dwits-sw-hover-grosor: 3px;
	--dwits-sw-elegido-borde: #000;
	--dwits-sw-elegido-grosor: 2px;
	--dwits-sw-tooltip-fondo: #333;
	--dwits-sw-tooltip-texto: #fff;

	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ La muestra */

.dwits-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;   /* asi 30px son 30px de contenido, como en el plugin viejo */
	min-width: var( --dwits-sw-lado );
	height: var( --dwits-sw-lado );
	padding: 0 6px;
	border: var( --dwits-sw-borde-grosor ) solid var( --dwits-sw-borde );
	border-radius: 0;           /* squared */
	background: var( --dwits-sw-fondo );
	color: var( --dwits-sw-texto );
	font-size: var( --dwits-sw-letra );
	line-height: 1;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Los de color y los de imagen no llevan texto: son cuadrados limpios. */
.dwits-swatch--color,
.dwits-swatch--imagen {
	width: var( --dwits-sw-lado );
	min-width: 0;
	padding: 0;
	overflow: hidden;
}

.dwits-swatch--imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/**
 * El grosor del borde cambia entre estados (1 -> 3 -> 2 px). Si se cambiase `border-width`
 * los botones SE MOVERIAN al pasar el raton, porque cambia la caja. Se hace con `box-shadow`
 * hacia dentro, que no ocupa sitio.
 */
.dwits-swatch:hover {
	border-color: var( --dwits-sw-hover-borde );
	box-shadow: inset 0 0 0 var( --dwits-sw-hover-grosor ) var( --dwits-sw-hover-borde );
}

.dwits-swatch[aria-pressed="true"] {
	border-color: var( --dwits-sw-elegido-borde );
	box-shadow: inset 0 0 0 var( --dwits-sw-elegido-grosor ) var( --dwits-sw-elegido-borde );
}

.dwits-swatch:focus-visible {
	outline: 2px solid var( --dwits-sw-elegido-borde );
	outline-offset: 2px;
}

/**
 * Combinacion no disponible. Do'or tenia `attribute_behavior: blur`, o sea: no se esconde,
 * se apaga. Y `clickable_out_of_stock_variation: no`, o sea: no se puede pinchar.
 */
.dwits-swatch--nodisponible {
	opacity: .35;
	cursor: not-allowed;
	pointer-events: none;
}

/* ------------------------------------------------------------------- Tooltip */

/* Do'or tenia `enable_tooltip: yes`. Solo en raton: en tactil estorba mas que ayuda. */
@media ( hover: hover ) {
	.dwits-swatch[data-titulo]::after {
		content: attr( data-titulo );
		position: absolute;
		bottom: calc( 100% + 8px );
		left: 50%;
		transform: translateX( -50% );
		padding: 5px 9px;
		border-radius: 4px;
		background: var( --dwits-sw-tooltip-fondo );
		color: var( --dwits-sw-tooltip-texto );
		font-size: 12px;
		line-height: 1.2;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transition: opacity .12s ease;
		pointer-events: none;
		z-index: 20;
	}

	.dwits-swatch[data-titulo]::before {
		content: "";
		position: absolute;
		bottom: calc( 100% + 3px );
		left: 50%;
		transform: translateX( -50% );
		border: 5px solid transparent;
		border-top-color: var( --dwits-sw-tooltip-fondo );
		opacity: 0;
		visibility: hidden;
		transition: opacity .12s ease;
		pointer-events: none;
		z-index: 20;
	}

	.dwits-swatch[data-titulo]:hover::after,
	.dwits-swatch[data-titulo]:hover::before,
	.dwits-swatch[data-titulo]:focus-visible::after,
	.dwits-swatch[data-titulo]:focus-visible::before {
		opacity: 1;
		visibility: visible;
	}
}

/* ------------------------------------------------------------------ El select */

/**
 * El <select> de WooCommerce SIGUE EN EL DOM, solo escondido a la vista.
 * No se quita ni se pone `display:none`: es quien sabe que combinaciones existen y quien
 * dispara los eventos que espera WooCommerce. Es la pieza que hace que esto no se rompa.
 * Se oculta como oculta WordPress las etiquetas de lector de pantalla.
 */
.dwits-swatches-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	border: 0;
	white-space: nowrap;
}

/* Do'or tenia `show_on_archive: no`: en el listado de la tienda no salen muestras. */
.woocommerce-loop-product__link .dwits-swatches { display: none; }