/**
 * 必須ラベル（汎用）
 *
 * 使い方:
 *   <label for="name" data-required>お名前</label>
 *   <input id="name" type="text" required>
 *
 * `data-required` 属性を持つ要素の右側に「必須」チップを ::after で自動生成する。
 * label 以外でも data-required を付ければ表示できる（汎用属性ベース）。
 */

[data-required]::after {
	content: "必須";
	display: inline-block;
	margin-inline-start: 10px;
	width: 49px;
	height: 23px;
	border-radius: var(--wp--custom--radius--normal);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 23px;
	text-align: center;
	vertical-align: middle;
}