/*
==================================================
tambotES CON SPRITES
==================================================

--tamano = tamaño al que queremos mostrar la casilla
--fila = fila que queremos utilizar
*/

/* ==================================================
BOTÓN BASE
================================================== */

.bot-spr {
	/*
	 * Valores por defecto.
	 */
	--tamano: 20px;
	--fila: 1;
	--sprite: none;

	width: var(--tamano);
	height: var(--tamano);

	padding: 0;
	margin: 0;
	vertical-align: middle;
	border: 0;

	background-color: transparent;
	background-image: var(--sprite);
	background-repeat: no-repeat;

	background-size: calc(4 * var(--tamano)) auto;

	background-position: calc(-1 * var(--tamano)) calc((1 - var(--fila)) * var(--tamano));
	cursor: pointer;
}

/* ==================================================
HOVER
================================================== */

.bot-spr:hover {
	/* Columna 2 */
	background-position: calc(-2 * var(--tamano)) calc((1 - var(--fila)) * var(--tamano));
}

/* ==================================================
ACTIVE
================================================== */

.bot-spr:active {
	/* Columna 3 */
	background-position: calc(-3 * var(--tamano)) calc((1 - var(--fila)) * var(--tamano));
}

/* ==================================================
DISABLED
================================================== */

.bot-spr:disabled {
	/* Columna 0 */
	background-position: 0 calc((1 - var(--fila)) * var(--tamano));
	cursor: default;
}

/* ==================================================
FOCUS
================================================== */

.bot-spr:focus-visible {
	outline: 2px solid #0066cc;
	outline-offset: 2px;
}

/* ==================================================
SPRITES
================================================== */

.spr-cab {
	--sprite: url("bot_cab_20.png");
	--tamano: 20px;
}

.spr-mas {
	--sprite: url("bot_mas_18.png");
	--tamano: 16px;
}

/* ==================================================
TAMAÑOS VISUALES
================================================== */

.tambot-16 { --tamano: 16px; }
.tambot-18 { --tamano: 18px; }
.tambot-20 { --tamano: 20px; }
.tambot-32 { --tamano: 32px; }

/* ==================================================
FILAS
================================================== */

.bot-nf-1  { --fila:  1; }
.bot-nf-2  { --fila:  2; }
.bot-nf-3  { --fila:  3; }
.bot-nf-4  { --fila:  4; }
.bot-nf-5  { --fila:  5; }
.bot-nf-6  { --fila:  6; }
.bot-nf-7  { --fila:  7; }
.bot-nf-8  { --fila:  8; }
.bot-nf-9  { --fila:  9; }
.bot-nf-10 { --fila: 10; }