// ------------------------------------------
// Icon
// Base styles only - responsive handled by PHP dynamic CSS
// Selector specificity: 4x for hover states to ensure proper override
// ------------------------------------------

// Default styles use 2x selector
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  &.has-icon {
    .wp-block-zenblocks-button-basic-content {
      display: flex;
      align-items: center;
      gap: var(--icon-gap-pc, 0.5em);
      flex-direction: row;
      width: 100%;
    }
  }

  // レスポンシブアイコン表示制御（フロントエンド用：icon-pcクラスあり）
  .wp-block-zenblocks-button-basic-icon.responsive-icon {
    > .default.icon-pc { display: flex; }
    > .hover.icon-pc { display: flex; }
    > .default.icon-md,
    > .hover.icon-md,
    > .default.icon-tb,
    > .hover.icon-tb,
    > .default.icon-sp,
    > .hover.icon-sp { display: none; }
  }

  // レスポンシブアイコンでない場合（フロントエンド用）
  .wp-block-zenblocks-button-basic-icon:not(.responsive-icon) {
    > .default.icon-pc { display: flex; }
    > .hover.icon-pc { display: flex; }
    > .default.icon-md,
    > .hover.icon-md,
    > .default.icon-tb,
    > .hover.icon-tb,
    > .default.icon-sp,
    > .hover.icon-sp { display: none; }
  }

  // アイコンコンテナ基本スタイル
  > a,
  > button {
    .wp-block-zenblocks-button-basic-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: var(--icon-size-pc, 25px);
      height: var(--icon-size-pc, 25px);
      position: absolute;
      z-index: 25; // Above band (z-index: 5)
      left: var(--icon-left-pc, 50%);
      right: var(--icon-right-pc, auto);
      top: var(--icon-top-pc, 50%);
      bottom: var(--icon-bottom-pc, auto);
      transform: translateX(var(--icon-transform-x-pc, -50%)) translateY(var(--icon-transform-y-pc, -50%));
      // トランジションは位置・サイズのみ
      transition: width var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                  height var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                  top var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                  left var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                  right var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                  bottom var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                  transform var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms);

      // .default と .hover の共通スタイル
      > .default,
      > .hover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          position: relative;
          z-index: 99;
          width: 100%;
          height: 100%;
          stroke-linecap: round;
          stroke-linejoin: round;
          vertical-align: top;
          display: block;

          &[fill="none"] {
            fill: none !important;
          }
        }
      }

      // .default - 通常時のアイコンカラー
      > .default {
        opacity: 1;
        visibility: visible;
        color: var(--icon-color-pc, currentColor) !important;
        transition: opacity var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                    visibility var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms);

        svg {
          &:not([stroke="none"]) {
            stroke: currentColor !important;
            stroke-width: var(--icon-stroke-width, 1.75);
          }

          &[stroke="none"] {
            stroke: none;
            stroke-width: 0;
          }

          &:not([fill="none"]) {
            fill: currentColor !important;

            path {
              fill: currentColor !important;
            }
          }
        }
      }

      // .hover - ホバー時のアイコンカラー（初期状態は非表示）
      > .hover {
        opacity: 0;
        visibility: hidden;
        color: var(--icon-color-pc-hover, var(--icon-color-pc, currentColor)) !important;
        transition: opacity var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),
                    visibility var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms);

        svg {
          &:not([stroke="none"]) {
            stroke: currentColor !important;
            stroke-width: var(--icon-stroke-width-hover, var(--icon-stroke-width, 1.75));
          }

          &[stroke="none"] {
            stroke: none;
            stroke-width: 0;
          }

          &:not([fill="none"]) {
            fill: currentColor !important;

            path {
              fill: currentColor !important;
            }
          }
        }
      }

      &.wrap_icon {
        &:before {
          content: "";
          position: absolute;
          z-index: 10;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: var(--icon-frame-display-pc, block);
          box-sizing: border-box;
          overflow: hidden;
          width: var(--icon-frame-width-pc, 40px);
          height: var(--icon-frame-height-pc, 40px);
          border-radius: var(--icon-frame-radius-pc, 0);
          background: var(--icon-frame-bg-color-pc, transparent);
          border-style: var(--icon-frame-border-style-pc, solid);
          border-top-width: var(--icon-frame-border-top-width-pc, 0);
          border-right-width: var(--icon-frame-border-right-width-pc, 0);
          border-bottom-width: var(--icon-frame-border-bottom-width-pc, 0);
          border-left-width: var(--icon-frame-border-left-width-pc, 0);
          border-color: var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent));
          transition: all var(--icon-frame-transition-duration, 300ms) var(--icon-frame-transition-easing, ease) var(--icon-frame-transition-delay, 200ms);
        }
      }
    }

  }
}

