@import "./mouses/mouse_1.css";
@import "./mouses/mouse_2.css";
@import "./mouses/mouse_3.css";
@import "./mouses/mouse_4.css";

.mouse {
	margin: auto;
	width: fit-content;
	overflow: hidden;

	.frames {
		position: relative;
		animation: mouse_move infinite 2s normal steps(4);
		&::before {
			position: relative;
			top: 0px;
			left: 0px;
		}
		&::after {
			position: absolute;
			top: 100%;
			left: 0px;
		}
	}
}

/*
* using 'transform' instead of 'top', because 'top' needs
* the parent to have an explicit height
* but in this case its height is according to the children
*
*/
@keyframes mouse_move {
	0%     {transform: translateY(0%);}
	100%   {transform: translateY(-400%);}
}