.mouse_container {
  margin: auto;
  width: fit-content;
  position: relative;

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

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

  .skouik {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    /* Style the word to be hidden by default */
    .sound {
      position: absolute;
      top: -30px;
      opacity: 0;

      &.sound_1 {
        left: 170px;
      }
      &.sound_2 {
        left: 80px;
      }
      &.sound_3 {
        top: 40px;
        left: 30px;
      }
      &.sound_4 {
        top: -40px;
        left: 80px;
      }
    }

    .button {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 100%;
      height: 100%;
      opacity: 0;

      &:focus {
        z-index: -1;
      }

      /* Show the word when the button is focused */
      &.button:focus + .sound {
        animation-duration: 3s;
        animation-timing-function: forwards;
      }
      &:focus + .sound_left {
        animation-name: sound_animation_left;
      }
      &:focus + .sound_right {
        animation-name: sound_animation_right;
      }
    }
  }
}

@keyframes sound_animation_left {
  0% {
    opacity: 1;
  }
  100% {
    top: -300px;
    left: 0px;
    transform: rotate(-120deg);
    opacity: 0;
  }
}
@keyframes sound_animation_right {
  0% {
    opacity: 1;
  }
  100% {
    top: -400px;
    left: 250px;
    transform: rotate(90deg);
    opacity: 0;
  }
}

/*
* 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
";
}