// アイコンアニメーションプレビュー用のスタイル
// autoPlay ON: .is-force-hover クラスでアニメーション実行
// autoPlay OFF: :hover でアニメーション実行

$icon-move-distance: 10px;
$icon-move-distance-diagonal: 5px;

// ================================================================
// Keyframes定義
// ================================================================

// Animation 01: 左からスライドイン
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 02: 右からスライドイン
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 03: 右→左へスライド
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 04: 上からスライドイン
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 05: 下からスライドイン
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 06: 上→下へスライド
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 07: 斜めスライド
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// Animation 08: 横揺れ
@keyframes preview-icon-animation-08-default-out {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  10% {
    transform: translate(-3px, 0);
    opacity: 1;
  }
  30% {
    transform: translate(3px, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-4px, 0);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes preview-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(3px, 0);
    opacity: 1;
  }
  90% {
    transform: translate(-2px, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

// Animation 09: 回転
@keyframes preview-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;
  }
}

@keyframes preview-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;
  }
}

// ================================================================
// 共通スタイル
// ================================================================

.icon-animation-preview-wrapper.wp-block-zenblocks-button-basic {
  > .icon-animation-preview-button {
    height: 100% !important;

    .wp-block-zenblocks-button-basic-content {
      .wp-block-zenblocks-button-basic-icon {
        position: relative !important;
        width: 24px !important;
        height: 24px !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        // zenblocks-responsive.css の transform: translateX(-50%) translateY(-50%) を無効化
        transform: none !important;
        overflow: hidden;
        // _icon.scss の position/transform トランジションがプレビューに干渉するのを防止
        transition: none !important;

        // wrap_icon の ::before 擬似要素（アイコンフレーム）を無効化
        &.wrap_icon::before {
          display: none !important;
        }

        // プレビュー用：.default と .hover を同じ位置に重ねる
        > .default,
        > .hover {
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 100% !important;
          display: flex !important;
          align-items: center;
          justify-content: center;
          visibility: visible !important;
          // _icon.scss の opacity/visibility トランジションがプレビューに干渉するのを防止
          transition: none !important;
        }
      }
    }
  }

  // ================================================================
  // Animation 01: 左からスライドイン - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-01 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(calc(-1 * #{$icon-move-distance}), 0);
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-01 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-01.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-01-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-01-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 02: 右からスライドイン - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-02 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(0, 0);
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-02 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-02.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-02-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-02-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 03: 右→左へスライド - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-03 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(calc(-1 * #{$icon-move-distance}), 0);
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-03 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-03.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-03-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-03-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 04: 上からスライドイン - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-04 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(0, 0);
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-04 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-04.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-04-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-04-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 05: 下からスライドイン - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-05 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(0, #{$icon-move-distance});
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-05 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-05.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-05-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-05-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 06: 上→下へスライド - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-06 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(0, #{$icon-move-distance});
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-06 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-06.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-06-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-06-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 07: 斜めスライド - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-07 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(calc(-1 * #{$icon-move-distance-diagonal}), #{$icon-move-distance-diagonal});
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-07 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-07.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-07-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-07-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 08: 横揺れ - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-08 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0);
      }
      > .hover {
        opacity: 0;
        transform: translate(0, 0);
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-08 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-08.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-08-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-08-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }

  // ================================================================
  // Animation 09: 回転 - 初期状態と発火
  // ================================================================
  &.zenblocks-button-hover-animation-icon-09 > .icon-animation-preview-button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        opacity: 1;
        transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
      }
      > .hover {
        opacity: 0;
        transform: translate(0, 0) rotate3d(1, 1, 0, 0deg);
      }
    }
  }
  &.zenblocks-button-hover-animation-icon-09 > .icon-animation-preview-button.is-force-hover,
  &.zenblocks-button-hover-animation-icon-09.is-hover-enabled > .icon-animation-preview-button:hover {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        animation: preview-icon-animation-09-default-out 1s ease-in-out 0s forwards !important;
      }
      > .hover {
        animation: preview-icon-animation-09-hover-in 1s ease-in-out 0s forwards !important;
      }
    }
  }
}

// PHPで生成される高詳細度のホバースタイルを上書き
.icon-animation-preview-wrapper.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic[class*="zenblocks-button-hover-animation-icon-"] {
  > button:hover .wp-block-zenblocks-button-basic-icon {
    top: 0 !important;
    left: 0 !important;
    width: 24px !important;
    height: 24px !important;
    transform: none !important;
  }
}