/*
umo-radio
(C) 2021 Wangrove Inc. <wangrove.co.jp>
*/

/*
** HTMLテンプレート
<div data-ui="umo-radio" data-name="${name}" data-link="[data-radio-group='form/${name}']" data-value="{{ form.${name} }}" disabled readonly>
	<div data-parts="umo-radio__item" data-item-value="${value}" [data-checked]>
        <div data-parts="umo-radio__item__checked">CHECKED LABEL</div>
        <div data-parts="umo-radio__item__unchecked">UNCHECKED LABEL</div>
    </div>
	<div data-parts="umo-radio__item" data-item-value="${value}" [data-checked]>
		<label data-parts="umo-radio__item__radio"><input type="radio"><span>${label}</span></label>
	</div>
    ...
</div>

[UI] umo-radio
data-ui="umo-radio" = UI名
data-name=名前 = UIを識別する名前
data-value=値 = 選択されているアイテムの値
data-link=セレクタ = 連動する選択肢ノードを指定する。省略時はUI内の[data-parts="umo-radio__item"]になる。
disabled = 使用不可にするときに指定
readonly = 読み取り専用時に指定
	[PARTS] umo-radio__item 選択肢アイテム（data-linkを指定してコンテナ外に配置可能）
	data-item-value=値 = 選択肢の値
	data-checked = 選択時に設定する
		[PARTS] umo-radio__item__checked 選択時に表示する
		[PARTS] umo-radio__item__unchecked 非選択時に表示する
		[PARTS] umo-radio__item__radio 選択肢アイテム内のラジオボタンまたはラジオボタンを囲む要素
*/

/*
UIの外枠
*/
[data-ui="umo-radio"] {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	height: var(--umo-ui-size);
}

/*
値保持ノード
*/
[data-ui="umo-radio"] > [data-parts="umo-radio__value"] {
	display: none;
}

/*
選択肢ノード
*/
[data-parts="umo-radio__item"] {
	display: block;
	cursor: pointer;
}
[data-parts="umo-radio__item"] * {
	cursor: inherit;
}
[data-parts="umo-radio__item__radio"] input[type="radio"] {
	margin-right: 5px;
}
[data-ui="umo-radio"][readonly] > [data-parts="umo-radio__item"],
[data-parts="umo-radio__item"][readonly] {
	cursor: unset;
}
/* 選択時はdata-when-uncheckedを非表示 */
[data-parts="umo-radio__item"][data-checked] [data-when-unchecked] {
	display: none;
}
/* 非選択時はdata-when-checkedを非表示 */
[data-parts="umo-radio__item"]:not([data-checked]) [data-when-checked] {
	display: none;
}