// ------------------------------------------
// Background Styles
// Uses crossfade (opacity transition) for smooth hover transitions
// Selector specificity matches PHP generated CSS
// ------------------------------------------

.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  // Background Overlay - Default State (オーバーレイとして最前面)
  // Crossfade method: .default fades out, .hover fades in
  > a .wp-block-zenblocks-button-basic-bg-overlay.default,
  > button .wp-block-zenblocks-button-basic-bg-overlay.default {
    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);
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;
    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
  }

  // Background Overlay - Hover State (initially hidden)
  // Uses fallback to normal overlay to prevent white flash when hover overlay is not set
  // ホバー離脱時: .default が先にフェードインするよう遅延付きでフェードアウト
  > a .wp-block-zenblocks-button-basic-bg-overlay.hover,
  > button .wp-block-zenblocks-button-basic-bg-overlay.hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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));
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;
    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) calc(var(--background-transition-delay, 0ms) + var(--background-transition-duration, 150ms) * 0.5);
  }

  // Background Base Color - Default State (independent layer for color/gradient)
  // Note: CSS gradient transitions are not supported by browsers - only solid colors will transition smoothly
  > a .wp-block-zenblocks-button-basic-bg-base-color.default,
  > button .wp-block-zenblocks-button-basic-bg-base-color.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-base-color-pc, transparent);
    background-image: var(--background-base-gradient-pc, none);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    transition: background-color var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
  }

  // Background Image - Default State
  > a .wp-block-zenblocks-button-basic-bg-image.default,
  > button .wp-block-zenblocks-button-basic-bg-image.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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);
    transform: rotate(var(--background-rotate-pc, 0deg));
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    transition: all var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
  }

  > a .wp-block-zenblocks-button-basic-bg-movie.default,
  > button .wp-block-zenblocks-button-basic-bg-movie.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    overflow: hidden;

    video {
      width: var(--background-video-width, 100%);
      height: var(--background-video-height, 100%);
      object-fit: var(--background-video-fit, cover);
      object-position: var(--background-video-position-x, 50%) var(--background-video-position-y, 50%);
      display: block;
    }

    iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--background-video-embed-width, 177.78%);
      height: var(--background-video-embed-height, 177.78%);
      transform: translate(
        calc(-50% + var(--background-video-offset-x, 0%)),
        calc(-50% + var(--background-video-offset-y, 0%))
      );
      border: 0;
      display: block;
      pointer-events: none;
    }
  }

  > a .wp-block-zenblocks-button-basic-bg-poster.default,
  > button .wp-block-zenblocks-button-basic-bg-poster.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background-video-poster-image, none);
    background-size: var(--background-poster-size, cover);
    background-position: var(--background-poster-position-x, 50%) var(--background-poster-position-y, 50%);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
  }

  // Background Pattern - Default State (CSS variable switching for hover)
  // Pattern TYPE is fixed, but color/size/opacity can change on hover
  > a .wp-block-zenblocks-button-basic-bg-pattern.default,
  > button .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);
    mix-blend-mode: var(--background-pattern-blend-mode-pc, normal);
    transition: opacity 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));
  }

}

// Hover styles use 4x selector for higher specificity
// Crossfade method for bg-overlay, CSS variable switching for bg-image and bg-pattern
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  > a:hover,
  > button:hover {
    // Background Overlay - 遅延クロスフェード（白フラッシュ防止）
    // ホバー進入時: .default は .hover が十分フェードインしてから遅延フェードアウト
    .wp-block-zenblocks-button-basic-bg-overlay.default {
      opacity: 0 !important;
      transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) calc(var(--background-transition-delay, 0ms) + var(--background-transition-duration, 150ms) * 0.5) !important;
    }
    // ホバー進入時: .hover は即座にフェードイン（遅延なし）
    .wp-block-zenblocks-button-basic-bg-overlay.hover {
      opacity: var(--background-color-opacity-pc-hover, var(--background-color-opacity-pc, 1)) !important;
      transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;
    }

    // Background Base Color - hover (color/gradient change)
    .wp-block-zenblocks-button-basic-bg-base-color.default {
      background-color: var(--background-base-color-pc-hover, var(--background-base-color-pc, transparent)) !important;
      background-image: var(--background-base-gradient-pc-hover, var(--background-base-gradient-pc, none)) !important;
    }

    // Background Image - hover (position/size/repeat 変更)
    .wp-block-zenblocks-button-basic-bg-image.default {
      // editor.scss では bg-image レイヤーにも base color が入るため、
      // ホバープレビュー時はこの色も hover 値へ明示的に切り替える。
      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;
      transform: rotate(var(--background-rotate-pc-hover, var(--background-rotate-pc, 0deg))) !important;
    }

    // Background Pattern - CSS variable switching (opacity 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)) !important;
    }
  }
}

// ==================================================
// Editor Hover Preview State - .is-hover-preview
// Shows hover styles when editing hover settings in Inspector
// ==================================================
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.is-hover-preview {
  > a,
  > button {
    // Background Overlay - 遅延クロスフェード（白フラッシュ防止）
    .wp-block-zenblocks-button-basic-bg-overlay.default {
      opacity: 0 !important;
      transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) calc(var(--background-transition-delay, 0ms) + var(--background-transition-duration, 150ms) * 0.5) !important;
    }
    .wp-block-zenblocks-button-basic-bg-overlay.hover {
      opacity: var(--background-color-opacity-pc-hover, var(--background-color-opacity-pc, 1)) !important;
      transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;
    }

    // Background Base Color - hover (color/gradient change)
    .wp-block-zenblocks-button-basic-bg-base-color.default {
      background-color: var(--background-base-color-pc-hover, var(--background-base-color-pc, transparent)) !important;
      background-image: var(--background-base-gradient-pc-hover, var(--background-base-gradient-pc, none)) !important;
    }

    // Background Image - hover (position/size/repeat 変更)
    .wp-block-zenblocks-button-basic-bg-image.default {
      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;
      transform: rotate(var(--background-rotate-pc-hover, var(--background-rotate-pc, 0deg))) !important;
    }

    // Background Pattern - CSS variable switching (opacity 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)) !important;
    }
  }
}

// Additional selector for elements that might be outside the doubled selector context
.wp-block-zenblocks-button-basic {
  // ホバー離脱時: .default は即座にフェードイン、.hover は遅延してフェードアウト
  .wp-block-zenblocks-button-basic-bg-overlay.default {
    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
  }
  .wp-block-zenblocks-button-basic-bg-overlay.hover {
    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) calc(var(--background-transition-delay, 0ms) + var(--background-transition-duration, 150ms) * 0.5);
  }
  .wp-block-zenblocks-button-basic-bg-image,
  .wp-block-zenblocks-button-basic-bg-poster,
  .wp-block-zenblocks-button-basic-bg-movie,
  .wp-block-zenblocks-button-basic-bg-pattern {
    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
  }
  // bg-base-color needs background-color transition, not opacity
  .wp-block-zenblocks-button-basic-bg-base-color {
    transition: background-color var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
  }
}

.wp-block-zenblocks-button-basic.is-bg-video {
  > a .wp-block-zenblocks-button-basic-bg-image.default,
  > button .wp-block-zenblocks-button-basic-bg-image.default {
    display: none;
  }
}