@import "./styles/mixins";

// ブロック内のスタッキングコンテキストを分離して
// マイクロコピー等の高い z-index が隣接ブロックのツールバーに影響しないようにする
// ※ .editor-styles-wrapper 内に限定し、サイドバーのプレビューに影響しないようにする
.editor-styles-wrapper .wp-block-zenblocks-button-basic {
  isolation: isolate;
}

// WordPress Core & Gutenberg 標準スタイル最小限リセット

.editor-styles-wrapper .wp-block-zenblocks-button-basic,
.wp-block-editor .wp-block-zenblocks-button-basic {
  // 最小限のWordPress干渉スタイルのみリセット
  // background: none;
  border: none !important;
  // border-radius: 0;
  // box-shadow: none;
  // margin: 0;
  // outline: none;
}

// .zenblocks-nested-panel.components-panel__body {
//   .components-panel__body-title {
//     background-color: #f0f6fc;

//     button {
//       color: #0073aa;
//     }
//   }

//   .components-panel__body-toggle {
//     &:hover {
//       background-color: #e5f2fa;
//     }
//   }
// }

.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic a,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic a,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic button,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic button {
  // aタグ、buttonタグの最小限リセット
  // background: none;
  // border: none;
  // border-radius: 0;
  // margin: 0;
  // padding: 0;
  // text-decoration: none;
  // outline: none;
}

// WordPress標準の .wp-element-button クラスの角丸リセットを無効化
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic .wp-element-button,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic .wp-element-button,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic a.wp-element-button,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic a.wp-element-button {
  border-radius: inherit;
}

// 角丸設定の最高優先度適用（aタグ・buttonタグに直接適用）
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic > a,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic > a,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic > button,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic > button {
  border-radius: var(--styling-radius-pc, 0);
}

