.widthTemp {
  width: 400px !important;
}

.roundedCorner {
  border-radius: 4px;
}

.size_sm {
  height: 25px;
  composes: widthTemp;
}
.size_sm.animateOnFocus:focus{
  height: 25px;
}
.size_md {
  height: 75px;
  composes: widthTemp;
}
.size_md.animateOnFocus{
  height: 25px;
}
.size_md.animateOnFocus:focus{
  height: 75px;
}
.size_lg {
  height: 150px;
  composes: widthTemp;
}
.size_lg.animateOnFocus{
  height: 25px;
}
.size_lg.animateOnFocus:focus{
  height: 150px;
}

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

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

.outline{
  composes: roundedCorner;
}

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

.plain {
  border: 0;
}

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

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

.primary{
  border-color: var(--lib_textarea_primary_bdr_clr);
}
.primary:hover,
.primary:focus {
  border-color: var(--lib_textarea_primary_hover_bdr_clr);
}

.danger{
  border-color: var(--lib_textarea_danger_bdr_clr);
}
.danger:hover,
.danger:focus {
  border-color: var(--lib_textarea_danger_hover_bdr_clr);
}

.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;
  -webkit-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;
}

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


