// ------------------------------------------
// Base
// Responsive properties (margin, padding, width, height, border, radius, etc.)
// are handled by PHP dynamic CSS (zenblocks-responsive.css)
// ------------------------------------------

.wp-block-zenblocks-button-basic {
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
  position: relative;
  z-index: 1;
  border: none !important;

  > a,
  > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    margin: 0 !important;
    background: none !important;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
    white-space: var(--button-white-space, pre-wrap);
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-family: var(--font-family);
    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はボーダー内側に配置されるため、角丸は設定値をそのまま使用
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 100;
      border-top-left-radius: var(--styling-radius-top-left-pc, 0px);
      border-top-right-radius: var(--styling-radius-top-right-pc, 0px);
      border-bottom-right-radius: var(--styling-radius-bottom-right-pc, 0px);
      border-bottom-left-radius: var(--styling-radius-bottom-left-pc, 0px);
      box-shadow: var(--styling-inner-shadow-pc, none);
      transition: box-shadow 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);
    }

    &:hover::after {
      border-top-left-radius: var(--styling-radius-top-left-pc-hover, var(--styling-radius-top-left-pc, 0px));
      border-top-right-radius: var(--styling-radius-top-right-pc-hover, var(--styling-radius-top-right-pc, 0px));
      border-bottom-right-radius: var(--styling-radius-bottom-right-pc-hover, var(--styling-radius-bottom-right-pc, 0px));
      border-bottom-left-radius: var(--styling-radius-bottom-left-pc-hover, var(--styling-radius-bottom-left-pc, 0px));
      box-shadow: var(--styling-inner-shadow-pc-hover, var(--styling-inner-shadow-pc, none));
    }

    .wp-block-zenblocks-button-basic-content {
      position: relative;
      z-index: var(--layer-z-index-content, 20);
      display: inline-flex;
      align-items: center;
      justify-content: var(--button-content-justify, center);
      text-align: center;
      width: 100%;
      height: 100%;
    }

    .wp-block-zenblocks-button-basic-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: block;
      z-index: var(--layer-z-index-bg, 0);
    }
  }

  > a .wp-block-zenblocks-button-basic-text,
  > button .wp-block-zenblocks-button-basic-text {
    position: relative;
    z-index: 30;
    display: block;
  }

  > a:hover,
  > button:hover {
    text-decoration: none;
  }
}

// ==================================================
// Editor Hover Preview State - .is-hover-preview
// Shows hover styles when editing hover settings in Inspector
// ==================================================
.wp-block-zenblocks-button-basic.is-hover-preview {
  > a::after,
  > button::after {
    border-top-left-radius: var(--styling-radius-top-left-pc-hover, var(--styling-radius-top-left-pc, 0px));
    border-top-right-radius: var(--styling-radius-top-right-pc-hover, var(--styling-radius-top-right-pc, 0px));
    border-bottom-right-radius: var(--styling-radius-bottom-right-pc-hover, var(--styling-radius-bottom-right-pc, 0px));
    border-bottom-left-radius: var(--styling-radius-bottom-left-pc-hover, var(--styling-radius-bottom-left-pc, 0px));
    box-shadow: var(--styling-inner-shadow-pc-hover, var(--styling-inner-shadow-pc, none));
  }

  > a,
  > button,
  > a:hover,
  > button:hover {
    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));
    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));
    text-decoration: none;
  }
}