// WordPress標準スタイルの選択的リセット
.editor-styles-wrapper {
  .button-basic {
    // エディター専用のスタイル
    // border: 1px dashed #ddd;
    // box-sizing: border-box;

    // 角丸設定を親要素に適用（子要素で継承するため）
    overflow: hidden;

    // CSS変数が確実に子要素に継承されるように
    * {
      box-sizing: inherit;
    }

    // Width設定をエディタでも反映
    width: var(--layout-width-pc, auto);
    min-width: var(--layout-width-min-pc, auto);
    max-width: var(--layout-width-max-pc, none);
    display: block;

    // Height設定はa/buttonに適用するため、親要素はautoを維持
    height: auto;
    min-height: auto;
    max-height: none;

    // マージンの強制オーバーライド
    margin-top: var(--spacing-margin-top-pc, 0);
    margin-right: var(--spacing-margin-right-pc, 0);
    margin-bottom: var(--spacing-margin-bottom-pc, 0);
    margin-left: var(--spacing-margin-left-pc, 0);

    // aタグとbuttonタグにパディングと高さを適用
    > a,
    > button {
      // WordPress標準ボタンスタイルの最小限リセット
      // background/border/border-radius は後続のCSS変数宣言にフォールバック値があるため
      // 重複リセット不要。重複宣言は一部のCSSミニファイアで誤処理される可能性がある
      background: none;
      margin: 0;
      outline: none;
      overflow: hidden;

      // 基本スタイルを設定（親要素の枠いっぱいに）
      box-sizing: border-box;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: pointer;

      // 親要素の枠いっぱいに拡張
      // fit選択時はmin-width=max-widthで固定幅になる
      width: 100%;
      min-width: var(--layout-width-min-pc, auto);
      max-width: var(--layout-width-max-pc, none);
      height: var(--layout-height-pc, auto);
      min-height: var(--layout-height-min-pc, auto);
      max-height: var(--layout-height-max-pc, none);

      padding-top: var(--spacing-padding-top-pc, 0);
      padding-right: var(--spacing-padding-right-pc, 0);
      padding-bottom: var(--spacing-padding-bottom-pc, 0);
      padding-left: var(--spacing-padding-left-pc, 0);

      // ボーダー設定（CSS変数を!importantで強制適用）
      border: var(--styling-border-width-pc, 0) var(--styling-border-style-pc, solid) var(--styling-border-color-pc, transparent);
      border-width: var(--styling-border-width-pc, 0);
      border-style: var(--styling-border-style-pc, solid);
      border-color: var(--styling-border-color-pc, transparent);
      // 角丸設定（外側の角丸 = JS側で計算済み: 角丸0なら0、0以外なら角丸+ボーダー幅）
      border-top-left-radius: var(--styling-radius-outer-top-left-pc, var(--styling-radius-top-left-pc, 0px));
      border-top-right-radius: var(--styling-radius-outer-top-right-pc, var(--styling-radius-top-right-pc, 0px));
      border-bottom-right-radius: var(--styling-radius-outer-bottom-right-pc, var(--styling-radius-bottom-right-pc, 0px));
      border-bottom-left-radius: var(--styling-radius-outer-bottom-left-pc, var(--styling-radius-bottom-left-pc, 0px));
      // シャドウ設定（CSS変数を!importantで強制適用）
      box-shadow: var(--styling-shadow-pc, none);
      // 透明設定（CSS変数を使用 - getPreviewStylesがプレビューデバイスに応じてPC変数を更新）
      opacity: var(--styling-opacity-pc, 1);
      mix-blend-mode: var(--styling-mix-blend-mode-pc, normal);
      // フォント設定（CSS変数を!importantで強制適用）
      font-size: var(--font-size-pc, inherit);
      font-weight: var(--font-weight-pc, normal);
      line-height: var(--line-height-pc, 1.2);
      letter-spacing: var(--letter-spacing-pc, 0px);
      font-family: var(--font-family);
      // テキスト色（CSS変数を!importantで強制適用）
      color: var(--font-color-pc, inherit);

      // ホバートランジション設定
      transition:
        color var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
        text-shadow var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
        border var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
        border-radius var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
        box-shadow var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
        opacity var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);

      // インナーシャドウ用オーバーレイ（最前面に配置）
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 100;
        box-shadow: var(--styling-inner-shadow-pc, none);
      }

      // 背景オーバーレイレイヤー - デフォルト状態（オーバーレイとして最前面）
      // Crossfade method: .default fades out, .hover fades in
      .wp-block-zenblocks-button-basic-bg-overlay.default {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--background-color-pc, none);
        background-image: var(--background-color-pc, none);
        background-color: transparent;
        opacity: var(--background-color-opacity-pc, 1);
        mix-blend-mode: var(--background-color-mix-blend-mode-pc, normal);
        border-radius: inherit;
        pointer-events: none;
        z-index: 3;
        transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
      }

      // 背景オーバーレイレイヤー - ホバー状態（初期は非表示）
      // Uses fallback to normal overlay to prevent white flash when hover overlay is not set
      .wp-block-zenblocks-button-basic-bg-overlay.hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--background-color-pc-hover, var(--background-color-pc, none));
        background-image: var(--background-color-pc-hover, var(--background-color-pc, none));
        background-color: transparent;
        opacity: 0;
        mix-blend-mode: var(--background-color-mix-blend-mode-pc-hover, var(--background-color-mix-blend-mode-pc, normal));
        border-radius: inherit;
        pointer-events: none;
        z-index: 3;
        transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
      }

      // 背景画像レイヤー - デフォルト状態
      // Includes background-color (base color)
      .wp-block-zenblocks-button-basic-bg-image.default {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-base-color-pc, transparent);
        background-image: var(--background-image-pc, none);
        background-position: var(--background-position-pc, center);
        background-size: var(--background-size-pc, cover);
        background-repeat: var(--background-repeat-pc, no-repeat);
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
        transition: all var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
      }

      // 背景パターンレイヤー - デフォルト状態（CSS変数切り替え方式）
      // パターンTYPEは固定、color/size/opacity/rotateはホバー時に変更可能
      .wp-block-zenblocks-button-basic-bg-pattern.default {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        overflow: hidden;
        border-radius: inherit;
        opacity: var(--background-pattern-opacity-pc, 0.5);
        transform: rotate(var(--background-pattern-rotate-pc, 0deg));
        transition:
          opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms),
          transform var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms),
          background-size var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);

        @include background-pattern-styles(pc, var(--background-pattern-color-pc, #000), var(--background-pattern-size-pc, 10px));
      }

      // 内部構造用のコンテナ
      .button-basic-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
      }

      // テキストコンテンツ
      .button-content {
        position: relative;
        z-index: 10;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      // テキストを最前面に表示
      .button-basic-text {
        position: relative;
        z-index: 10;
        display: block;
      }

      // ホバー時のスタイル
      &:hover {
        color: var(--text-color-hover, inherit);
        text-shadow: var(--text-shadow-hover, none);
        text-decoration: none;
        border-width: var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0));
        border-style: var(--styling-border-style-pc-hover, var(--styling-border-style-pc, solid));
        border-color: var(--styling-border-color-pc-hover, var(--styling-border-color-pc, transparent));
        // 外側の角丸 = 設定値 + ボーダー幅
        // Keep nested fallback outside calc() because postcss-calc cannot parse deep var() chains.
        --zenblocks-radius-top-left-hover: var(--styling-radius-top-left-pc-hover, var(--styling-radius-top-left-pc, var(--styling-radius-pc-hover, var(--styling-radius-pc, 0px))));
        --zenblocks-radius-top-right-hover: var(--styling-radius-top-right-pc-hover, var(--styling-radius-top-right-pc, var(--styling-radius-pc-hover, var(--styling-radius-pc, 0px))));
        --zenblocks-radius-bottom-right-hover: var(--styling-radius-bottom-right-pc-hover, var(--styling-radius-bottom-right-pc, var(--styling-radius-pc-hover, var(--styling-radius-pc, 0px))));
        --zenblocks-radius-bottom-left-hover: var(--styling-radius-bottom-left-pc-hover, var(--styling-radius-bottom-left-pc, var(--styling-radius-pc-hover, var(--styling-radius-pc, 0px))));
        border-top-left-radius: calc(var(--zenblocks-radius-top-left-hover) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)));
        border-top-right-radius: calc(var(--zenblocks-radius-top-right-hover) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)));
        border-bottom-right-radius: calc(var(--zenblocks-radius-bottom-right-hover) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)));
        border-bottom-left-radius: calc(var(--zenblocks-radius-bottom-left-hover) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)));
        box-shadow: var(--styling-shadow-pc-hover, var(--styling-shadow-pc, none));
        opacity: var(--styling-opacity-pc-hover, var(--styling-opacity-pc, 1));
        mix-blend-mode: var(--styling-mix-blend-mode-pc-hover, var(--styling-mix-blend-mode-pc, normal));

        &::after {
          box-shadow: var(--styling-inner-shadow-pc-hover, var(--styling-inner-shadow-pc, none));
        }

        // Background Overlay - crossfade (hide default, show hover)
        .wp-block-zenblocks-button-basic-bg-overlay.default {
          opacity: 0;
        }
        .wp-block-zenblocks-button-basic-bg-overlay.hover {
          opacity: var(--background-color-opacity-pc-hover, var(--background-color-opacity-pc, 1));
        }
        // Background Image - hover (background-color/position/size/repeat 変更)
        .wp-block-zenblocks-button-basic-bg-image.default {
          background-color: var(--background-base-color-pc-hover, var(--background-base-color-pc, transparent));
          background-position: var(--background-position-pc-hover, var(--background-position-pc, center));
          background-size: var(--background-size-pc-hover, var(--background-size-pc, cover));
          background-repeat: var(--background-repeat-pc-hover, var(--background-repeat-pc, no-repeat));
        }
        // Background Pattern - CSS variable switching (opacity/rotate change on hover)
        .wp-block-zenblocks-button-basic-bg-pattern.default {
          opacity: var(--background-pattern-opacity-pc-hover, var(--background-pattern-opacity-pc, 0.5));
          transform: rotate(var(--background-pattern-rotate-pc-hover, var(--background-pattern-rotate-pc, 0deg)));
        }

        .button-basic-text,
        .button-content * {
          color: var(--text-color-hover, inherit) !important;
          text-shadow: var(--text-shadow-hover, none) !important;
        }

        .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%)));
          // Set hover color for currentColor inheritance
          color: var(--icon-color-pc-hover, var(--icon-color-pc, currentColor)) !important;

          // .default/.hover の opacity/visibility 切り替えは
          // アニメーションクラスの有無で別ブロックで制御（下部参照）

          svg {
            stroke-width: var(--icon-stroke-width-hover, var(--icon-stroke-width, 1.75));
          }
        }
      }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    div:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
    p:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
    span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]) {
      margin: 0;
    }

    // components-dropdownによるズレを修正
    .components-dropdown {
      // position: relative;
      // z-index: 1;
      position: absolute;
      z-index: 1;
    }

    // テキスト選択時のツールバー位置調整
    .block-editor-rich-text__editable {
      position: relative;
    }

    // アイコン付きボタンのスタイル（編集画面用）
    &.has-icon {
      .button-content {
        display: flex;
        align-items: center;
        gap: var(--icon-gap-pc, 0.5em);
        flex-direction: row;
        width: 100%;
      }
    }

    // アイコンスタイル（編集画面用）
    .wp-block-zenblocks-button-basic-icon {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      width: var(--icon-size-pc, 25px);
      height: var(--icon-size-pc, 25px);
      position: absolute;
      z-index: 999;
      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%));
      // Set color for currentColor inheritance in SVGs
      color: var(--icon-color-pc, currentColor);
      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),
        color var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms);

      // .default と .hover のスタイルは > a, > button 内で定義済み（詳細度確保のため）

      svg {
        width: 100%;
        height: 100%;
        stroke-width: var(--icon-stroke-width, 1.75);
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }

    // サムネイルスタイル（編集画面用）- CSS Variable Switching Method
    // Uses CSS variable switching for hover states (same as background pattern)
    // セレクタパスは .wp-block-zenblocks-button-basic-thumbnail を含む必要がある
    > a,
    > button {
      // Thumbnail container (frame properties transition)
      .wp-block-zenblocks-button-basic-thumbnail {
        transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);

        // Thumbnail Overlay - Default State (CSS variable switching for hover)
        .wp-block-zenblocks-button-basic-thumbnail-overlay.default {
          background: var(--thumbnail-color-pc, transparent);
          opacity: var(--thumbnail-color-opacity-pc, 1);
          mix-blend-mode: var(--thumbnail-color-blend-mode-pc, normal);
          transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);
        }

        // Thumbnail Image - Default State (CSS variable switching for hover)
        .wp-block-zenblocks-button-basic-thumbnail-image.default {
          background-color: var(--thumbnail-image-base-color-pc, transparent);
          background-repeat: var(--thumbnail-repeat-pc, no-repeat);
          background-image: var(--thumbnail-image-pc, none);
          background-position: var(--thumbnail-position-pc, 50% 50%);
          background-size: var(--thumbnail-size-pc, cover);
          transform: rotate(var(--thumbnail-rotate-pc, 0deg));
          transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);
        }
      }

      // Hover: CSS variable switching (change values on .default elements)
      &:hover {
        // Frame properties transition
        .wp-block-zenblocks-button-basic-thumbnail {
          width: var(--thumbnail-frame-width-pc-hover, var(--thumbnail-frame-width-pc, 60px));
          height: var(--thumbnail-frame-height-pc-hover, var(--thumbnail-frame-height-pc, 60px));
          border-radius: var(--thumbnail-radius-pc-hover, var(--thumbnail-radius-pc, 0));
          left: var(--thumbnail-offset-x-pc-hover, var(--thumbnail-offset-x-pc, 0));
          top: var(--thumbnail-offset-y-pc-hover, var(--thumbnail-offset-y-pc, 0));

          // Thumbnail Overlay - hover (CSS variable switching)
          .wp-block-zenblocks-button-basic-thumbnail-overlay.default {
            background: var(--thumbnail-color-pc-hover, var(--thumbnail-color-pc, transparent)) !important;
            opacity: var(--thumbnail-color-opacity-pc-hover, var(--thumbnail-color-opacity-pc, 1)) !important;
            mix-blend-mode: var(--thumbnail-color-blend-mode-pc-hover, var(--thumbnail-color-blend-mode-pc, normal)) !important;
          }

          // Thumbnail Image - hover (CSS variable switching)
          .wp-block-zenblocks-button-basic-thumbnail-image.default {
            background-color: var(--thumbnail-image-base-color-pc-hover, var(--thumbnail-image-base-color-pc, transparent)) !important;
            background-repeat: var(--thumbnail-repeat-pc-hover, var(--thumbnail-repeat-pc, no-repeat)) !important;
            background-position: var(--thumbnail-position-pc-hover, var(--thumbnail-position-pc, 50% 50%)) !important;
            background-size: var(--thumbnail-size-pc-hover, var(--thumbnail-size-pc, cover)) !important;
            transform: rotate(var(--thumbnail-rotate-pc-hover, var(--thumbnail-rotate-pc, 0deg))) !important;
          }
        }
      }
    }

    // プレビューモード切り替え中はトランジションを無効化
    &.is-switching-preview {
      *,
      *::before,
      *::after {
        transition: none !important;
      }
    }
  }
}

