/**
 * Botón «Volver arriba». Ver inc/functions/subir.php.
 *
 * Círculo lila de la marca con una flecha blanca y, alrededor, un aro que se
 * llena de verde con lo leído de la página (lo mueve assets/js/subir.js con
 * la variable `--ts-subir-progreso`, de 0 a 1).
 *
 * Sin JavaScript se queda siempre a la vista; con él aparece al bajar.
 *
 * @package Tiendasisimo
 * @since 1.20.0
 */

/* Medidas en píxeles y no en rem: en móvil el sitio baja el tamaño de letra
   base (1rem ≈ 14 px) y el botón se quedaba en 41 px, por debajo de los 44 de
   área táctil. */
.ts-subir {
	--ts-subir-tam: 48px;
	--ts-subir-margen: 16px;

	position: fixed;
	right: max(var(--ts-subir-margen), env(safe-area-inset-right));
	bottom: max(var(--ts-subir-margen), env(safe-area-inset-bottom));

	/* Por encima del contenido y por debajo del megamenú (40 y 900) y del
	   buscador (9999), que tienen que poder taparlo. */
	z-index: 30;
	display: grid;
	place-items: center;
	width: var(--ts-subir-tam);
	height: var(--ts-subir-tam);
	border-radius: 50%;
	background-color: #663d88;
	box-shadow:
		0 1px 2px rgb(45 25 64 / 20%),
		0 12px 28px -10px rgb(45 25 64 / 60%);
	color: #ffffff;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		opacity 0.3s ease,
		transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0s;
}

@media (width >= 768px) {
	.ts-subir {
		--ts-subir-tam: 52px;
		--ts-subir-margen: 24px;
	}
}

/* Con JavaScript, escondido hasta que se baja: fuera de la vista y fuera del
   orden de tabulación (`visibility`), y entra subiendo un poco. */
.ts-subir--listo:not(.is-visible) {
	visibility: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.9);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0.3s;
	pointer-events: none;
}

.ts-subir:hover {
	background-color: #553173;
	box-shadow:
		0 1px 2px rgb(45 25 64 / 20%),
		0 16px 32px -10px rgb(45 25 64 / 70%);
}

/* --- Aro de progreso ----------------------------------------------------- */

/* Empieza arriba, como las agujas de un reloj. `pathLength="100"` en el
   círculo deja el trazo en porcentaje. */
.ts-subir__aro {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.ts-subir__pista,
.ts-subir__progreso {
	fill: none;
	stroke-width: 2.5;
}

.ts-subir__pista {
	stroke: rgb(255 255 255 / 22%);
}

.ts-subir__progreso {
	stroke: #9ab842;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - 100 * var(--ts-subir-progreso, 0));
	transition: stroke-dashoffset 0.1s linear;
}

/* --- Flecha -------------------------------------------------------------- */

.ts-subir__flecha {
	position: relative;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

@media (width >= 768px) {
	.ts-subir__flecha {
		width: 22px;
		height: 22px;
	}
}

/* Al pasar por encima o llegar con el teclado, la flecha se asoma hacia
   donde va a llevar. */
.ts-subir:is(:hover, :focus-visible) .ts-subir__flecha {
	transform: translateY(-2px);
}

/* --- Preferencias del sistema ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ts-subir,
	.ts-subir--listo:not(.is-visible),
	.ts-subir__flecha,
	.ts-subir__progreso {
		transition: none;
	}

	.ts-subir--listo:not(.is-visible) {
		transform: none;
	}

	.ts-subir:is(:hover, :focus-visible) .ts-subir__flecha {
		transform: none;
	}
}

/* Alto contraste de Windows: borde visible y colores del sistema. */
@media (forced-colors: active) {
	.ts-subir {
		border: 2px solid ButtonText;
		background-color: ButtonFace;
		color: ButtonText;
	}

	.ts-subir__pista {
		stroke: GrayText;
	}

	.ts-subir__progreso {
		stroke: Highlight;
	}
}

@media print {
	.ts-subir {
		display: none;
	}
}