/*
 * Roy Memory Toolkit
 * Stock Manager
 *
 * Estilos exclusivos para la barra de stock RMT.
 */


/* ==========================================================================
   Barra de stock
   ========================================================================== */

.rmt-stock-bar {
	width: 100%;
	display: block;
	position: relative;
	overflow: visible;
	border-radius: 999px;
	padding-bottom: 2px;
}


/* ==========================================================================
   Fondo de la barra
   ========================================================================== */

.rmt-stock-bar__track {
	width: 100%;
	height: 8px;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	background: #D5D5D5;
}


/* ==========================================================================
   Nivel actual de stock
   ========================================================================== */

.rmt-stock-bar__fill {
	height: 100%;
	display: block;
	width: 0%;
	border-radius: 999px;
	transition: width 0.35s ease;
}


/* ==========================================================================
   Estados de stock
   ========================================================================== */

.rmt-stock-bar--high .rmt-stock-bar__fill {
	background: #3ED69C;
}

.rmt-stock-bar--medium .rmt-stock-bar__fill {
	background: #F2C94C;
}

.rmt-stock-bar--low .rmt-stock-bar__fill {
	background: #EB5757;
}


/* ==========================================================================
   Texto de stock
   ========================================================================== */

.rmt-stock-bar__label {
	display: block;
	margin-top: 7px;
	margin-bottom: 2px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	overflow: visible;
}


/* ==========================================================================
   Producto de venta especial
   ========================================================================== */

.rmt-stock-special {
	display: block;
	width: 100%;
	text-align: center;
}

.rmt-stock-special__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
	text-align: center;
}


/* ==========================================================================
   Botón de consulta
   ========================================================================== */

.rmt-consultar-disponibilidad {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


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

.rmt-stock-bar__fill {
	will-change: width;
}

@media (prefers-reduced-motion: reduce) {

	.rmt-stock-bar__fill {
		transition: none;
	}

}