// アイコンアニメーションが「none」の場合、--icon-transition-*変数を使用
// _icon_animation.scssの"none"は--icon-animation-*変数を使用しているため上書き
.editor-styles-wrapper .button-basic.button-basic.button-basic.zenblocks-button-hover-animation-icon-none {
  > a,
  > button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        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) !important;
      }

      > .hover {
        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) !important;
      }
    }
  }
}

// アイコンアニメーションクラスがない場合（通常はない）
// セレクタを3重にして_icon.scssより高い詳細度を確保
.editor-styles-wrapper .button-basic.button-basic.button-basic:not([class*="zenblocks-button-hover-animation-icon-"]) {
  > a,
  > button {
    .wp-block-zenblocks-button-basic-icon {
      > .default {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        color: var(--icon-color-pc, currentColor);
        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) !important;
      }

      > .hover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        color: var(--icon-color-pc-hover, var(--icon-color-pc, currentColor));
        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) !important;
      }
    }

    &:hover {
      .wp-block-zenblocks-button-basic-icon {
        > .default {
          opacity: 0 !important;
          visibility: hidden !important;
        }
        > .hover {
          opacity: 1 !important;
          visibility: visible !important;
        }
      }
    }
  }
}

// Root Tabs のスタイルをインポート（プラグインでは不要）
// @import "../../../../assets/scripts/css/root-tabs";

