// ------------------------------------------
// Text
// Responsive properties handled by PHP dynamic CSS (zenblocks-responsive.css)
// ------------------------------------------

.wp-block-zenblocks-button-basic {
  > a,
  > button {
    // テキストカラー設定（アイコン内のspan要素、マイクロテキスト、サブテキストは除外）
    .wp-block-zenblocks-button-basic-text,
    .wp-block-zenblocks-button-basic-content h1,
    .wp-block-zenblocks-button-basic-content h2,
    .wp-block-zenblocks-button-basic-content h3,
    .wp-block-zenblocks-button-basic-content h4,
    .wp-block-zenblocks-button-basic-content h5,
    .wp-block-zenblocks-button-basic-content h6,
    .wp-block-zenblocks-button-basic-content div,
    .wp-block-zenblocks-button-basic-content p,
    .wp-block-zenblocks-button-basic-content span:not(.wp-block-zenblocks-button-basic-icon):not(.default):not(.hover):not(.wp-block-zenblocks-button-basic-text-micro):not(.wp-block-zenblocks-button-basic-text-sub):not(.char) {
      color: var(--text-color, inherit);
      text-shadow: var(--text-shadow, none);
      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);
    }

    .wp-block-zenblocks-button-basic-text {
      position: relative;
      z-index: 30;
      text-align: var(--text-align, center);
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: var(--text-align-items, center);

      .char {
        display: inline-block;
      }

      .wp-block-zenblocks-button-basic-text-main {
        position: relative;
        width: 100%;
        height: var(--text-main-height-pc, 1.6em);
        text-shadow: var(--text-shadow, none);

        .default {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          transform: translateY(-50%);
          opacity: 1;
          visibility: visible;
          font-family: var(--font-family);
          font-size: var(--font-size-pc, inherit);
          font-weight: var(--font-weight-pc, inherit);
          letter-spacing: var(--letter-spacing-pc, 0);
          line-height: var(--line-height-pc, 1.2);
          color: var(--text-color, inherit);
          text-shadow: var(--text-shadow, none);
          transition: opacity var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
                      visibility var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);
        }

        .hover {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          transform: translateY(-50%);
          opacity: 0;
          visibility: hidden;
          font-family: var(--font-family-hover, var(--font-family));
          font-size: var(--font-size-pc-hover, var(--font-size-pc, inherit));
          font-weight: var(--font-weight-pc-hover, var(--font-weight-pc, inherit));
          letter-spacing: var(--letter-spacing-pc-hover, var(--letter-spacing-pc, 0));
          line-height: var(--line-height-pc-hover, var(--line-height-pc, 1.2));
          color: var(--text-color-hover, var(--text-color, inherit));
          text-shadow: var(--text-shadow-hover, var(--text-shadow, none));
          transition: opacity var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms),
                      visibility var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);
        }
      }
    }

    &:hover {
      color: var(--text-color-hover, inherit);
      text-shadow: var(--text-shadow-hover, none);

      .wp-block-zenblocks-button-basic-text {
        .wp-block-zenblocks-button-basic-text-main {
          .default {
            opacity: 0;
            visibility: hidden;
          }

          .hover {
            opacity: 1;
            visibility: visible;
          }
        }
      }

      // テキストカラー設定（アイコン内のspan要素、マイクロテキスト、サブテキストは除外）
      .wp-block-zenblocks-button-basic-text,
      .wp-block-zenblocks-button-basic-content h1,
      .wp-block-zenblocks-button-basic-content h2,
      .wp-block-zenblocks-button-basic-content h3,
      .wp-block-zenblocks-button-basic-content h4,
      .wp-block-zenblocks-button-basic-content h5,
      .wp-block-zenblocks-button-basic-content h6,
      .wp-block-zenblocks-button-basic-content div,
      .wp-block-zenblocks-button-basic-content p,
      .wp-block-zenblocks-button-basic-content span:not(.wp-block-zenblocks-button-basic-icon):not(.default):not(.hover):not(.wp-block-zenblocks-button-basic-text-micro):not(.wp-block-zenblocks-button-basic-text-sub):not(.char) {
        color: var(--text-color-hover, inherit) !important;
        text-shadow: var(--text-shadow-hover, none) !important;
        text-decoration: none !important;
      }
    }
  }
}

// ==================================================
// 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,
  > button {
    color: var(--text-color-hover, inherit);
    text-shadow: var(--text-shadow-hover, none);

    .wp-block-zenblocks-button-basic-text {
      .wp-block-zenblocks-button-basic-text-main {
        .default {
          opacity: 0;
          visibility: hidden;
        }

        .hover {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    // テキストカラー設定（アイコン内のspan要素、マイクロテキスト、サブテキストは除外）
    .wp-block-zenblocks-button-basic-text,
    .wp-block-zenblocks-button-basic-content h1,
    .wp-block-zenblocks-button-basic-content h2,
    .wp-block-zenblocks-button-basic-content h3,
    .wp-block-zenblocks-button-basic-content h4,
    .wp-block-zenblocks-button-basic-content h5,
    .wp-block-zenblocks-button-basic-content h6,
    .wp-block-zenblocks-button-basic-content div,
    .wp-block-zenblocks-button-basic-content p,
    .wp-block-zenblocks-button-basic-content span:not(.wp-block-zenblocks-button-basic-icon):not(.default):not(.hover):not(.wp-block-zenblocks-button-basic-text-micro):not(.wp-block-zenblocks-button-basic-text-sub):not(.char) {
      color: var(--text-color-hover, inherit) !important;
      text-shadow: var(--text-shadow-hover, none) !important;
      text-decoration: none !important;
    }
  }
}