/**
 * 將 <input> 或是 <textarea> 放在 <div class="input-hint"> 裏面
 * 將 <label> 放在 <input> 或是 <textarea> 底下
 * Sample:
 * <div class="uk-form-controls input-hint">
 *   <input class="uk-input" name="mima" id="mima" type="password" placeholder="請輸入密碼" autocomplete="off" />
 *   <label for="mima">密碼</label>
 * </div>
*/

.input-hint {
	position: relative;
	margin-bottom: 1rem;
}
.input-hint > input,
.input-hint > textarea,
.input-hint > label {
	/*padding: var(--input-padding-y) var(--input-padding-x);*/
	/*height: auto;*/
}
.input-hint > label {
	display: none;
	position: absolute;
	top: -10px;
	left: 10px;
	line-height: 1.5;
	width: auto;
	margin: 0;
	font-size: .75rem;
	color: #777;
	background-color: #fff;
	padding: 0px 10px;
}

.input-hint input:not(:placeholder-shown),
.input-hint textarea:not(:placeholder-shown),
.input-hint input:focus,
.input-hint textarea:focus {
	padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
	padding-bottom: calc(var(--input-padding-y) / 3);
}
.input-hint input:not(:placeholder-shown) ~ label,
.input-hint input:focus ~ label,
.input-hint textarea:not(:placeholder-shown) ~ label,
.input-hint textarea:focus ~ label {
	display: block;
	color: #000000;
	padding-top: calc(var(--input-padding-y) / 3);
	padding-bottom: calc(var(--input-padding-y) / 3);
}

/* 將 placeholder 文字隱藏 */
.input-hint input:focus::-webkit-input-placeholder,
.input-hint textarea:focus::-webkit-input-placeholder {
	color:transparent; opacity: 1;
}
.input-hint input:focus:-moz-placeholder,
.input-hint textarea:focus:-moz-placeholder {
	color:transparent;
} /* FF 4-18 */
.input-hint input:focus::-moz-placeholder,
.input-hint textarea:focus::-moz-placeholder {
	color:transparent;
} /* FF 19+ */
.input-hint input:focus:-ms-input-placeholder,
.input-hint textarea:focus:-ms-input-placeholder {
	color:transparent;
} /* IE 10+ */

.input-hint > textarea,
.input-hint textarea:focus,
.input-hint > textarea.uk-textarea
{
	padding-top: 8px;
	padding-bottom: 8px;
}