.state-button-group {
  .components-button {
    height: 36px;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;

    &.is-primary {
      background: #1e1e1e;
      border-color: #1e1e1e;
      color: #fff;
    }

    &.is-secondary {
      background: #fff;
      border-color: #ddd;
      color: #1e1e1e;

      &:hover {
        background: #f0f0f0;
        border-color: #999;
      }
    }
  }
}

// ブロックエディタ内のレイアウトスタイル（PC）
.block-editor-block-list__block.wp-block-zenblocks-button-basic,
.is-layout-constrained > .block-editor-block-list__block.wp-block-zenblocks-button-basic,
:where(.editor-styles-wrapper) .is-layout-constrained > :where(.block-editor-block-list__block.wp-block-zenblocks-button-basic) {
  @include editor-layout-pc;
}

// モバイルプレビュー時のスタイル
.is-mobile-preview,
.block-editor-block-preview__container.is-mobile {
  .editor-styles-wrapper .button-basic,
  .block-editor-block-list__block.wp-block-zenblocks-button-basic,
  .is-layout-constrained > .block-editor-block-list__block.wp-block-zenblocks-button-basic,
  :where(.editor-styles-wrapper) .is-layout-constrained > :where(.block-editor-block-list__block.wp-block-zenblocks-button-basic) {
    @include editor-layout-sp;
  }
}

