// ------------------------------------------
// Band (帯) - CSS Variable Switching Method
// Uses CSS variable switching for hover states (same as thumbnail)
// Positioned between text content and background
// 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 {
  // Band container (frame properties transition)
  > a .wp-block-zenblocks-button-basic-band,
  > button .wp-block-zenblocks-button-basic-band {
    position: absolute;
    z-index: var(--layer-z-index-band, 5); // Between content (higher) and background (lower)
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    pointer-events: none;
    transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);
    width: var(--band-frame-width-pc, 100%);
    height: var(--band-frame-height-pc, 100%);
    border-radius: var(--band-radius-pc, 0);
    box-sizing: var(--band-box-sizing-pc, border-box);
    border-width: var(--band-border-width-pc, 0);
    border-style: var(--band-border-style-pc, none);
    border-color: var(--band-border-color-pc, transparent);
    // Origin-based positioning (left/right and top/bottom)
    left: var(--band-left-pc, 0);
    right: var(--band-right-pc, auto);
    top: var(--band-top-pc, 0);
    bottom: var(--band-bottom-pc, auto);
    // Transform for center positioning
    transform: translateX(var(--band-transform-x-pc, 0)) translateY(var(--band-transform-y-pc, 0)) skewX(var(--band-skew-x-pc, 0deg)) skewY(var(--band-skew-y-pc, 0deg));
    // Band container opacity & blend mode
    opacity: var(--band-opacity-pc, 1);
    mix-blend-mode: var(--band-blend-mode-pc, normal);
  }

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

  // Band Color - 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-band .wp-block-zenblocks-button-basic-band-color.hover,
  > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: transparent;
    background-image: var(--band-color-pc-hover, var(--band-color-pc, none));
    opacity: 0;
    mix-blend-mode: var(--band-color-blend-mode-pc-hover, var(--band-color-blend-mode-pc, normal));
    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) calc(var(--band-transition-delay, 0ms) + var(--band-transition-duration, 300ms) * 0.5);
  }

  // Band Image - Default State (CSS variable switching for hover)
  > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default,
  > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    background-color: var(--band-image-base-color-pc, transparent);
    background-repeat: var(--band-repeat-pc, no-repeat), no-repeat;
    background-image: var(--band-image-pc, none), var(--band-base-gradient-pc, none);
    background-position: var(--band-position-pc, 50% 50%), center;
    background-size: var(--band-size-pc, cover), cover;
    transform: rotate(var(--band-rotate-pc, 0deg));
    opacity: var(--band-image-opacity-pc, 1);
    transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);
  }

  // Band Pattern - Default State (CSS variable switching for hover)
  > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default,
  > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3; // Above overlay (2) and image (1)
    overflow: hidden;
    border-radius: inherit;
    opacity: var(--band-pattern-opacity-pc, 0.5);
    mix-blend-mode: var(--band-pattern-blend-mode-pc, normal);
    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms),
                background-size var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);

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

// ==================================================
// 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-band {
      width: var(--band-frame-width-pc-hover, var(--band-frame-width-pc, 100%));
      height: var(--band-frame-height-pc-hover, var(--band-frame-height-pc, 100%));
      border-radius: var(--band-radius-pc-hover, var(--band-radius-pc, 0));
      box-sizing: var(--band-box-sizing-pc-hover, var(--band-box-sizing-pc, border-box));
      border-width: var(--band-border-width-pc-hover, var(--band-border-width-pc, 0));
      border-style: var(--band-border-style-pc-hover, var(--band-border-style-pc, none));
      border-color: var(--band-border-color-pc-hover, var(--band-border-color-pc, transparent));
      // Origin-based positioning for hover
      left: var(--band-left-pc-hover, var(--band-left-pc, 0));
      right: var(--band-right-pc-hover, var(--band-right-pc, auto));
      top: var(--band-top-pc-hover, var(--band-top-pc, 0));
      bottom: var(--band-bottom-pc-hover, var(--band-bottom-pc, auto));
      // Transform for center positioning
      transform: translateX(var(--band-transform-x-pc-hover, var(--band-transform-x-pc, 0))) translateY(var(--band-transform-y-pc-hover, var(--band-transform-y-pc, 0))) skewX(var(--band-skew-x-pc-hover, var(--band-skew-x-pc, 0deg))) skewY(var(--band-skew-y-pc-hover, var(--band-skew-y-pc, 0deg)));
      // Band container opacity & blend mode hover
      opacity: var(--band-opacity-pc-hover, var(--band-opacity-pc, 1));
      mix-blend-mode: var(--band-blend-mode-pc-hover, var(--band-blend-mode-pc, normal));
    }

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

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

    // Band Pattern - hover (CSS variable switching - opacity change on hover)
    .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default {
      opacity: var(--band-pattern-opacity-pc-hover, var(--band-pattern-opacity-pc, 0.5)) !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-band {
      width: var(--band-frame-width-pc-hover, var(--band-frame-width-pc, 100%));
      height: var(--band-frame-height-pc-hover, var(--band-frame-height-pc, 100%));
      border-radius: var(--band-radius-pc-hover, var(--band-radius-pc, 0));
      box-sizing: var(--band-box-sizing-pc-hover, var(--band-box-sizing-pc, border-box));
      border-width: var(--band-border-width-pc-hover, var(--band-border-width-pc, 0));
      border-style: var(--band-border-style-pc-hover, var(--band-border-style-pc, none));
      border-color: var(--band-border-color-pc-hover, var(--band-border-color-pc, transparent));
      // Origin-based positioning for hover
      left: var(--band-left-pc-hover, var(--band-left-pc, 0));
      right: var(--band-right-pc-hover, var(--band-right-pc, auto));
      top: var(--band-top-pc-hover, var(--band-top-pc, 0));
      bottom: var(--band-bottom-pc-hover, var(--band-bottom-pc, auto));
      // Transform for center positioning
      transform: translateX(var(--band-transform-x-pc-hover, var(--band-transform-x-pc, 0))) translateY(var(--band-transform-y-pc-hover, var(--band-transform-y-pc, 0))) skewX(var(--band-skew-x-pc-hover, var(--band-skew-x-pc, 0deg))) skewY(var(--band-skew-y-pc-hover, var(--band-skew-y-pc, 0deg)));
      // Band container opacity & blend mode hover
      opacity: var(--band-opacity-pc-hover, var(--band-opacity-pc, 1)) !important;
      mix-blend-mode: var(--band-blend-mode-pc-hover, var(--band-blend-mode-pc, normal)) !important;
    }

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

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

    // Band Pattern - hover (CSS variable switching - opacity change on hover)
    .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default {
      opacity: var(--band-pattern-opacity-pc-hover, var(--band-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-band-color.default {
    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);
  }
  .wp-block-zenblocks-button-basic-band-color.hover {
    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) calc(var(--band-transition-delay, 0ms) + var(--band-transition-duration, 300ms) * 0.5);
  }
  .wp-block-zenblocks-button-basic-band-image,
  .wp-block-zenblocks-button-basic-band-pattern {
    transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);
  }

  .wp-block-zenblocks-button-basic-band-poster,
  .wp-block-zenblocks-button-basic-band-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-band-poster {
    background-repeat: no-repeat;
  }

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