components/Input/TextArea/styles.scss
.text-area {
display: flex;
flex-direction: column;
.input {
outline: none;
border: 0;
border-bottom: var(--width-separator-thin) solid var(--color-separator);
background-color: transparent;
padding: var(--spacing-extra-small) 0;
color: var(--color-text);
font-family: inherit;
font-size: inherit;
&::placeholder {
color: var(--color-text-disabled);
}
&:hover {
border-bottom-color: var(--color-separator-hover);
}
&:focus {
border-bottom-color: var(--color-accent);
}
}
&.error {
.input {
border-bottom-color: var(--color-danger);
}
}
&.disabled {
.input {
border-bottom-color: var(--color-separator);
color: var(--color-text-disabled);
}
}
}