// ボタンパターンセレクターのスタイル
.button-pattern-selector {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0;
  padding-top: 30px;
  max-height: 800px;
  overflow-y: auto;

  .button-pattern-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }

  .pattern-preview-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  .pattern-id-label {
    flex-shrink: 0;
    width: 20px;
    font-size: 10px;
    line-height: 1;
    color: #999;
    text-align: right;
    pointer-events: none;
  }

  .wp-block-zenblocks-button-basic {
    position: relative;
    display: inline-block;
    margin: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    // CSS変数によるマージンも無効化
    --spacing-margin-top-pc: 0;
    --spacing-margin-right-pc: 0;
    --spacing-margin-bottom-pc: 0;
    --spacing-margin-left-pc: 0;

    a {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      width: var(--layout-width-pc);
      height: var(--layout-height-pc);
      min-width: var(--layout-width-min-pc);
      min-height: var(--layout-height-min-pc);
      max-width: var(--layout-width-max-pc, none);
      max-height: var(--layout-height-max-pc);

      // パディング
      padding-top: var(--spacing-padding-top-pc);
      padding-right: var(--spacing-padding-right-pc);
      padding-bottom: var(--spacing-padding-bottom-pc);
      padding-left: var(--spacing-padding-left-pc);

      // フォント
      font-size: var(--font-size-pc);
      font-weight: var(--font-weight-pc);
      font-family: var(--font-family);
      line-height: var(--line-height-pc);
      letter-spacing: var(--letter-spacing-pc);

      // ボーダー
      border-width: var(--styling-border-width-pc, 0);
      border-style: var(--styling-border-style-pc, solid);
      border-color: var(--styling-border-color-pc, transparent);

      // 角丸（個別設定に対応）
      border-top-left-radius: var(--styling-radius-top-left-pc, var(--styling-radius-pc, 0));
      border-top-right-radius: var(--styling-radius-top-right-pc, var(--styling-radius-pc, 0));
      border-bottom-right-radius: var(--styling-radius-bottom-right-pc, var(--styling-radius-pc, 0));
      border-bottom-left-radius: var(--styling-radius-bottom-left-pc, var(--styling-radius-pc, 0));

      // シャドウ
      box-shadow: var(--styling-shadow-pc);

      // 透明度
      opacity: var(--styling-opacity-pc);

      // ブレンドモード
      mix-blend-mode: var(--styling-mix-blend-mode-pc);
    }

    .button-basic-inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }

    .wp-block-zenblocks-button-basic-bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: var(--background-color-pc, none);
      background-color: transparent;
      opacity: var(--background-color-opacity-pc, 1);
      mix-blend-mode: var(--background-color-mix-blend-mode-pc, normal);
      z-index: 2;
    }

    .wp-block-zenblocks-button-basic-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: var(--background-image-pc);
      background-position: var(--background-position-pc);
      background-size: var(--background-size-pc);
      background-repeat: var(--background-repeat-pc);
      z-index: 1;
    }

    .wp-block-zenblocks-button-basic-bg-pattern {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
      opacity: var(--background-pattern-opacity-pc, 0.5);
      transform: rotate(var(--background-pattern-rotate-pc, 0deg));

      &[data-pattern-pc="dots"] {
        background-image: radial-gradient(circle, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="lines"] {
        background-image: linear-gradient(90deg, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) 100%;
      }

      &[data-pattern-pc="diagonal"] {
        background-image: linear-gradient(45deg, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="grid"] {
        background-image: linear-gradient(var(--background-pattern-color-pc, #000) 1px, transparent 1px), linear-gradient(90deg, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="cross-lines"] {
        background-image: linear-gradient(45deg, var(--background-pattern-color-pc, #000) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }
    }

    .button-content {
      position: relative;
      z-index: 10;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      gap: var(--icon-gap-pc, 0.5em);
    }

    .button-basic-text {
      position: relative;
      z-index: 10;
      display: block;
    }

    .wp-block-zenblocks-button-basic-icon {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      width: var(--icon-size-pc, 25px);
      height: var(--icon-size-pc, 25px);
      position: absolute;
      z-index: 999;
      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%));
      // Set color for currentColor inheritance in SVGs
      color: var(--icon-color-pc, currentColor);

      svg {
        width: 100%;
        height: 100%;
        stroke-width: var(--icon-stroke-width, 1.75);
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }
  }
}

// 表示設定：非表示状態の視覚的インジケーター（エディター専用）
// ブロック選択時のみ表示（編集中に邪魔にならないようにする）
.editor-styles-wrapper .wp-block-zenblocks-button-basic,
.block-editor-block-list__block.wp-block-zenblocks-button-basic {
  &.is-selected {
    &.zenblocks-hidden-pc,
    &.zenblocks-hidden-md,
    &.zenblocks-hidden-tb,
    &.zenblocks-hidden-sp {
      position: relative;
      opacity: 0.5;
      outline: 2px dashed #cc0000;
      outline-offset: 2px;

      &::before {
        content: "";
        position: absolute;
        top: -24px;
        left: 0;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        background: #cc0000;
        border-radius: 3px;
        z-index: 100;
        white-space: nowrap;
      }
    }

    // 単一ブレークポイント非表示
    &.zenblocks-hidden-pc::before {
      content: "PC非表示";
    }

    &.zenblocks-hidden-md::before {
      content: "MD非表示";
    }

    &.zenblocks-hidden-tb::before {
      content: "TB非表示";
    }

    &.zenblocks-hidden-sp::before {
      content: "SP非表示";
    }

    // 2ブレークポイント非表示
    &.zenblocks-hidden-pc.zenblocks-hidden-md::before {
      content: "PC・MD非表示";
    }

    &.zenblocks-hidden-pc.zenblocks-hidden-tb::before {
      content: "PC・TB非表示";
    }

    &.zenblocks-hidden-pc.zenblocks-hidden-sp::before {
      content: "PC・SP非表示";
    }

    &.zenblocks-hidden-md.zenblocks-hidden-tb::before {
      content: "MD・TB非表示";
    }

    &.zenblocks-hidden-md.zenblocks-hidden-sp::before {
      content: "MD・SP非表示";
    }

    &.zenblocks-hidden-tb.zenblocks-hidden-sp::before {
      content: "TB・SP非表示";
    }

    // 3ブレークポイント非表示
    &.zenblocks-hidden-pc.zenblocks-hidden-md.zenblocks-hidden-tb::before {
      content: "PC・MD・TB非表示";
    }

    &.zenblocks-hidden-pc.zenblocks-hidden-md.zenblocks-hidden-sp::before {
      content: "PC・MD・SP非表示";
    }

    &.zenblocks-hidden-pc.zenblocks-hidden-tb.zenblocks-hidden-sp::before {
      content: "PC・TB・SP非表示";
    }

    &.zenblocks-hidden-md.zenblocks-hidden-tb.zenblocks-hidden-sp::before {
      content: "MD・TB・SP非表示";
    }

    // 全デバイス非表示
    &.zenblocks-hidden-pc.zenblocks-hidden-md.zenblocks-hidden-tb.zenblocks-hidden-sp::before {
      content: "全デバイス非表示";
    }
  }
}

// マイクロコピー用スペーシングコントロールのスタイル
.zenblocks-microcopy-spacing-controls {
  .spacing-margin-control {
    margin-bottom: 16px;

    .components-base-control {
      padding-top: 0 !important;
      margin-bottom: 0.5em !important;
    }

    .components-base-control .components-base-control {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  .spacing-margin-label {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .spacing-margin-controls {
    display: flex;
    align-items: flex-start;

    .components-range-control {
      flex: 1;
    }

    .unit-select {
      flex: 0 0 70px;
      margin-left: 8px;
    }

    .auto-margin-indicator {
      background-color: #f0f0f0;
      padding: 8px 12px;
      border-radius: 4px;
      margin-right: 10px;
      flex: 1;

      p {
        margin: 0;
        font-style: italic;
      }
    }

    .unit-label {
      flex: 0 0 auto;
      margin-left: 8px;
      font-size: 12px;
      color: #757575;
      line-height: 40px;
    }
  }
}

// サブパネルを持たないLevel-2パネルのスタイル調整
.zenblocks-panel--no-subpanel.components-panel__body {
  > .components-panel__body-title {
    margin-bottom: 0 !important;
  }

  > div:not(.components-panel__body-title) {
    padding: 16px 0;

    [class*="-title"] {
      margin-bottom: 0 !important;
    }
  }
}

// Thumbnail/Band の Level-2 サブパネルはドット背景を無効化
// （Media Type タブ追加後も見出しの視認性を優先）
.zenblocks-panel--thumbnail .zenblocks-panel--level-2.components-panel__body > .components-panel__body-title,
.zenblocks-panel--band .zenblocks-panel--level-2.components-panel__body > .components-panel__body-title {
  background-image: none !important;
}

.zenblocks-buttonbasic-doc-link-wrap {
  margin: -10px 0 16px 52px;
  display: flex;
}

.zenblocks-buttonbasic-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #007cba;
  text-decoration: underline;
}

.zenblocks-buttonbasic-doc-link:hover {
  color: #005a87;
}

.zenblocks-buttonbasic-doc-link-icon {
  flex: 0 0 auto;
}

// ツールバードロップダウンメニュー内のボタンスタイル
.components-dropdown-menu__menu {
  .components-button.has-icon.has-text {
    gap: 10px;
  }
}

// フォントファミリー・フォントウェイト選択リスト
.zenblocks-font-family-list,
.zenblocks-font-weight-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 205px;
  overflow-y: auto;
  padding: 4px 0;
}

.zenblocks-font-family-item,
.zenblocks-font-weight-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  transition: all 0.15s ease;

  &:hover {
    background: #f6f7f7;
    border-color: #c3c4c7;
  }

  &.is-selected {
    background: #f0f6fc;
    border-color: #2669e6;

    .zenblocks-font-family-item__preview,
    .zenblocks-font-weight-item__label {
      color: #1e1e1e;
    }
  }

  &.is-unavailable {
    .zenblocks-font-weight-item__label {
      color: #949494;
    }

    &:hover {
      background: #fafafa;
    }
  }

  &__preview,
  &__label {
    flex: 1;
    color: #1e1e1e;
    line-height: 1.4;
  }

  &__check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #2669e6;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  &__unavailable {
    flex-shrink: 0;
    font-size: 11px;
    color: #949494;
    margin-left: 8px;
  }
}

// フォントウェイトセクション（フォントファミリー内）
.zenblocks-font-weight-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.zenblocks-font-weight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;

  &__label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: #1e1e1e;
  }

  &__hint {
    font-size: 11px;
    color: #757575;
  }
}

.zenblocks-font-weight-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.zenblocks-font-weight-button {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s ease;

  &:hover {
    background: #f6f7f7;
    border-color: #c3c4c7;
  }

  &.is-selected {
    background: #2669e6;
    border-color: #2669e6;
    color: #fff;
  }

  &.is-unavailable {
    color: #b0b0b0;
    background: #f9f9f9;
    border-color: #e8e8e8;

    &:hover {
      background: #f5f5f5;
      border-color: #ddd;
    }

    &.is-selected {
      background: #8a9be6;
      border-color: #8a9be6;
      color: #fff;
    }
  }
}

// フォントサイズ選択リスト
.zenblocks-font-size-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

.zenblocks-font-size-section {
  &__title {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #757575;
    margin-bottom: 6px;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}

.zenblocks-font-size-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;

  &:hover {
    background: #f6f7f7;
    border-color: #c3c4c7;
  }

  &.is-selected {
    background: #f0f6fc;
    border-color: #2669e6;
  }

  &__name {
    flex: 1;
    font-size: 10px;
    color: #2d2d2d;
    line-height: 1.4;
  }

  &__size-info {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
  }

  &__value {
    font-size: 13px;
    font-weight: bold;
    color: #1e1e1e;
  }

  &__separator {
    font-size: 12px;
    color: #999;
  }

  &__check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #2669e6;
    margin-left: 8px;

    svg {
      width: 20px;
      height: 20px;
    }
  }
}

