/**
 * core/button のブロックスタイル（#3375）
 *
 * 「スタイル」パネルで選んだときだけ効く。is-style-* が付いていないボタンには
 * 一切触らない（既存投稿の見た目を変えないため）。
 *
 * 色は theme.json のパレット「メインカラー」（--wp--preset--color--primary）。
 * ブロック側で色を指定した場合はそちらが勝つ（ここでは色を上書きしない）。
 * 矢印は ::after で付け、HTML 構造は変えない。
 */

/* 矢印付き: 右端に「→」。ホバーで矢印が少し右へ動く */
.wp-block-button.is-style-optib-arrow .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  /* コアは inline-block + text-align:center で中央に置く。flex に変えると
     text-align が効かなくなるので、幅 50% / 100% でも中央に来るよう明示する */
  justify-content: center;
  gap: 0.5em;
}

.wp-block-button.is-style-optib-arrow .wp-block-button__link::after {
  content: "\2192";
  display: inline-block;
  transition: transform 0.2s ease;
}

.wp-block-button.is-style-optib-arrow .wp-block-button__link:hover::after {
  transform: translateX(0.25em);
}

/* 角丸（ピル型）: 左右が完全な半円 */
.wp-block-button.is-style-optib-pill .wp-block-button__link {
  border-radius: 9999px;
  padding-left: 1.75em;
  padding-right: 1.75em;
}

/* 影付き: 下に影、ホバーで浮き上がる */
.wp-block-button.is-style-optib-shadow .wp-block-button__link {
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button.is-style-optib-shadow .wp-block-button__link:hover {
  transform: translateY(-0.15em);
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.22);
}

/* リンク風: 背景なし、文字 + 下線。控えめな導線向け */
.wp-block-button.is-style-optib-text-link .wp-block-button__link {
  background: none;
  border: 0;
  /* 上下の padding はコア既定のまま残す。0 にすると隣のボタンより背が低くなり、
     同じボタン群に並べたとき縦位置がずれて浮いて見える */
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  color: var(--wp--preset--color--primary, #ce8460);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wp-block-button.is-style-optib-text-link .wp-block-button__link:hover {
  text-decoration-thickness: 0.12em;
}