// ------------------------------------------
// Thumbnail - Crossfade Method
// Uses two overlay elements (.default + .hover) with opacity crossfade
// for smooth gradient-to-gradient transitions without white flash
// Selector specificity matches PHP generated CSS
// Default: 2x selector, Hover: 4x selector (CSS_ARCHITECTURE.md section 3.3)
// ------------------------------------------

// ==================================================
// Default State - 2x selector
// ==================================================
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  // Thumbnail container (frame properties transition)
  > a .wp-block-zenblocks-button-basic-thumbnail,
  > button .wp-block-zenblocks-button-basic-thumbnail {
    position: absolute;
    z-index: var(--layer-z-index-thumbnail, 10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    pointer-events: none;
    transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);
    width: var(--thumbnail-frame-width-pc, 60px);
    height: var(--thumbnail-frame-height-pc, 60px);
    border-radius: var(--thumbnail-radius-pc, 0);
    box-sizing: var(--thumbnail-box-sizing-pc, border-box);
    border-width: var(--thumbnail-border-width-pc, 0);
    border-style: var(--thumbnail-border-style-pc, none);
    border-color: var(--thumbnail-border-color-pc, transparent);
    left: var(--thumbnail-left-pc, 0);
    right: var(--thumbnail-right-pc, auto);
    top: var(--thumbnail-top-pc, 0);
    bottom: var(--thumbnail-bottom-pc, auto);
    transform: translateX(var(--thumbnail-transform-x-pc, 0)) translateY(var(--thumbnail-transform-y-pc, 0));
    opacity: var(--thumbnail-opacity-pc, 1);
    mix-blend-mode: var(--thumbnail-blend-mode-pc, normal);
  }

  // Thumbnail Overlay - Default State (Crossfade: visible by default, fades out on hover)
  // ホバー離脱時: 即座にフェードイン（遅延なし）
  > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default,
  > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: transparent;
    background-image: var(--thumbnail-color-pc, none);
    opacity: var(--thumbnail-color-opacity-pc, 1);
    mix-blend-mode: var(--thumbnail-color-blend-mode-pc, normal);
    transition: opacity var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);
  }

  // Thumbnail Overlay - Hover State (Crossfade: hidden by default, fades in on hover)
  // Uses fallback to normal color to prevent flash when hover color is not set
  // ホバー離脱時: .default が先にフェードインするよう遅延付きでフェードアウト
  > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover,
  > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: transparent;
    background-image: var(--thumbnail-color-pc-hover, var(--thumbnail-color-pc, none));
    opacity: 0;
    mix-blend-mode: var(--thumbnail-color-blend-mode-pc-hover, var(--thumbnail-color-blend-mode-pc, normal));
    transition: opacity var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) calc(var(--thumbnail-transition-delay, 0ms) + var(--thumbnail-transition-duration, 300ms) * 0.5);
  }

  // Thumbnail Image - Default State (CSS variable switching for hover)
  > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default,
  > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    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) !important;
  }
}