// ボタン設定ドロップダウンの最後のメニュー項目（ホバースタイル同期）
.zenblocks-button-settings-popover .zenblocks-sync-hover-style {
  background-color: rgba(0, 0, 0, 0.04);
}

// ボタン設定ドロップダウンのメニュー項目（同期ボタン付き）
.zenblocks-button-settings-popover {
  .zenblocks-button-settings-menu {
    padding: 0;
  }

  .zenblocks-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;

    svg {
      width: 24px;
      height: 24px;
    }
  }

  .zenblocks-menu-item-with-sync {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;

    .components-menu-item__button {
      flex: 1;
      padding-right: 36px;

      &:focus {
        box-shadow: none;
        outline: none;
      }

      &:focus-visible {
        box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
      }
    }
  }

  .zenblocks-toolbar-sync-button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    min-width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #757575;
    background: transparent;
    border: none;
    cursor: pointer;
    transition:
      color 0.15s,
      background-color 0.15s;

    &:hover {
      color: #1e1e1e;
      background-color: rgba(0, 0, 0, 0.08);
    }

    &:focus {
      box-shadow: none;
      outline: none;
    }

    &:focus-visible {
      box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
    }

    svg {
      width: 18px;
      height: 18px;
    }
  }
}

// パターン保存モーダルのz-index（ツールバードロップダウンより上に表示）
.zenblocks-save-pattern-modal {
  z-index: 1000001 !important;
}

