// ------------------------------------------
// Editor
// ------------------------------------------

.wp-block-editor .wp-block-zenblocks-button-basic.is-selected {
  position: relative;
  z-index: 100;
}

.wp-block-editor .wp-block-zenblocks-button-basic {
  margin-top: var(--spacing-margin-top-pc, 0) !important;
  margin-right: var(--spacing-margin-right-pc, 0) !important;
  margin-bottom: var(--spacing-margin-bottom-pc, 0) !important;
  margin-left: var(--spacing-margin-left-pc, 0) !important;

  > a,
  > button {
    font-size: var(--font-size-pc, inherit) !important;
    padding-top: var(--spacing-padding-top-pc, 0) !important;
    padding-right: var(--spacing-padding-right-pc, 0) !important;
    padding-bottom: var(--spacing-padding-bottom-pc, 0) !important;
    padding-left: var(--spacing-padding-left-pc, 0) !important;
    box-sizing: var(--styling-box-sizing-pc, border-box) !important;
    height: var(--layout-height-pc, auto) !important;
    min-height: var(--layout-height-min-pc, auto) !important;
    max-height: var(--layout-height-max-pc, none) !important;
    border-width: var(--styling-border-width-pc, 0);
    border-style: var(--styling-border-style-pc, none);
    border-color: var(--styling-border-color-pc, transparent);
    // 外側の角丸 = JS側で計算済み（角丸0なら0、0以外なら角丸+ボーダー幅）
    border-top-left-radius: var(--styling-radius-outer-top-left-pc, var(--styling-radius-top-left-pc, 0px));
    border-top-right-radius: var(--styling-radius-outer-top-right-pc, var(--styling-radius-top-right-pc, 0px));
    border-bottom-right-radius: var(--styling-radius-outer-bottom-right-pc, var(--styling-radius-bottom-right-pc, 0px));
    border-bottom-left-radius: var(--styling-radius-outer-bottom-left-pc, var(--styling-radius-bottom-left-pc, 0px));
    box-shadow: var(--styling-shadow-pc, none);
    // 透明設定（getPreviewStylesがプレビューデバイスに応じてPC変数を更新するため、レスポンシブ対応）
    opacity: var(--styling-opacity-pc, 1);
    mix-blend-mode: var(--styling-mix-blend-mode-pc, normal);

    .wp-block-zenblocks-button-basic-text {
      .wp-block-zenblocks-button-basic-text-main {
        height: var(--text-main-height-pc, 1.6em);
        
        .default {
          font-size: var(--font-size-pc, inherit);
          font-weight: var(--font-weight-pc, inherit);
          line-height: var(--line-height-pc, 1.2);
          letter-spacing: var(--letter-spacing-pc, 0);
        }

        .hover {
          font-size: var(--font-size-pc-hover, var(--font-size-pc, inherit));
          font-weight: var(--font-weight-pc-hover, var(--font-weight-pc, inherit));
          line-height: var(--line-height-pc-hover, var(--line-height-pc, 1.2));
          letter-spacing: var(--letter-spacing-pc-hover, var(--letter-spacing-pc, 0));
        }
      }
    }

    .wp-block-zenblocks-button-basic-bg-color {
      background: var(--background-color-pc, transparent);
      opacity: var(--background-color-opacity-pc, 1);
      mix-blend-mode: var(--background-color-mix-blend-mode-pc, normal);
    }

    .wp-block-zenblocks-button-basic-bg-image {
      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));
    }

    .wp-block-zenblocks-button-basic-bg-pattern {
      opacity: var(--background-pattern-opacity-pc, 0.5);
      transform: rotate(var(--background-pattern-rotate-pc, 0deg));

      &[data-pattern-pc="dots"] {
        background-image: radial-gradient(circle, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="diagonal-lines"] {
        background-image: repeating-linear-gradient(45deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="cross-lines"] {
        background-image: repeating-linear-gradient(45deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%),
          repeating-linear-gradient(-45deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="horizontal-lines"] {
        background-image: repeating-linear-gradient(0deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="vertical-lines"] {
        background-image: repeating-linear-gradient(90deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="grid"] {
        background-image: linear-gradient(var(--background-pattern-color-pc, #000) 1px, transparent 1px), linear-gradient(90deg, var(--background-pattern-color-pc, #000) 1px, transparent 1px);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="diagonal-grid"] {
        background-image: repeating-linear-gradient(45deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%),
          repeating-linear-gradient(-45deg, var(--background-pattern-color-pc, #000) 0, var(--background-pattern-color-pc, #000) 1px, transparent 0, transparent 50%);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="circles"] {
        background-image: radial-gradient(circle, transparent 40%, var(--background-pattern-color-pc, #000) 40%, var(--background-pattern-color-pc, #000) 50%, transparent 50%);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }

      &[data-pattern-pc="triangles"] {
        background-image: conic-gradient(from 210deg at 50% 85%, var(--background-pattern-color-pc, #000) 0deg, var(--background-pattern-color-pc, #000) 120deg, transparent 120deg);
        background-size: var(--background-pattern-size-pc, 10px) var(--background-pattern-size-pc, 10px);
      }
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  div,
  p,
  span:not(.char) {
    display: block;
    width: 100%;
    font-family: var(--font-family) !important;
    text-align: inherit;
    white-space: inherit;
  }

  span span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  p span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  h1 span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  h2 span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  h3 span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  h4 span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  h5 span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  h6 span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]),
  div span:not([class*="-text-micro"]):not([class*="-text-sub"]):not([class*="-copy-micro"]):not([class*="-copy-sub"]) {
    margin: 0 !important;
    padding: 0 !important;
  }

  // プレビューモード切り替え中はトランジションを無効化
  &.is-switching-preview {
    // 全ての子要素のトランジションを無効化
    *,
    *::before,
    *::after {
      transition: none !important;
    }
  }
}