.widthTemp {
  width: var(--lib_size_400) !important;
}

.roundedCorner {
  border-radius: 4px;
}

.size_sm {
  height: var(--lib_size_25);
  composes: widthTemp;
}
.size_sm.animateOnFocus:focus{
  height: var(--lib_size_25);
}
.size_md {
  height: var(--lib_size_75);
  composes: widthTemp;
}
.size_md.animateOnFocus{
  height: var(--lib_size_25);
}
.size_md.animateOnFocus:focus{
  height: var(--lib_size_75);
}
.size_lg {
  height: var(--lib_size_150);
  composes: widthTemp;
}
.size_lg.animateOnFocus{
  height: var(--lib_size_25);
}
.size_lg.animateOnFocus:focus{
  height: var(--lib_size_150);
}

.base {
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border-width: 0;
  border: 1px solid var(--lib_base_textarea_base_border);
  margin: var(--lib_size_5);
  padding: var(--lib_size_4);
}

.base:hover, .base:focus {
  border-color: var(--lib_base_textarea_base_hover_border);
}
.base::placeholder,
.base.disabled {
  opacity: 0.5;
}
.disabled:hover {
  border-color: var(--lib_base_textarea_disabled_hover_border);
}

.outline{
  composes: roundedCorner;
}

.flushed{
  border-width: 0 0 1px;
}

.plain {
  border: 0;
}

.filled{
  composes: roundedCorner;
  composes: plain;
  background-color: var(--lib_base_textarea_filled_bg);
}
.filled:hover{
  background-color: var(--lib_base_textarea_filled_hover_bg)
}

/*---colors---*/
.default{
  border-color: var(--lib_base_textarea_default_border);
}
.default:hover, .default:focus {
  border-color: var(--lib_base_textarea_default_hover_border);
}

.primary{
  border-color: var(--lib_base_textarea_primary_border);
}
.primary:hover, .primary:focus {
  border-color: var(--lib_base_textarea_primary_hover_border);
}

.danger{
  border-color: var(--lib_base_textarea_danger_border);
}
.danger:hover, .danger:focus {
  border-color: var(--lib_base_textarea_danger_hover_border);
}

.disabled {
  cursor: not-allowed;
}

.resize_horizontal {
  resize: horizontal;
}
.resize_vertical {
  resize: vertical;
}
.resize_none {
  resize: none;
}
.resize_both {
  resize: both;
}

.animateOnFocus{
  transition: border 0.2s ease-in 0s,
    height 0.2s ease-in 0s;
  -moz-transition: border 0.2s ease-in 0s,
    height 0.2s ease-in 0s;
  -webkit-transition: border 0.2s ease-in 0s,
    height 0.2s ease-in 0s;
}

.base:required {
  border-color: var(--lib_base_textarea_danger_border);
}


