// ------------------------------------------
// Micro Copy & Sub Copy (ボタン外の上下コピー)
// Base styles only - responsive handled by PHP dynamic CSS
// ------------------------------------------

.wp-block-zenblocks-button-basic {
  // Micro Copy (上部) - ベーススタイル
  .wp-block-zenblocks-button-basic-copy-micro {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--copy-micro-font-size-pc, 16px);
    font-family: var(--copy-micro-font-family);
    font-weight: var(--copy-micro-font-weight-pc, normal);
    letter-spacing: var(--copy-micro-letter-spacing-pc, 0);
    color: var(--copy-micro-text-color, #000);
    background-color: var(--copy-micro-bg-color, #fff);
    background-image: var(--copy-micro-bg-gradient);
    text-shadow: none;
    line-height: var(--copy-micro-line-height-pc, 1.4);
    text-align: center;
    margin-top: var(--copy-micro-margin-top-pc, 0);
    margin-right: var(--copy-micro-margin-right-pc, auto);
    margin-bottom: var(--copy-micro-margin-bottom-pc, 8px);
    margin-left: var(--copy-micro-margin-left-pc, auto);
    transform: rotate(var(--copy-micro-rotate, 0deg));
    z-index: 99;

    &:empty {
      display: none;
    }

    .wp-block-zenblocks-button-basic-copy-micro-contents {
      padding-top: var(--copy-micro-padding-top-pc, 0);
      padding-right: var(--copy-micro-padding-right-pc, 0);
      padding-bottom: var(--copy-micro-padding-bottom-pc, 0);
      padding-left: var(--copy-micro-padding-left-pc, 0);
      text-shadow: var(--copy-micro-text-shadow);
      white-space: pre-line;
    }
  }

  // Sub Copy (下部)
  .wp-block-zenblocks-button-basic-copy-sub {
    position: relative;
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
    font-size: var(--copy-sub-font-size-pc, 14px);
    font-family: var(--copy-sub-font-family);
    font-weight: var(--copy-sub-font-weight-pc, normal);
    letter-spacing: var(--copy-sub-letter-spacing-pc, 0);
    color: var(--copy-sub-text-color);
    text-shadow: none;
    line-height: var(--copy-sub-line-height-pc, 1.4);
    text-align: center;
    margin-top: var(--copy-sub-margin-top-pc, 8px);
    margin-right: var(--copy-sub-margin-right-pc, auto);
    margin-bottom: var(--copy-sub-margin-bottom-pc, 0);
    margin-left: var(--copy-sub-margin-left-pc, auto);
    transform: rotate(var(--copy-sub-rotate, 0deg));
    z-index: 9;

    &:empty {
      display: none;
    }

    .wp-block-zenblocks-button-basic-copy-sub-contents {
      padding-top: var(--copy-sub-padding-top-pc, 0);
      padding-right: var(--copy-sub-padding-right-pc, 0);
      padding-bottom: var(--copy-sub-padding-bottom-pc, 0);
      padding-left: var(--copy-sub-padding-left-pc, 0);
      text-shadow: var(--copy-sub-text-shadow);
      white-space: pre-line;
    }
  }
}

// ------------------------------------------
// Micro Copy Design Patterns (01-06)
// ------------------------------------------

// 01: シンプル - テキストのみ
.wp-block-zenblocks-button-basic.zenblocks-microcopy-01 {
  .wp-block-zenblocks-button-basic-copy-micro {
    width: fit-content;
    background-color: transparent;
  }
}

// 02: 飾り枠 - 「\ マイクロコピー /」形式
.wp-block-zenblocks-button-basic.zenblocks-microcopy-02 {
  .wp-block-zenblocks-button-basic-copy-micro {
    position: relative;
    width: fit-content;
    background-color: transparent;

    &::before {
      content: "";
      display: inline-block;
      width: var(--copy-micro-border-width-pc, 2px);
      height: 1em;
      background-color: var(--copy-micro-border-color-pc, #000);
      margin-right: 1em;
      transform: rotate(-20deg);
    }

    &::after {
      content: "";
      display: inline-block;
      width: var(--copy-micro-border-width-pc, 2px);
      height: 1em;
      background-color: var(--copy-micro-border-color-pc, #000);
      margin-left: 1em;
      transform: rotate(20deg);
    }
  }
}

// 03: 帯 - 枠線付きの帯
.wp-block-zenblocks-button-basic.zenblocks-microcopy-03 {
  .wp-block-zenblocks-button-basic-copy-micro {
    display: flex;
    width: fit-content;
    border-width: var(--copy-micro-border-width-pc, 1px);
    border-style: var(--copy-micro-border-style-pc, solid);
    border-color: var(--copy-micro-border-color-pc, #000);
    border-radius: var(--copy-micro-border-radius-pc, 0px);

    .wp-block-zenblocks-button-basic-copy-micro-contents {
      padding-top: var(--copy-micro-padding-top-pc, 0.25em);
      padding-right: var(--copy-micro-padding-right-pc, 1em);
      padding-bottom: var(--copy-micro-padding-bottom-pc, 0.25em);
      padding-left: var(--copy-micro-padding-left-pc, 1em);
    }
  }
}

// 04: 吹き出し - 下向き三角の吹き出し
.wp-block-zenblocks-button-basic.zenblocks-microcopy-04 {
  .wp-block-zenblocks-button-basic-copy-micro {
    position: relative;
    display: flex;
    width: fit-content;
    border-width: var(--copy-micro-border-width-pc, 1px);
    border-style: var(--copy-micro-border-style-pc, solid);
    border-color: var(--copy-micro-border-color-pc, #000);
    border-radius: var(--copy-micro-border-radius-pc, 0px);
    margin-bottom: calc(var(--copy-micro-margin-bottom-pc, 8px) + 10px);

    .wp-block-zenblocks-button-basic-copy-micro-contents {
      padding-top: var(--copy-micro-padding-top-pc, 0.25em);
      padding-right: var(--copy-micro-padding-right-pc, 1em);
      padding-bottom: var(--copy-micro-padding-bottom-pc, 0.25em);
      padding-left: var(--copy-micro-padding-left-pc, 1em);
    }

    &::after {
      content: "";
      position: absolute;
      bottom: calc(-10px - var(--copy-micro-border-width-pc, 1px));
      left: 50%;
      transform: translateX(-50%);
      width: calc(16px + var(--copy-micro-border-width-pc, 1px) * 2);
      height: calc(10px + var(--copy-micro-border-width-pc, 1px));
      background-color: var(--copy-micro-border-color-pc, #000);
      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    }

    &::before {
      content: "";
      position: absolute;
      bottom: calc(-10px + var(--copy-micro-border-width-pc, 1px));
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 10px;
      background-color: var(--copy-micro-bg-gradient-mid-color, var(--copy-micro-bg-color, #fff));
      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
      z-index: 1;
    }
  }
}

// 05: デザイン - 下線と三角のみ
.wp-block-zenblocks-button-basic.zenblocks-microcopy-05 {
  .wp-block-zenblocks-button-basic-copy-micro {
    position: relative;
    display: flex;
    width: fit-content;
    background-color: transparent;
    border-bottom: var(--copy-micro-border-width-pc, 1px) solid var(--copy-micro-border-color-pc, #000);
    margin-bottom: calc(var(--copy-micro-margin-bottom-pc, 8px) + 10px);

    .wp-block-zenblocks-button-basic-copy-micro-contents {
      padding-top: var(--copy-micro-padding-top-pc, 0);
      padding-right: var(--copy-micro-padding-right-pc, 0.5em);
      padding-bottom: var(--copy-micro-padding-bottom-pc, 0.25em);
      padding-left: var(--copy-micro-padding-left-pc, 0.5em);
    }

    &::after {
      content: "";
      position: absolute;
      bottom: calc(-10px - var(--copy-micro-border-width-pc, 1px));
      left: 50%;
      transform: translateX(-50%);
      width: calc(16px + var(--copy-micro-border-width-pc, 1px) * 2);
      height: calc(10px + var(--copy-micro-border-width-pc, 1px));
      background-color: var(--copy-micro-border-color-pc, #000);
      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    }

    &::before {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 10px;
      background-color: var(--copy-micro-bg-gradient-mid-color, var(--copy-micro-bg-color, #fff));
      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
      z-index: 1;
    }
  }
}