// Hover styles use 4x selector for higher specificity
// アニメーションクラスがない場合のみ適用（アニメーションはopacityを独自に制御するため）
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic:not([class*="zenblocks-button-hover-animation-icon-"]) {
  > a:hover,
  > button:hover {
    .wp-block-zenblocks-button-basic-icon {
      width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      left: var(--icon-left-pc-hover, var(--icon-left-pc, 50%)) !important;
      right: var(--icon-right-pc-hover, var(--icon-right-pc, auto)) !important;
      top: var(--icon-top-pc-hover, var(--icon-top-pc, 50%)) !important;
      bottom: var(--icon-bottom-pc-hover, var(--icon-bottom-pc, auto)) !important;
      transform: translateX(var(--icon-transform-x-pc-hover, var(--icon-transform-x-pc, -50%))) translateY(var(--icon-transform-y-pc-hover, var(--icon-transform-y-pc, -50%)));

      // .default を非表示
      > .default {
        opacity: 0 !important;
        visibility: hidden !important;
      }

      // .hover を表示
      > .hover {
        opacity: 1 !important;
        visibility: visible !important;
      }

      &.wrap_icon {
        &:before {
          width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px)) !important;
          height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px)) !important;
          border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0)) !important;
          background: var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-pc, transparent));
          border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0));
          border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0));
          border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0));
          border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0));
          border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent)));
          border-style: var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-pc, solid));
        }
      }
    }
  }
}

// アニメーションクラスがある場合のホバースタイル（opacity/visibilityはアニメーションに任せる）
.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-"] {
  > a:hover,
  > button:hover {
    .wp-block-zenblocks-button-basic-icon {
      width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      left: var(--icon-left-pc-hover, var(--icon-left-pc, 50%)) !important;
      right: var(--icon-right-pc-hover, var(--icon-right-pc, auto)) !important;
      top: var(--icon-top-pc-hover, var(--icon-top-pc, 50%)) !important;
      bottom: var(--icon-bottom-pc-hover, var(--icon-bottom-pc, auto)) !important;
      transform: translateX(var(--icon-transform-x-pc-hover, var(--icon-transform-x-pc, -50%))) translateY(var(--icon-transform-y-pc-hover, var(--icon-transform-y-pc, -50%)));

      // opacity/visibilityはアニメーションに任せるため、ここでは設定しない

      &.wrap_icon {
        &:before {
          width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px)) !important;
          height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px)) !important;
          border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0)) !important;
          background: var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-pc, transparent));
          border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0));
          border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0));
          border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0));
          border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0));
          border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent)));
          border-style: var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-pc, solid));
        }
      }
    }
  }
}

// ==================================================
// Editor Hover Preview State - .is-hover-preview
// Shows hover styles when editing hover settings in Inspector
// :hover も含めることで、ホバータブ有効時に実際にホバーしてもプレビュースタイルを維持
// ==================================================

// アニメーションクラスがない場合
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic:not([class*="zenblocks-button-hover-animation-icon-"]).is-hover-preview {
  > a,
  > button,
  > a:hover,
  > button:hover {
    .wp-block-zenblocks-button-basic-icon {
      width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      left: var(--icon-left-pc-hover, var(--icon-left-pc, 50%)) !important;
      right: var(--icon-right-pc-hover, var(--icon-right-pc, auto)) !important;
      top: var(--icon-top-pc-hover, var(--icon-top-pc, 50%)) !important;
      bottom: var(--icon-bottom-pc-hover, var(--icon-bottom-pc, auto)) !important;
      transform: translateX(var(--icon-transform-x-pc-hover, var(--icon-transform-x-pc, -50%))) translateY(var(--icon-transform-y-pc-hover, var(--icon-transform-y-pc, -50%)));

      // .default を非表示
      > .default {
        opacity: 0 !important;
        visibility: hidden !important;
      }

      // .hover を表示
      > .hover {
        opacity: 1 !important;
        visibility: visible !important;
      }

      &.wrap_icon {
        &:before {
          width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px)) !important;
          height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px)) !important;
          border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0)) !important;
          background: var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-pc, transparent)) !important;
          border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0)) !important;
          border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0)) !important;
          border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0)) !important;
          border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0)) !important;
          border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent))) !important;
          border-style: var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-pc, solid)) !important;
        }
      }
    }
  }
}

// アニメーションクラスがある場合
.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-"].is-hover-preview {
  > a,
  > button,
  > a:hover,
  > button:hover {
    .wp-block-zenblocks-button-basic-icon {
      width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
      left: var(--icon-left-pc-hover, var(--icon-left-pc, 50%)) !important;
      right: var(--icon-right-pc-hover, var(--icon-right-pc, auto)) !important;
      top: var(--icon-top-pc-hover, var(--icon-top-pc, 50%)) !important;
      bottom: var(--icon-bottom-pc-hover, var(--icon-bottom-pc, auto)) !important;
      transform: translateX(var(--icon-transform-x-pc-hover, var(--icon-transform-x-pc, -50%))) translateY(var(--icon-transform-y-pc-hover, var(--icon-transform-y-pc, -50%)));

      // Editorプレビューではアニメーション再生しないため、hover側を強制表示
      > .default {
        opacity: 0 !important;
        visibility: hidden !important;
      }
      > .hover {
        opacity: 1 !important;
        visibility: visible !important;
      }

      &.wrap_icon {
        &:before {
          width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px)) !important;
          height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px)) !important;
          border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0)) !important;
          background: var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-pc, transparent)) !important;
          border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0)) !important;
          border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0)) !important;
          border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0)) !important;
          border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0)) !important;
          border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent))) !important;
          border-style: var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-pc, solid)) !important;
        }
      }
    }
  }
}