/**
 * Slick Fake Scrollbar
 *
 * Barra de scroll visual para Slick Carousel
 * Inspirada en slick-dots pero como scrollbar continua
 *
 * @package LostChilds
 * @since 1.4.0
 */

/* ==========================================================================
   Fake Scrollbar Container
   ========================================================================== */

.slick-fake-scrollbar {
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 20px;
	padding: 0;
	display: flex;
	align-items: center;
	user-select: none;
}

/* Track - La pista completa del scroll */
.slick-fake-scrollbar-track {
	position: relative;
	width: 100%;
	height: 6px;
	background: var(--lostchilds-accent, #f0f0f1);
	border-radius: 3px;
	cursor: pointer;
	transition: height 0.2s ease;
}

.slick-fake-scrollbar-track:hover {
	height: 8px;
}

/* Thumb - El indicador arrastrable */
.slick-fake-scrollbar-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--wp--preset--color--contrast);
	border-radius: 3px;
	cursor: grab;
	transition: background 0.2s ease;
	min-width: 40px; /* Ancho mínimo para que sea fácil de agarrar */
}

.slick-fake-scrollbar-thumb:hover {
	background: var(--wp--preset--color--contrast);
}

.slick-fake-scrollbar-thumb:active,
.slick-fake-scrollbar-thumb.dragging {
	cursor: grabbing;
	background: var(--wp--preset--color--contrast);
}

/* Progress indicator - Muestra cuánto se ha avanzado */
.slick-fake-scrollbar-progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: rgba(34, 113, 177, 0);
	border-radius: 3px 0 0 3px;
	pointer-events: none;
	transition: width 0.3s ease;
}

/* ==========================================================================
   Variaciones de estilo
   ========================================================================== */

/* Estilo minimal - Más delgado y discreto */
.slick-fake-scrollbar.minimal .slick-fake-scrollbar-track {
	height: 4px;
	background: color-mix(in srgb,var(--wp--preset--color--contrast) 20%,transparent);
}

.slick-fake-scrollbar.minimal .slick-fake-scrollbar-track:hover {
	height: 4px;
}

.slick-fake-scrollbar.minimal .slick-fake-scrollbar-thumb {
	min-width: 30px;
}

/* Estilo dots - Combina scrollbar con dots */
.slick-fake-scrollbar.with-dots {
	margin-top: 30px;
}

.slick-fake-scrollbar.with-dots::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	color: var(--lostchilds-primary, #2271b1);
}

/* Estilo rounded - Más redondeado */
.slick-fake-scrollbar.rounded .slick-fake-scrollbar-track {
	border-radius: 10px;
}

.slick-fake-scrollbar.rounded .slick-fake-scrollbar-thumb {
	border-radius: 10px;
}

/* ==========================================================================
   Estados de interacción
   ========================================================================== */

/* Cuando está en modo autoplay */
.slick-fake-scrollbar.autoplay .slick-fake-scrollbar-thumb {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/* Cuando se está arrastrando */
.slick-fake-scrollbar.is-dragging .slick-fake-scrollbar-track {

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.slick-fake-scrollbar {
		height: 30px;
		margin-top: 15px;
		padding: 0 5px;
	}

	.slick-fake-scrollbar-track {
		height: 8px;
	}

	.slick-fake-scrollbar-thumb {
		min-width: 50px; /* Más ancho en móvil para touch */
	}
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

.slick-fake-scrollbar-thumb:focus {
	outline: 2px solid var(--lostchilds-primary, #2271b1);
	outline-offset: 2px;
}

.slick-fake-scrollbar[aria-hidden="true"] {
	display: none;
}

/* Mostrar números de slide (opcional) */
.slick-fake-scrollbar-info {
	position: absolute;
	top: -20px;
	right: 0;
	font-size: 12px;
	color: var(--lostchilds-primary, #2271b1);
	font-weight: 500;
}