.ty-textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--ty-input-color, var(--ty-color-text));
  border: 1px solid var(--ty-input-border);
  transition: all 0.3s;
  outline: 0;
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
  background-color: var(--ty-input-bg, var(--ty-color-bg-container));
  box-shadow: var(--ty-input-shadow, none);
}
.ty-textarea:hover {
  border-color: var(--ty-input-border-hover, var(--ty-color-primary));
}
.ty-textarea:focus {
  border-color: var(--ty-input-border-focus, var(--ty-color-primary));
  box-shadow: var(--ty-input-shadow-focus, var(--ty-shadow-focus));
}
.ty-textarea::-moz-placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-textarea::placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-textarea {
  padding: var(--ty-textarea-padding);
  overflow: auto;
  resize: none;
}
.ty-textarea_disabled {
  cursor: not-allowed;
  background-color: var(--ty-input-bg-disabled, var(--ty-color-bg-disabled));
  color: var(--ty-input-text-disabled, var(--ty-color-text-quaternary));
}
.ty-textarea_disabled:hover {
  border-color: var(--ty-input-border);
}
.ty-textarea-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.ty-textarea-container_with-footer .ty-textarea {
  display: block;
  padding-bottom: var(--ty-textarea-padding-bottom-with-counter);
}
.ty-textarea-container_with-custom-resize .ty-textarea {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-bottom: max(var(--ty-textarea-padding-bottom-with-counter), 26px);
}
.ty-textarea-container__footer {
  position: absolute;
  bottom: 1px;
  left: var(--ty-textarea-counter-offset-inline-end);
  right: 1px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: none;
}
.ty-textarea-container__counter {
  font-size: 12px;
  color: color-mix(in srgb, var(--ty-textarea-counter-color) 88%, transparent);
  line-height: 1.1;
  margin-right: auto;
  white-space: nowrap;
}
.ty-textarea-container__resize-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: ns-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: auto;
  flex: none;
  color: color-mix(in srgb, var(--ty-color-text-tertiary, #999) 92%, transparent);
  opacity: 0.82;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.ty-textarea-container__resize-handle:hover {
  color: var(--ty-color-text-secondary, #666);
  opacity: 1;
}
.ty-textarea-container__resize-handle svg {
  display: block;
}