/* ラッパ */
.cbw-wrapper {
  display: block;
  position: relative;
  margin: 10px 0;
}

/* ボタン（色・サイズはCSS変数で上書き可能） */
.cbw-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border: 1px solid var(--wp--preset--color--contrast-3, #e5e7eb);
  background: var(--cbw-bg, var(--wp--preset--color--base, #fff));
  color: var(--cbw-fg, inherit);
  cursor: pointer;
  border-radius: 8px; /* 形はクラスで上書き */
  transition: transform .02s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  width: var(--cbw-w, auto);
  height: var(--cbw-h, auto);
  min-height: calc(var(--cbw-h, 0px));
  box-sizing: border-box;
}
.cbw-button:hover { background: var(--cbw-bg-hover, var(--wp--preset--color--base-2, #f8fafc)); }
.cbw-button:active { transform: scale(0.98); }

/* 形 */
.cbw-shape-square  .cbw-button { border-radius: 0; }
.cbw-shape-rounded .cbw-button { border-radius: 8px; }
.cbw-shape-pill    .cbw-button { border-radius: 9999px; }

/* 幅モード */
.cbw-length-auto .cbw-button { width: var(--cbw-w, auto); }
.cbw-length-full .cbw-button { width: 100%; justify-content: center; }

/* 影 */
.cbw-shadow .cbw-button { box-shadow: 0 6px 16px rgba(0,0,0,.08); }

/* アイコン（Dashicons / SVG） */
.cbw-button .dashicons {
  line-height: 1;
  font-size: var(--cbw-icon, 16px); /* ← 可変 */
  width: var(--cbw-icon, 16px);
  height: var(--cbw-icon, 16px);
}
.cbw-button svg {
  display: inline-block;
  vertical-align: middle;
  width: var(--cbw-icon, 16px);     /* ← 可変 */
  height: var(--cbw-icon, 16px);
}

/* Toast */
.cbw-toast {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  pointer-events: none;
  z-index: 10000;
}
.cbw-toast.show { opacity: 1; visibility: visible; }