.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%);
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *            MOUSE 1                                                              *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.mouse_1::before {
  content: "\
                                               \a
                                     \a
                                       \a
                                  \a
                                    \a
                                 \a
                                        \a
                                        \a
                                  \a
                                 \a
                                     \a
                                    \a
                                    \a
                                \a
                                       \a
                                     \a
";
}
.mouse_1::after {
  content: "\
                                               \a
                                         \a
                                    \a
                                      \a
                                  \a
                                 \a
                                        \a
                                      \a
                                  \a
                                 \a
                                     \a
                                    \a
                                    \a
                                \a
                                       \a
                                     \a
                                               \a
                                          \a
                                   \a
                                      \a
                                  \a
                                  \a
                                        \a
                                      \a
                                  \a
                                 \a
                                     \a
                                    \a
                                    \a
                                \a
                                       \a
                                     \a
                                               \a
                                     \a
                                       \a
                                   \a
                                    \a
                                 \a
                                        \a
                                        \a
                                  \a
                                 \a
                                     \a
                                    \a
                                    \a
                                \a
                                       \a
                                     \a
";
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *            MOUSE 2                                                              *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.mouse_2::before {
  content: "\
              \a
                \a
                \a
               \a
              \a
                 \a
                 \a
                 \a
             \a
               \a
               \a
           \a
              \a
              \a
          \a
                  \a
";
}
.mouse_2::after {
  content: "\
                \a
                \a
                \a
                 \a
              \a
                 \a
                 \a
                 \a
             \a
               \a
               \a
           \a
              \a
              \a
          \a
                  \a
                \a
                 \a
                \a
                 \a
              \a
                 \a
                 \a
                 \a
             \a
               \a
               \a
           \a
              \a
              \a
          \a
                  \a
              \a
                 \a
                \a
              \a
              \a
                 \a
                 \a
                 \a
             \a
               \a
               \a
           \a
              \a
              \a
          \a
                  \a
";
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *            MOUSE 3                                                              *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.mouse_3::before {
  content: "\
                         \a
                         \a
                       \a
                       \a
                 \a
                      \a
                       \a
                  \a
                     \a
                       \a
                      \a
                      \a
                      \a
                   \a
";
}
.mouse_3::after {
  content: "\
                         \a
                         \a
                       \a
                       \a
                 \a
                      \a
                       \a
                  \a
                     \a
                        \a
                     \a
                      \a
                      \a
                   \a
                         \a
                         \a
                       \a
                       \a
                 \a
                      \a
                       \a
                  \a
                     \a
                       \a
                      \a
                      \a
                      \a
                   \a
                          \a
                          \a
                        \a
                       \a
                       \a
                       \a
                      \a
                  \a
               \a
                      \a
                    \a
                      \a
                     \a
                   \a
";
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *            MOUSE 4                                                              *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 *                                                                                 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.mouse_4::before {
  content: "\
                       \a
                       \a
                     \a
                \a
                  \a
              \a
                  \a
                   \a
                    \a
                  \a
                   \a
                  \a
                     \a
                       \a
";
}
.mouse_4::after {
  content: "\
                       \a
                       \a
                     \a
                \a
                  \a
               \a
                 \a
                   \a
                    \a
                  \a
                   \a
                   \a
                    \a
                       \a
                       \a
                       \a
                     \a
               \a
                   \a
               \a
                 \a
                   \a
                    \a
                 \a
                   \a
                   \a
                    \a
                       \a
                       \a
                       \a
                     \a
               \a
                   \a
              \a
                  \a
                   \a
                    \a
                 \a
                   \a
                  \a
                     \a
                       \a
";
}