// ==================================================
// Hover State - 4x selector
// ==================================================
.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic {
  > a:hover,
  > button: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));
      box-sizing: var(--thumbnail-box-sizing-pc-hover, var(--thumbnail-box-sizing-pc, border-box));
      border-width: var(--thumbnail-border-width-pc-hover, var(--thumbnail-border-width-pc, 0));
      border-style: var(--thumbnail-border-style-pc-hover, var(--thumbnail-border-style-pc, none));
      border-color: var(--thumbnail-border-color-pc-hover, var(--thumbnail-border-color-pc, transparent));
      left: var(--thumbnail-left-pc-hover, var(--thumbnail-left-pc, 0));
      right: var(--thumbnail-right-pc-hover, var(--thumbnail-right-pc, auto));
      top: var(--thumbnail-top-pc-hover, var(--thumbnail-top-pc, 0));
      bottom: var(--thumbnail-bottom-pc-hover, var(--thumbnail-bottom-pc, auto));
      transform: translateX(var(--thumbnail-transform-x-pc-hover, var(--thumbnail-transform-x-pc, 0))) translateY(var(--thumbnail-transform-y-pc-hover, var(--thumbnail-transform-y-pc, 0)));
      opacity: var(--thumbnail-opacity-pc-hover, var(--thumbnail-opacity-pc, 1));
      mix-blend-mode: var(--thumbnail-blend-mode-pc-hover, var(--thumbnail-blend-mode-pc, normal));
    }

    // Thumbnail Overlay - 遅延クロスフェード（白フラッシュ防止）
    // ホバー進入時: .default は .hover が十分フェードインしてから遅延フェードアウト
    .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {
      opacity: 0 !important;
      transition-delay: calc(var(--thumbnail-transition-delay, 0ms) + var(--thumbnail-transition-duration, 300ms) * 0.5) !important;
    }
    // ホバー進入時: .hover は即座にフェードイン（遅延なし）
    .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {
      opacity: var(--thumbnail-color-opacity-pc-hover, var(--thumbnail-color-opacity-pc, 1)) !important;
      transition-delay: var(--thumbnail-transition-delay, 0ms) !important;
    }

    // Thumbnail Image - hover (CSS variable switching)
    .wp-block-zenblocks-button-basic-thumbnail .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;
    }
  }
}

// ==================================================
// Editor Hover Preview State - 4x selector + .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,
  > a:hover,
  > button: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));
      box-sizing: var(--thumbnail-box-sizing-pc-hover, var(--thumbnail-box-sizing-pc, border-box));
      border-width: var(--thumbnail-border-width-pc-hover, var(--thumbnail-border-width-pc, 0));
      border-style: var(--thumbnail-border-style-pc-hover, var(--thumbnail-border-style-pc, none));
      border-color: var(--thumbnail-border-color-pc-hover, var(--thumbnail-border-color-pc, transparent));
      left: var(--thumbnail-left-pc-hover, var(--thumbnail-left-pc, 0));
      right: var(--thumbnail-right-pc-hover, var(--thumbnail-right-pc, auto));
      top: var(--thumbnail-top-pc-hover, var(--thumbnail-top-pc, 0));
      bottom: var(--thumbnail-bottom-pc-hover, var(--thumbnail-bottom-pc, auto));
      transform: translateX(var(--thumbnail-transform-x-pc-hover, var(--thumbnail-transform-x-pc, 0))) translateY(var(--thumbnail-transform-y-pc-hover, var(--thumbnail-transform-y-pc, 0)));
      opacity: var(--thumbnail-opacity-pc-hover, var(--thumbnail-opacity-pc, 1)) !important;
      mix-blend-mode: var(--thumbnail-blend-mode-pc-hover, var(--thumbnail-blend-mode-pc, normal)) !important;
    }

    // Thumbnail Overlay - 遅延クロスフェード（白フラッシュ防止）
    .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {
      opacity: 0 !important;
      transition-delay: calc(var(--thumbnail-transition-delay, 0ms) + var(--thumbnail-transition-duration, 300ms) * 0.5) !important;
    }
    .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {
      opacity: var(--thumbnail-color-opacity-pc-hover, var(--thumbnail-color-opacity-pc, 1)) !important;
      transition-delay: var(--thumbnail-transition-delay, 0ms) !important;
    }

    // Thumbnail Image - hover (CSS variable switching)
    .wp-block-zenblocks-button-basic-thumbnail .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;
    }
  }
}

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

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

  .wp-block-zenblocks-button-basic-thumbnail-poster {
    background-repeat: no-repeat;
  }

  .wp-block-zenblocks-button-basic-thumbnail-movie video,
  .wp-block-zenblocks-button-basic-thumbnail-movie iframe {
    display: block;
    pointer-events: none;
  }
}