/*
 * umo-ui
 * Copyright (C) 2019 Wangrove Inc <wangrove.co.jp>. All Rights Reserved.
 */

:root {
  --umo-ui-size: 1.8rem;
  --umo-ui-toggle-size: 1.2rem;
  --umo-ui-border: #bbbbbb 1px solid;
  --umo-ui-border-color: #bbbbbb;
  --umo-ui-border-color-dark: #666666;
  --umo-ui-border-radius: 4px;
  --umo-ui-hover-background-color: #f8f8f8;
  --umo-ui-hover-border-color: #66bbee;
  --umo-ui-focus-background-color: #f8f8f8;
  --umo-ui-focus-border-color: #66bbee;
  --umo-ui-disable-background-color: #f0f0f0;
  --umo-ui-disable-color: #333333;
}

/*
標準スタイル
*/
.umo-ui {
	display: inline-block;
	box-sizing: border-box;
	min-height: var(--umo-ui-size);
	margin: 0;
	padding: 0;
	/*line-height: var(--umo-ui-size);*/
	line-height: 1.2;
	vertical-align: middle;
	font-size: 1rem;
	font-family: inherit;
}
.umo-ui.-mline {
	word-break: break-all;
	white-space: pre-wrap;
	/*height: auto;*/
	line-height: 1.2em;
}
.umo-ui.-row {
	display: block;
}
.umo-ui.-row + .umo-ui.-row {
	margin-top: 5px;
}

/*
入力フィールド（共通）
<input type="text" class="umo-ui">
*/
input.umo-ui {
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	border: var(--umo-ui-border-color) 1px solid;
	border-radius: var(--umo-ui-border-radius) ;
}
input.umo-ui.-spin[type='number'] {
	padding-right: 0;
}
input.umo-ui[type='number']:not(.-spin)::-webkit-outer-spin-button,
input.umo-ui[type='number']:not(.-spin)::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input.umo-ui[type='number']:not(.-spin) {
    -moz-appearance: textfield;
}
input.umo-ui:disabled {
	background-color: var(--umo-ui-disable-background-color);
	color: var(--umo-ui-disable-color);
}
/*
入力フィールド（サイズ小）
<input type="text" class="umo-ui -short">
*/
input.umo-ui.-short {
	width: 5rem;
	max-width: 100%;
}
/*
入力フィールド（サイズ中）
<input type="text" class="umo-ui -middle">
*/
input.umo-ui.-middle {
	width: 10rem;
	max-width: 100%;
}
/*
入力フィールド（サイズ大）
<input type="text" class="umo-ui -large">
*/
input.umo-ui.-large {
	width: 20rem;
	max-width: 100%;
}
/*
入力フィールド（サイズ最大）
<input type="text" class="umo-ui -max">
*/
input.umo-ui.-max {
	width: 100%;
}

/*
ボタン（通常）
<button type="***" class="umo-ui">***</button>
*/
button.umo-ui,
input[type="button"].umo-ui,
input[type="submit"].umo-ui {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--umo-ui-size);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	background: linear-gradient(to bottom, rgb(244,244,244), rgb(214,214,214));
	border: var(--umo-ui-border-color) 1px solid;
	word-break: keep-all;
	line-height: 1;
	cursor: pointer;
}

/*
ボタン（サブミット用）
<button type="***" class="umo-ui -submit">***</button>
*/
button.umo-ui.-submit,
input[type='submit'].umo-ui {
}

/*
ボタン（参照用）
<button type="***" class="umo-ui -reference">***</button>
*/
button.umo-ui.-reference {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}
button.umo-ui.-reference > span {
	vertical-align: middle;
	font-size: 0.8rem;
}

/*
チェックボックス
<input type="checkbox" class="umo-ui">
ex.
<label><input type="checkbox" class="umo-ui">***</lable>
*/
input.umo-ui[type='checkbox'] {
    width: var(--umo-ui-toggle-size);
    height: var(--umo-ui-toggle-size);
    margin-right: 0.1rem;
    margin-bottom: 0.25rem;
	cursor: pointer;
}

/*
ラジオボタン
<input type="radio" class="umo-ui">
<label class="umo-ui"><input type="radio"></label>
ex.
<lable><input type="radio" class="umo-ui">***</lable>
*/
label.umo-ui {
	white-space: nowrap;
	cursor: pointer;
}
label.umo-ui:hover {
	/*outline: var(--umo-ui-hover-border-color) 1px solid;*/
}
label.umo-ui > input.umo-ui[type='radio'] {
    width: var(--umo-ui-toggle-size);
	min-width: unset;
	max-width: unset;
    height: var(--umo-ui-toggle-size);
	min-height: unset;
	max-height: unset;
    margin-bottom: 0.1rem;
	flex-shrink: 0;
	flex-grow: 0;
}
label.umo-ui > input.umo-ui[type='radio'] + span {
	display: inline-block;
    margin-left: 0.2em;
	padding-top: 0.1em;
	min-height: 1em;
	line-height: 1;
}

/*
ファイル選択
<input type="file" class="umo-ui">
*/
input.umo-ui[type='file'] {
}

/*
カラー選択
<input type="color" class="umo-ui">
*/
input.umo-ui[type='color'] {
	cursor: pointer;
}

/*
プルダウン
<select class="umo-ui">
	<option value="***">***</option>
	...
</select>
*/
select.umo-ui {
	height: var(--umo-ui-size);
	padding-left: 0.2rem;
	padding-right: 0;
	border: var(--umo-ui-border-color) 1px solid;
	border-radius: var(--umo-ui-border-radius);
	cursor: pointer;
}
select.umo-ui:disabled {
	background-color: var(--umo-ui-disable-background-color);
	color: var(--umo-ui-disable-color);
}

/*
テキストエリア
<textarea class="umo-ui"></textarea>
*/
textarea.umo-ui {
	display: inline-block;
	height: auto;
	box-sizing: border-box;
	margin: 0;
	padding: 0.1rem 0.2rem;
	line-height: 1.4rem;
	font-size: 1rem;
	word-break: break-all;
	border: var(--umo-ui-border-color) 1px solid;
}

/*
ラベル
<label class="umo-ui">***</label>
*/
label.umo-ui {
}

/*
コンテナ
<div class="umo-ui"></div>
<p class="umo-ui"></p>
*/
div.umo-ui,
p.umo-ui {
	line-height: 1rem;
}

/*
アイコン用
*/
i.umo-ui {
	width: var(--umo-ui-size);
    background-repeat: no-repeat;
	background-size: 1rem;
	background-position: center center;
}
i.umo-ui.full {
	background-size: contain;
}
i.umo-ui svg {
	fill: currentColor;
}
i.umo-ui circle {
	fill: currentColor;
}

/*
共通
*/
input.umo-ui:hover,
select.umo-ui:hover,
button.umo-ui:hover,
textarea.umo-ui:hover {
	border-color: var(--umo-ui-hover-border-color);
}
input.umo-ui:focus,
select.umo-ui:focus,
button.umo-ui:focus,
textarea.umo-ui:focus {
	border-color: var(--umo-ui-hover-border-color);
	box-shadow: var(--umo-ui-hover-border-color) 0 0 3px 0;
	outline: none;
}
input.umo-ui:active,
select.umo-ui:active,
button.umo-ui:active,
textarea.umo-ui:active {
	border-color: var(--umo-ui-hover-border-color);
	box-shadow: var(--umo-ui-hover-border-color) 0 0 3px 0;
	outline: none;
}