// Row block-tally graphic. Five small square blocks in a fixed row; each block stacks a body
// composite + four side-button sprites as absolutely-positioned, pixel-snapped layers. The
// component never eats pointer input so the host row stays clickable.

.block-tally {
	flex-direction: row;
	align-items: center;
	pointer-events: none;

	.block {
		position: relative;
		width: 40px;
		height: 40px;
		margin-right: 4px;

		.layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			image-rendering: pixelated;
		}
	}
}