.varClass {
  /* textarea default variables */
  --textarea_border_width: 0;
  --textarea_border_color: none;
  --textarea_cursor: text;
  --textarea_text_color: var(--zdt_textarea_default_text);
  --textarea_font_size: var(--zd_font_size14);
  --textarea_line_height: 1.5712;
  --textarea_padding: var(--zd_size2) 0;
  --textarea_height: auto;
  --textarea_width: auto;

  /* textarea placeholder default variable */
  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
}
.basic {
  composes: varClass;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  letter-spacing: 0.1px;
  color: var(--textarea_text_color);
  cursor: var(--textarea_cursor);
}
.basic, .noBorder {
  border-width: var(--textarea_border_width);
}
.basic::placeholder {
  color: var(--textarea_placeholder_text_color);
}
.basic::-webkit-placeholder {
  color: var(--textarea_placeholder_text_color);
}
.basic::-moz-placeholder {
  color: var(--textarea_placeholder_text_color);
}
.basic::-ms-placeholder {
  color: var(--textarea_placeholder_text_color);
}
.basic:disabled {
  --textarea_cursor: not-allowed;
  --textarea_text_color: var(--zdt_textarea_default_text);
}
.readonly {
  --textarea_cursor: not-allowed;
}
.resizeX {
  composes: resizeX from '../common/common.module.css';
}
.resizeY {
  composes: resizeY from '../common/common.module.css';
}
.noresize {
  composes: resizenone from '../common/common.module.css';
}
.resizeboth {
  composes: resizeboth from '../common/common.module.css';
}
/* css:lineheight-validation:ignore */
.container {
  composes: basic;
  transition: border var(--zd_transition2) linear 0s,
    height var(--zd_transition2) linear 0s;
  -moz-transition: border var(--zd_transition2) linear 0s,
    height var(--zd_transition2) linear 0s;
  width: var(--textarea_width);
  max-width: 100% ;
  min-width: var(--zd_size100) ;
  font-size: var(--textarea_font_size);
  line-height: var(--textarea_line_height);
  height: var(--textarea_height);
  -webkit-transition: border var(--zd_transition2) linear 0s,
    height var(--zd_transition2) linear 0s;
  border-style: solid;
  background-color: var(--zdt_textarea_default_bg);
  border-color: var(--textarea_border_color);
  padding: var(--textarea_padding);
}
.needBorder {
  --textarea_border_width: 0 0 1px 0;
}
.borderColor_transparent {
  --textarea_border_color: var(--zdt_textarea_transparent_border);
}
.borderColor_default {
  --textarea_border_color: var(--zdt_textarea_default_border);
}
.effect:hover {
  --textarea_border_color: var(--zdt_textarea_hover_border);
}
.effect:focus,.effect.active {
  --textarea_border_color: var(--zdt_textarea_focus_border);
}

.defaultHeight{
  --textarea_height: var(--zd_size30);
} 
.defaultWidth {
  --textarea_width: 100%;
}
.xsmall,
.xmedium {
  vertical-align: middle;
}
.xsmall {
  --textarea_font_size: var(--zd_font_size14);
  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
  --textarea_height: var(--zd_size28);
  --textarea_line_height: 1.3572;
}
.xmedium {
  --textarea_font_size: var(--zd_font_size13);
  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
  --textarea_height: var(--zd_size25);
  --textarea_line_height: 1.3077;
}
 .small{
  --textarea_height: var(--zd_size30);
  --textarea_padding: var(--zd_size2) 0;
}
.smallanimated:focus,
.xsmallanimated:focus,
.xmediumanimated:focus {
  --textarea_height: var(--zd_size70);
}
.medium {
  --textarea_height: var(--zd_size88);
  --textarea_padding: var(--zd_size2);
}
.large {
  --textarea_height: var(--zd_size45);
  --textarea_padding: var(--zd_size2);
}
.largeanimated:focus {
  --textarea_height: var(--zd_size220);
}
.xlarge {
  --textarea_height: var(--zd_size184);
}
.default {
  font-family: var(--zd_regular);
  --textarea_text_color: var(--zdt_textarea_black_text);
}
.primary {
  composes: semibold from '../common/common.module.css';
  --textarea_text_color: var(--zdt_textarea_black_text);
}