// モーダルのオーバーレイも高いz-indexに
.zenblocks-save-pattern-modal-overlay {
  z-index: 1000000 !important;
}

// グラデーショントランジション制限の注意書き
.zenblocks-gradient-notice {
  margin-top: 12px;
  margin-bottom: 0;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
}

// Toolbar Hover Preview (force hover visual in editor)
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a:hover,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a:hover,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button:hover,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button:hover {
  border-width: var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0)) !important;
  border-style: var(--styling-border-style-pc-hover, var(--styling-border-style-pc, solid)) !important;
  border-color: var(--styling-border-color-pc-hover, var(--styling-border-color-pc, transparent)) !important;
  box-shadow: var(--styling-shadow-pc-hover, var(--styling-shadow-pc, none)) !important;
  opacity: var(--styling-opacity-pc-hover, var(--styling-opacity-pc, 1)) !important;
  mix-blend-mode: var(--styling-mix-blend-mode-pc-hover, var(--styling-mix-blend-mode-pc, normal)) !important;
}

.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a .wp-block-zenblocks-button-basic-bg-overlay.default,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a .wp-block-zenblocks-button-basic-bg-overlay.default,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button .wp-block-zenblocks-button-basic-bg-overlay.default,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button .wp-block-zenblocks-button-basic-bg-overlay.default {
  opacity: 0 !important;
}

