.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  $icon-move-distance: 10px;
  $icon-move-distance-diagonal: 5px;

  // -----------------------------------
  // animation none (アニメーションなし - スムーズな切り替えのみ)
  // -----------------------------------
  &.zenblocks-button-hover-animation-icon-none {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon {
        > .default {
          opacity: 1;
          visibility: visible;
          transition: opacity var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out);
          transition-delay: var(--icon-animation-delay, 200ms);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transition: opacity var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out);
          transition-delay: var(--icon-animation-delay, 200ms);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            opacity: 0;
          }
          > .hover {
            opacity: 1;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 01
  // -----------------------------------
  // .default が左に消えるアニメーション
  @keyframes icon-animation-01-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0, 0);
      opacity: 0;
    }
    100% {
      transform: translate(calc(-1 * $icon-move-distance), 0);
      opacity: 0;
    }
  }

  // .hover が左からフェードインするアニメーション
  @keyframes icon-animation-01-hover-in {
    0% {
      transform: translate(calc(-1 * $icon-move-distance), 0);
      opacity: 0;
    }
    50% {
      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 {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(calc(-1 * $icon-move-distance), 0);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-01-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-01-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 02 (右からスライドイン)
  // -----------------------------------
  // .default が右に消えるアニメーション
  @keyframes icon-animation-02-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate($icon-move-distance, 0);
      opacity: 0;
    }
    100% {
      transform: translate($icon-move-distance, 0);
      opacity: 0;
    }
  }

  // .hover が標準位置でフェードインするアニメーション
  @keyframes icon-animation-02-hover-in {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    50% {
      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 {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(0, 0);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-02-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-02-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 03 (右→左へスライド)
  // -----------------------------------
  // .default が右に消えるアニメーション
  @keyframes icon-animation-03-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate($icon-move-distance, 0);
      opacity: 0;
    }
    100% {
      transform: translate($icon-move-distance, 0);
      opacity: 0;
    }
  }

  // .hover が左からフェードインするアニメーション
  @keyframes icon-animation-03-hover-in {
    0% {
      transform: translate(calc(-1 * $icon-move-distance), 0);
      opacity: 0;
    }
    50% {
      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 {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(calc(-1 * $icon-move-distance), 0);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-03-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-03-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 04 (上からスライドイン)
  // -----------------------------------
  // .default が上に消えるアニメーション
  @keyframes icon-animation-04-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0, calc(-1 * $icon-move-distance));
      opacity: 0;
    }
    100% {
      transform: translate(0, calc(-1 * $icon-move-distance));
      opacity: 0;
    }
  }

  // .hover が標準位置でフェードインするアニメーション
  @keyframes icon-animation-04-hover-in {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    50% {
      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 {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(0, 0);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-04-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-04-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 05 (下からスライドイン)
  // -----------------------------------
  // .default がその場でフェードアウト
  @keyframes icon-animation-05-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0, 0);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 0;
    }
  }

  // .hover が下からフェードインするアニメーション
  @keyframes icon-animation-05-hover-in {
    0% {
      transform: translate(0, $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-05 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(0, $icon-move-distance);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-05-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-05-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 06 (上→下へスライド)
  // -----------------------------------
  // .default が上に消えるアニメーション
  @keyframes icon-animation-06-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    33% {
      transform: translate(0, calc(-1 * $icon-move-distance));
      opacity: 0;
    }
    100% {
      transform: translate(0, calc(-1 * $icon-move-distance));
      opacity: 0;
    }
  }

  // .hover が下からフェードインするアニメーション
  @keyframes icon-animation-06-hover-in {
    0% {
      transform: translate(0, $icon-move-distance);
      opacity: 0;
    }
    66% {
      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 {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(0, $icon-move-distance);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-06-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-06-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) 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 var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) 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 var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) 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 var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) 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 var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) 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 var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
        }
      }
    }
  }

  // -----------------------------------
  // animation 07 (斜めスライド)
  // -----------------------------------
  // .default が右上に消えるアニメーション
  @keyframes icon-animation-07-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate($icon-move-distance-diagonal, calc(-1 * $icon-move-distance-diagonal));
      opacity: 0;
    }
    100% {
      transform: translate($icon-move-distance-diagonal, calc(-1 * $icon-move-distance-diagonal));
      opacity: 0;
    }
  }

  // .hover が左下からフェードインするアニメーション
  @keyframes icon-animation-07-hover-in {
    0% {
      transform: translate(calc(-1 * $icon-move-distance-diagonal), $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 {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(calc(-1 * $icon-move-distance-diagonal), $icon-move-distance-diagonal);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-07-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-07-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 08 (横揺れ)
  // -----------------------------------
  // .default が横揺れして消える
  @keyframes icon-animation-08-default-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    10% {
      transform: translate(calc(-1 * $icon-move-distance * 0.3), 0);
      opacity: 1;
    }
    30% {
      transform: translate($icon-move-distance * 0.3, 0);
      opacity: 1;
    }
    50% {
      transform: translate(calc(-1 * $icon-move-distance * 0.4), 0);
      opacity: 1;
    }
    60% {
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 0;
    }
  }

  // .hover が標準位置で表示される
  @keyframes icon-animation-08-hover-in {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    70% {
      transform: translate($icon-move-distance * 0.3, 0);
      opacity: 1;
    }
    90% {
      transform: translate(calc(-1 * $icon-move-distance * 0.2), 0);
      opacity: 1;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-08 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(0, 0);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-08-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-08-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }

  // -----------------------------------
  // animation 09 (回転)
  // -----------------------------------
  // .default が回転しながら消える
  @keyframes icon-animation-09-default-out {
    0% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
      opacity: 1;
    }
    50% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 180deg);
      opacity: 1;
    }
    50.01% {
      opacity: 0;
    }
    100% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 360deg);
      opacity: 0;
    }
  }

  // .hover が回転しながら表示される
  @keyframes icon-animation-09-hover-in {
    0% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
      opacity: 0;
    }
    50% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 180deg);
      opacity: 0;
    }
    50.01% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) rotate3d(1, 1, 0, 360deg);
      opacity: 1;
    }
  }

  &.zenblocks-button-hover-animation-icon-09 {
    > a,
    > button {
      .wp-block-zenblocks-button-basic-icon {
        > .default {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
        }
        > .hover {
          opacity: 0;
          visibility: visible;
          transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
        }
      }

      &:hover {
        .wp-block-zenblocks-button-basic-icon {
          > .default {
            animation: icon-animation-09-default-out var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
          > .hover {
            animation: icon-animation-09-hover-in var(--icon-animation-duration, 500ms) var(--icon-animation-easing, ease-in-out) var(--icon-animation-delay, 200ms) forwards;
          }
        }
      }
    }
  }
}