/* https://codepen.io/fatmali/pen/aboNdra
  Example:
<div class="textarea-text-group">
    <label class="textarea-text-underlined">
        <textarea required></textarea>
        <span class="textarea-text-label"></span>
        <span class="textarea-text-helper"></span>
    </label>
</div>

  "textarea-text-danger" and "disabled" are optional!!
*/

:root {
  --color-bg: #ffffff;
  --color-bg-hover: #00669920;
  --color-text: rgba(19, 19, 21, 0.6);
  --color-text-focus: #006699;
  --color-line: rgba(19, 19, 21, 0.6);
  --color-line-focus: #006699;
  --color-line-hover: #121212;
  --color-danger: #b50706;
  --color-disabled: #eff1f2;
  --color-disabled-text: rgba(60, 60, 67, 0.3);
}

/* Root div */
div.textarea-text-group {
  margin: 0rem;
  position: relative;
  padding: 0.5rem;
}

/* textarea
*  the rem unit is crazy, it has different result when it is used as "border: 0.125rem" and "border-bottom: 0.125rem"
*/
.textarea-text-underlined > textarea {
  background: var(--color-bg);
  border: 0.150rem solid var(--color-line);
  width: -webkit-fill-available;
  height: 3rem;
  font-size: 1.2rem;
  padding: 1.5rem 0.5rem 0.5rem 0.5rem;
  line-height: 150%;
}

.textarea-text-underlined > textarea:focus {
	outline: none;
}

.textarea-text-underlined > textarea:hover {
	background: var(--color-bg-hover);
	border-color: var(--color-line-hover);
}

.textarea-text-underlined:not(.textarea-text-danger) > textarea:focus + .textarea-text-label {
	color: var(--color-text-focus);
}

.textarea-text-underlined:not(.textarea-text-danger) > textarea:focus {
	border-color: var(--color-line-focus);
}

/* Label */
.textarea-text-underlined > .textarea-text-label {
	position: absolute;
	top: 0.9375rem;
	left: 0.875rem;
	line-height: 150%;
	color: var(--color-text);
	transition: top .2s;
	font-size: 1.4rem;
}

.textarea-text-underlined > textarea:focus + .textarea-text-label,
.textarea-text-underlined > textarea:valid + .textarea-text-label {
	top: 0.5rem;
	font-size: 1.1375rem;
}

/* Helper */
.textarea-text-underlined > .textarea-text-helper {
	font-size: 1.1rem;
	color: var(--color-text);
	letter-spacing: 0.0275rem;
	margin: 0.125rem 0.875rem;
}

/** DANGER **/
.textarea-text-underlined.textarea-text-danger > .textarea-text-label,
.textarea-text-underlined.textarea-text-danger > .textarea-text-helper {
	color: var(--color-danger);
}

.textarea-text-danger > textarea {
	border-color: var(--color-danger);
}

/** DISABLED **/
.textarea-text-underlined > textarea:disabled {
	background: var(--color-disabled);
	border-color: var(--color-line);
	cursor: not-allowed;
}

.textarea-text-underlined > textarea:disabled + .textarea-text-label,
.textarea-text-underlined > textarea:disabled ~ .textarea-text-helper {
	color: var(--color-disabled-text);
}