textarea {
  @include ignore-device-rendering();
  outline: none;
  border: $default-border-width-thin solid var(--color-ui-2-50);
  border-radius: 0.13rem;
  line-height: 2.13rem;
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: 100%;
  min-height: 10rem;
}

textarea:hover {
  border-color: var(--color-ui-2);
}

textarea:focus {
  box-shadow: 0 0 0 0.25rem var(--color-focus-80);
  border-color: var(--color-focus);
}

textarea:invalid {
  border-color: var(--color-warning);
}

textarea:focus:invalid {
  box-shadow: 0 0 0 0.25rem var(--color-warning-50);
}