.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a .wp-block-zenblocks-button-basic-bg-overlay.hover,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a .wp-block-zenblocks-button-basic-bg-overlay.hover,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button .wp-block-zenblocks-button-basic-bg-overlay.hover,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button .wp-block-zenblocks-button-basic-bg-overlay.hover {
  opacity: var(--background-color-opacity-pc-hover, var(--background-color-opacity-pc, 1)) !important;
}

.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a .wp-block-zenblocks-button-basic-bg-image.default,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > a .wp-block-zenblocks-button-basic-bg-image.default,
.editor-styles-wrapper .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button .wp-block-zenblocks-button-basic-bg-image.default,
.wp-block-editor .wp-block-zenblocks-button-basic.button-basic.is-hover-preview > button .wp-block-zenblocks-button-basic-bg-image.default {
  background-color: var(--background-base-color-pc-hover, var(--background-base-color-pc, transparent)) !important;
  background-image: var(--background-image-pc-hover, var(--background-image-pc, none)) !important;
  background-position: var(--background-position-pc-hover, var(--background-position-pc, center)) !important;
  background-size: var(--background-size-pc-hover, var(--background-size-pc, cover)) !important;
  background-repeat: var(--background-repeat-pc-hover, var(--background-repeat-pc, no-repeat)) !important;
}

// ─── Free Preview Mode ───────────────────────────────────────
// Mirrors PHP sanitize_button_block_output_for_free() to show
// how the block looks without Pro features.

.wp-block-zenblocks-button-basic.button-basic.is-free-preview {
  // Hide Pro-only elements
  .wp-block-zenblocks-button-basic-thumbnail,
  .wp-block-zenblocks-button-basic-band,
  .wp-block-zenblocks-button-basic-bg-movie,
  .wp-block-zenblocks-button-basic-bg-poster,
  .wp-block-zenblocks-button-basic-text-micro,
  .wp-block-zenblocks-button-basic-text-sub {
    display: none !important;
  }

  // Disable all Pro animations
  &[class*="zenblocks-button-hover-animation-icon-"],
  &[class*="zenblocks-button-hover-animation-text-"],
  &[class*="zenblocks-button-frame-animation-"],
  &[class*="zenblocks-button-animation-"] {
    > a,
    > button {
      animation: none !important;

      .wp-block-zenblocks-button-basic-text,
      .wp-block-zenblocks-button-basic-icon {
        animation: none !important;
        transition: none !important;
      }
    }
  }

  // Visual indicator: dashed outline
  outline: 2px dashed #2196f3 !important;
  outline-offset: 3px;
}

// Toolbar PRO badge
.zenblocks-toolbar-pro-badge.components-button {
  position: relative;

  &::after {
    content: "PRO";
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #d84315;
    padding: 2px 3px;
    border-radius: 2px;
    letter-spacing: 0.3px;
    pointer-events: none;
  }

  &.is-pressed {
    color: #fff;
    background: #1e1e1e;
  }
}