/*
umo-tab
(C) 2018 Wangrove Inc. <wangrove.co.jp>
*/

/*
HTMLテンプレート
<div data-ui="umo-tab" data-name="${ui_name}" data-value="">
	<div data-parts="umo-tab__tab-frame">
		<div data-parts="umo-tab__tab" data-key="${tab_name}" data-selected="">${tab_caption}</div>
		...
	</div>
	<div data-parts="umo-tab__contents-frame">
		<div data-parts="umo-tab__contents" data-key="${tab_name}" data-selected="(0|1)">
		</div><!-- umo-tab__contents // -->
		...
	</div>
</div><!-- umo-tab // -->

data-ui="umo-tab"
	data-value : 選択しているタブのdata-keyの値
data-parts="umo-tab__tab-frame"
	タブ群を囲むフレーム
data-parts="umo-tab__tab"
	１つのタブ
	data-key : タブ識別文字列
	data-selected : 選択状態 "1"=選択, "0"|""=未選択
data-parts="umo-tab__contents-frame"
	コンテンツ群を囲むフレーム
data-parts="umo-tab__contents"
	タブと連動して表示されるコンテンツ
	data-key : タブ識別文字列
	data-selected : 選択状態 "1"=選択, "0"|""=未選択
*/

/*
UIの外枠
*/
[data-ui="umo-tab"] {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

/*
UIの外枠
*/
[data-ui="umo-tab"] > [data-parts="umo-tab__tab-frame"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 3px;
}

/*
タブ
*/
[data-ui="umo-tab"] > [data-parts="umo-tab__tab-frame"] > [data-parts="umo-tab__tab"] {
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--umo-ui-size);
	margin-bottom: 2px;
	padding: 2px 0.5rem;
	border: var(--umo-ui-border-color) solid;
	border-width: 1px 1px 0 1px;
	line-height: var(--umo-ui-size);
	cursor: pointer;
}
/* hover */
[data-ui="umo-tab"] > [data-parts="umo-tab__tab-frame"] > [data-parts="umo-tab__tab"]:hover {
	background-color: var(--umo-ui-hover-background-color);
}

/*
タブ（選択状態）
*/
[data-ui="umo-tab"] > [data-parts="umo-tab__tab-frame"] > [data-parts="umo-tab__tab"][data-selected="1"] {
	height: calc(var(--umo-ui-size) + 4px);
	margin-bottom: 0px;
	background-color: var(--umo-ui-disable-background-color);
}

/*
コンテンツ群
*/
[data-ui="umo-tab"] > [data-parts="umo-tab__contents-frame"] {
	margin: 0;
	padding: 5px;
	border: var(--umo-ui-border);
}

/*
コンテンツ領域
*/
[data-ui="umo-tab"] > [data-parts="umo-tab__contents-frame"] > [data-parts="umo-tab__contents"] {
}
[data-ui="umo-tab"] > [data-parts="umo-tab__contents-frame"] > [data-parts="umo-tab__contents"]:not([data-selected="1"]) {
	display: none;
}