/**
 * `zuyan-inline-divider/divider` 的視覺樣式，編輯器（iframe 畫布）與前台
 * 共用同一份（透過 `enqueue_block_assets` 載入，這個鉤子會自動把樣式表
 * 注入編輯器 iframe，不需要另外處理）。
 *
 * 整個視覺完全靠 CSS + 存在 HTML attribute 裡的資料算出來（屬性選擇器讀
 * `data-style`），沒有任何地方需要 JS 動態插入子節點或前台互動腳本——這
 * 個格式是純靜態視覺呈現（不像 zuyan-inline-audio 有播放/暫停狀態），比
 * 音訊播放器單純很多。
 *
 * 【寬度演進 v1.1.0→v1.2.0→v1.3.0】寬度不是使用者手動輸入的固定 px
 * （v1.1.0 先改成 `width:15%`，使用者回報太短，應該要「像原生地分割線
 * 一樣，整個分開」；v1.2.0 改成 `width:100%`；使用者接著指定要「全寬的
 * 80%」，改成 `width:80%`）。這個元素是 `display:inline-block`，寬度
 * 只要接近／等於容器寬度，前面已經佔掉一部分這一行空間的文字就會讓它
 * 塞不進同一行，瀏覽器會把它整個換到下一行、佔滿那一行 80% 的寬度（水
 * 平置中，見下方 `margin`），後面的文字又會被它擠到再下一行——視覺上
 * 就是「前面文字」「一條 80% 寬的分隔線」「後面文字」三行，跟原生
 * `<hr>` 切開頁面兩個區塊的視覺效果一樣（原生分隔線的 wide 樣式也不是
 * 完全頂滿容器邊緣，兩側留一點空隙的比例观感跟這個 80% 接近），但因為
 * 底層還是 RichText 的行內格式（不是 Block），所以還是可以插進段落文
 * 字中間或表格儲存格裡，不需要另外拆段落。百分比寬度天生就不可能超過
 * 容器本身，完全不會有 [[project_zuyan_inline_audio]] 那種「固定 px 元
 * 素塞進窄欄位溢出」的風險，不需要另外用 JS 去偵測/保護。
 *
 * 【`display:block` 而不是 `inline-block`】寬度變成 80%（不是 100%）之
 * 後，如果還是 `inline-block`，`margin:auto` 沒辦法把它水平置中——
 * auto margin 只對 block-level 的box 有置中效果，inline-level（含
 * inline-block）的 auto margin 會被當成 0，等於完全不置中。而且
 * `inline-block` 只有在「跟前面文字擠不進同一行」時才會整個換行，如
 * 果前面文字剛好很短、還留有 80% 的空間，分隔線可能會直接接在前面文字
 * 尾端同一行，不保證每次都乾淨換行。改成 `display:block` 解決兩個問
 * 題：block-level box 本來就一定會自己獨佔一行（不管前面文字多短都一
 * 定換行），`margin:auto` 也才會真的水平置中。底層 HTML 標籤仍然是
 * `<span>`（RichText 存/讀檔看的是標籤本身，不是 CSS `display`），
 * contentEditable 的選取行為不受影響（純 `<span>` 沒有任何原生互動，
 * 不是 `<button>` 那種會搶 focus 的元素）。
 *
 * 三種樣式比照原生 `core/separator`（見
 * wp-includes/blocks/separator/{style,theme}.css）：
 * - 細線（`default`）：原生預設樣式，2px 實色線條、40% 透明度。
 * - 粗線（`wide`）：原生「wide」樣式在區塊版本裡指的是「整個 block 滿版
 *   寬度」，跟細線的差別其實只在長度不在粗細；現在這個格式兩種樣式都是
 *   `width:100%`（滿版），長度已經沒有區分作用，所以改成用「線條變粗」
 *   （4px）代表 wide 這個樣式，跟細線做出視覺區隔。
 * - 點狀（`dots`）：跟原生一樣 `content:"···"` 置中在滿版寬度的線裡，字級
 *   /letter-spacing 縮小一點讓它嵌在行內文字之間時不會把行高撐開太多。
 *
 * 三種樣式都用 `currentColor` + `opacity:.4`（原生預設的
 * `.has-css-opacity{opacity:.4}` 效果），不是寫死的顏色——這樣夜間/日間
 * 模式會自動跟著周圍文字顏色變化，不需要像 zuyan-inline-audio 的播放圖示
 * 那樣另外寫 `body[data-theme="dark"]` override。
 *
 * 【編輯器可點擊範圍加大】細線樣式視覺高度只有 2px，實測發現滑鼠要點
 * 選回這個格式（在 contentEditable 裡把游標／選取放回這個字元上，才能
 * 重新打開設定面板）時，2px 高的目標非常難精準點中。用 `::after` 疊一層
 * `position:absolute` 的透明擴大範圍（不影響版面高度——絕對定位元素不
 * 計入父層 box 尺寸，這點在 v2.0.6 撐高段落那次已經驗證過同樣的原理），
 * 讓使用者點擊視覺線條上下各多出來的範圍也算點中，不需要精準點在那 2px
 * 上。純粹是編輯器裡的可用性加強，前台沒有任何互動，這層在前台一樣存在
 * 但不會有任何效果差異。
 */
.zuyan-inline-divider {
	display: block;
	position: relative;
	width: 80%;
	margin: 4px auto;
}

.zuyan-inline-divider::after {
	content: "";
	position: absolute;
	top: -8px;
	right: -3px;
	bottom: -8px;
	left: -3px;
}

.zuyan-inline-divider[data-style="default"] {
	height: 2px;
	background-color: currentColor;
	opacity: 0.4;
}

.zuyan-inline-divider[data-style="wide"] {
	height: 4px;
	background-color: currentColor;
	opacity: 0.4;
}

.zuyan-inline-divider[data-style="dots"] {
	height: 1em;
	line-height: 1;
	text-align: center;
	opacity: 0.4;
}

.zuyan-inline-divider[data-style="dots"]::before {
	content: "···";
	display: inline-block;
	font-family: serif;
	font-size: 1em;
	letter-spacing: 0.15em;
	/*rtl:ignore*/
	padding-left: 0.15em;
	color: currentColor;
}