/*
 * umo-toggle
 * トグル
 * 
 * (C) 2021 Wangrove Inc <wangrove.co.jp>.
 */

/*
** HTMLテンプレート
<div data-ui="umo-toggle" data-checkbox="[name='form/{$name}']" data-on="{$on}" data-off="{$off}">
	<div data-parts="umo-toggle__on">on label</div>
	<div data-parts="umo-toggle__off">off label</div>
	<div data-parts="umo-toggle__label">label</div>
</div>

[UI] umo-toggle
data-on = チェックオンの時の値。.-toggle-valueにセットされる。省略時は'1'。
data-off = チェックオフの時の値。.-toggle-valueにセットされる。省略時は'0'。
data-checked = チェックオンの時に設定される。
data-link = 連動する要素を指定する。要素がcheckboxならcheckedが連動し、それ以外はdata-umo-toggle-valueにOn/Offの値が設定される。
	[PARTS] umo-toggle__on チェックオン状態のときに表示される要素。
	[PARTS] umo-toggle__off チェックオフ状態のときに表示される要素。
	[PARTS] umo-toggle__label UI内に表示されるラベル
*/

/*
UIの外枠
*/
[data-ui="umo-toggle"] {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	height: var(--umo-ui-size);
	border-radius: var(--umo-ui-border-radius);
	cursor: pointer;
}
/* readonly */
[data-ui="umo-toggle"][data-readonly] {
	cursor: unset;
}
/* hover */
[data-ui="umo-toggle"]:hover,
[data-ui="umo-toggle"]:active {
	outline: 1px solid;
	outline-color: var(--umo-ui-hover-border-color);
	outline-offset: 1px;
}

/*
ラベル
*/
[data-ui="umo-toggle"] > [data-parts="umo-toggle__on"],
[data-ui="umo-toggle"] > [data-parts="umo-toggle__off"],
[data-ui="umo-toggle"] > [data-parts="umo-toggle__label"] {
	display: block;
	width: 100%;
	height: auto;
	padding: 0.1rem 0 0 0;
	cursor: inherit;
}
/* 非表示 */
[data-ui="umo-toggle"] > [data-parts][data-hidden="1"] {
	display: none;
}