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

/*
HTMLテンプレート
<form data-ui="umo-form" data-name="${name}" method="post">
	<div class="umo-form__field">
		<div class="umo-form__field__label">${label}</div>
		<div class="umo-form__field__ui">
			<!-- ここにUIのタグを記述（UIが縦に並ぶ） -->
			<p class="umo-form__field__error">エラーメッセージ</p>
		</div>
	</div>
	<div class="umo-form__caption">
		<!-- 見出し -->
	</div>
	<div class="umo-form__field">
		<div class="umo-form__field__label">${label2}</div>
		<div class="umo-form__field__ui">
			<div class="umo-form__field__ui__row">
				<!-- ここにUIのタグを記述（UIが横に並ぶ） -->
			</div>
			<p class="umo-form__field__error">エラーメッセージ</p>
		</div>
	</div>
	...
	<div class="umo-form__buttons">
		<button type="button" class="umo-ui" onclick="">ボタン</button>
	</div>
</form>
*/

/*
UIの外枠
*/
[data-ui="umo-form"] {
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
[data-ui="umo-form"].-bar {
	width: 100%;
}
[data-ui="umo-form"].-column,
[data-ui="umo-form"].-column > .umo-form__field-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*
入力フィールド枠
*/
[data-ui="umo-form"] .umo-form__field {
	display: flex;
	width: 100%;
	min-height: calc(var(--umo-ui-size) + 1em);
	box-sizing: content-box;
	margin: 0 0 0.5em 0;
	border-bottom: #ccc 1px solid;
	vertical-align: middle;
	overflow: hidden;
}
[data-ui="umo-form"] .umo-form__field > .umo-form__field__label {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	width: 8em;
	margin: 0;
	padding: 0 0 0.5rem 0;
	text-align: left;
	line-height: 1.1rem;
	word-break: break-all;
}
[data-ui="umo-form"] .umo-form__field > .umo-form__field__ui {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
	width: 0; /* flex-growで自動的に伸びる。widthを指定しないと.umo-form__field__ui内のUIにmax-widthを指定できない。*/
	margin: 0;
	padding: 0 0 0.5rem 0;
	text-align: left;
	line-height: 1.1rem;
	word-break: break-all;
}
[data-ui="umo-form"] .umo-form__field:first-of-type > .umo-form__field__label,
[data-ui="umo-form"] .umo-form__field:first-of-type > .umo-form__field__ui {
}
[data-ui="umo-form"] .umo-form__field .umo-form__field__error {
	display: block;
	clear: both;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	vertical-align: top;
	color: #d02000;
}
[data-ui="umo-form"] .umo-form__field .umo-form__field__error:empty {
	display: none;
}
[data-ui="umo-form"] .umo-form__field > .umo-form__field__ui > * + * {
	margin-top: 0.4rem;
}
[data-ui="umo-form"] .umo-form__field > .umo-form__field__ui > .umo-form__field__ui__row {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--umo-ui-size);
}
[data-ui="umo-form"].-column .umo-form__field > .umo-form__field__ui > .umo-form__field__ui__row > * {
	min-width: 0;
}
[data-ui="umo-form"] > .umo-form__caption {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 2rem;
	margin: 0 0 1rem 0;
	padding: 0 0 0 0.5em;
	line-height: 2rem;
	vertical-align: middle;
	background-color: #f0f0f0;
	border-left: #d0d0d0 1em solid;
}
[data-ui="umo-form"] > .umo-form__buttons {
	width: 100%;
	margin: 1em 0 0;
	text-align: center;
}
[data-ui="umo-form"] > .umo-form__buttons > button.umo-ui,
[data-ui="umo-form"] > .umo-form__buttons > input.umo-ui {
	margin: 0 1em;
}
[data-ui="umo-form"] > .form-subdata {
	display: block;
	margin: 20px 0 0 0;
	padding: 5px;
	border: #dddddd 1px solid;
}