.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  $icon-move-distance: 10px;
  $icon-move-distance-diagonal: 5px;
  $icon-animation-duration: 0.5s;
  $icon-animation-delay: 0.2s;
  $icon-animation-easing: ease-in-out;

  // -----------------------------------
  // animation 01
  // -----------------------------------
  @keyframes icon-animation-01 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    33% {
      transform: translate(0, 0);
      opacity: 0;
    }
    66% {
      transform: translate(calc(-1 * $icon-move-distance), 0);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-01 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-01 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 02
  // -----------------------------------
  @keyframes icon-animation-02 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    33% {
      transform: translate($icon-move-distance, 0);
      opacity: 0;
    }
    66% {
      transform: translate(0, 0);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-02 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-02 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 03
  // -----------------------------------
  @keyframes icon-animation-03 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    33% {
      transform: translate($icon-move-distance, 0);
      opacity: 0;
    }
    66% {
      transform: translate(calc(-1 * $icon-move-distance), 0);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-03 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-03 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 04
  // -----------------------------------
  @keyframes icon-animation-04 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    33% {
      transform: translate(0, calc(-1 * $icon-move-distance));
      opacity: 0;
    }
    66% {
      transform: translate(0, 0);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-04 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-04 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 05
  // -----------------------------------
  @keyframes icon-animation-05 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    33% {
      transform: translate(0, 0);
      opacity: 0;
    }
    66% {
      transform: translate(0, $icon-move-distance);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-05 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-05 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 06
  // -----------------------------------
  @keyframes icon-animation-06 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    25% {
      transform: translate(0, calc(-1 * $icon-move-distance));
      opacity: 0;
    }
    50% {
      transform: translate(0, $icon-move-distance);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-06 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-06 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 07
  // -----------------------------------
  @keyframes icon-animation-07 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    25% {
      transform: translate($icon-move-distance-diagonal, calc(-1 * $icon-move-distance-diagonal));
      opacity: 0;
    }
    50% {
      transform: translate(calc(-1 * $icon-move-distance-diagonal), $icon-move-distance-diagonal);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-07 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-07 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 08
  // -----------------------------------
  @keyframes icon-animation-08 {
    0% {
      transform: translate(0, 0);
    }
    10% {
      transform: translate(calc(-1 * $icon-move-distance * 0.2), 0);
    }
    30% {
      transform: translate($icon-move-distance * 0.2, 0);
    }
    50% {
      transform: translate(calc(-1 * $icon-move-distance * 0.2), 0);
    }
    70% {
      transform: translate($icon-move-distance * 0.2, 0);
    }
    90% {
      transform: translate(calc(-1 * $icon-move-distance * 0.2 * 0.5), 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }

  &.zenblocks-button-hover-animation-icon-08 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-08 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 09
  // -----------------------------------
  @keyframes icon-animation-09 {
    0% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
    }
    100% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 360deg);
    }
  }

  &.zenblocks-button-hover-animation-icon-09 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon > svg {
        animation: none;
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon > svg {
          animation: icon-animation-09 $icon-animation-duration $icon-animation-easing $icon-animation-delay forwards;
        }
      }
    }
  }
}