* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-textarea-margin: (<length-percentage>+) Controls the outer margin of the textarea host.
 * @prop --tct-textarea-margin-top: (<length-percentage>) Controls the top margin of the textarea host when --tct-textarea-margin is not set.
 * @prop --tct-textarea-margin-bottom: (<length-percentage>) Controls the bottom margin of the textarea host when --tct-textarea-margin is not set.
 * @prop --tct-textarea-padding: (<length-percentage>+) Controls the inner padding of the textarea element.
 * @prop --tct-textarea-font-color: (<color>) Controls the text color of the textarea content.
 * @prop --tct-textarea-font-size?: (<length-percentage>) Controls the optional font size of the textarea content.
 * @prop --tct-textarea-font-weight: (<number>) Controls the font weight of the textarea content.
 * @prop --tct-textarea-background: (<color>) Controls the background color of the textarea in its default state.
 * @prop --tct-textarea-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in its default state.
 * @prop --tct-textarea-border-color: (<color>) Controls the border color of the textarea in its default state.
 * @prop --tct-textarea-border-top-width: (<length>) Controls the top border width of the textarea.
 * @prop --tct-textarea-border-right-width: (<length>) Controls the right border width of the textarea.
 * @prop --tct-textarea-border-bottom-width: (<length>) Controls the bottom border width of the textarea.
 * @prop --tct-textarea-border-left-width: (<length>) Controls the left border width of the textarea.
 * @prop --tct-textarea-border-top-left-radius: (<length-percentage>) Controls the top-left corner radius of the textarea.
 * @prop --tct-textarea-border-top-right-radius: (<length-percentage>) Controls the top-right corner radius of the textarea.
 * @prop --tct-textarea-border-bottom-right-radius: (<length-percentage>) Controls the bottom-right corner radius of the textarea.
 * @prop --tct-textarea-border-bottom-left-radius: (<length-percentage>) Controls the bottom-left corner radius of the textarea.
 * @prop --tct-textarea-box-shadow?: (*) Controls the optional box shadow of the textarea in its default state.
 * @prop --tct-textarea-min-height: (<length>) Controls the minimum height of the textarea.
 * @prop --tct-textarea-min-width: (<length>) Controls the minimum width of the textarea.
 * @prop --tct-textarea-tween: (*) Controls the transition timing of textarea state changes (background, border, etc.).
 * @prop --tct-textarea-placeholder-font-color: (<color>) Controls the placeholder text color of the textarea.
 * @prop --tct-textarea-disabled-opacity: (<number>) Controls the opacity of the textarea when disabled.
 * @prop --tct-textarea-disabled-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea when disabled.
 * @prop --tct-textarea-hover-background: (<color>) Controls the background color of the textarea on hover.
 * @prop --tct-textarea-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea on hover.
 * @prop --tct-textarea-hover-border-color: (<color>) Controls the border color of the textarea on hover.
 * @prop --tct-textarea-hover-box-shadow: (*) Controls the box shadow of the textarea on hover.
 * @prop --tct-textarea-hover-ring-color?: (<color>) Controls the optional outer ring color of the textarea hover effect.
 * @prop --tct-textarea-hover-label-font-color?: (<color>) Controls the optional label text color when the textarea is hovered.
 * @prop --tct-textarea-focus-background: (<color>) Controls the background color of the textarea on focus.
 * @prop --tct-textarea-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea on focus.
 * @prop --tct-textarea-focus-border-color: (<color>) Controls the border color of the textarea on focus.
 * @prop --tct-textarea-focus-box-shadow: (*) Controls the box shadow of the textarea on focus.
 * @prop --tct-textarea-focus-label-font-color?: (<color>) Controls the optional label text color when the textarea is focused.
 * @prop --tct-textarea-error-background: (<color>) Controls the background color of the textarea in the error state.
 * @prop --tct-textarea-error-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in the error state.
 * @prop --tct-textarea-error-border-color: (<color>) Controls the border color of the textarea in the error state.
 * @prop --tct-textarea-error-box-shadow?: (*) Controls the optional box shadow of the textarea in the error state.
 * @prop --tct-textarea-error-label-font-color?: (<color>) Controls the optional label text color in the error state.
 * @prop --tct-textarea-error-focus-background: (<color>) Controls the background color of the textarea in the error+focus state.
 * @prop --tct-textarea-error-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in the error+focus state.
 * @prop --tct-textarea-error-focus-border-color: (<color>) Controls the border color of the textarea in the error+focus state.
 * @prop --tct-textarea-error-focus-box-shadow: (*) Controls the box shadow of the textarea in the error+focus state.
 * @prop --tct-textarea-error-focus-label-font-color?: (<color>) Controls the optional label text color in the error+focus state.
 * @prop --tct-textarea-error-hover-background: (<color>) Controls the background color of the textarea in the error+hover state.
 * @prop --tct-textarea-error-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in the error+hover state.
 * @prop --tct-textarea-error-hover-border-color: (<color>) Controls the border color of the textarea in the error+hover state.
 * @prop --tct-textarea-error-hover-box-shadow: (*) Controls the box shadow of the textarea in the error+hover state.
 * @prop --tct-textarea-error-hover-label-font-color?: (<color>) Controls the optional label text color in the error+hover state.
 * @prop --tct-textarea-label-font-color?: (<color>) Controls the optional text color of the textarea label.
 * @prop --tct-textarea-label-font-size?: (<length-percentage>) Controls the optional font size of the textarea label.
 * @prop --tct-textarea-label-font-weight: (<number>) Controls the font weight of the textarea label.
 * @prop --tct-textarea-label-letter-spacing?: (<length>) Controls the optional letter spacing of the textarea label.
 * @prop --tct-textarea-label-text-transform?: (<custom-ident>) Controls the optional text transform of the textarea label.
 * @prop --tct-textarea-label-padding: (<length-percentage>+) Controls the inner padding of the textarea label.
 * @prop --tct-textarea-label-margin: (<length-percentage>+) Controls the outer margin of the textarea label.
 * @prop --tct-textarea-label-optional-margin: (<length-percentage>+) Controls the outer margin of the "(optional)" indicator next to the label.
 * @prop --tct-textarea-label-optional-font-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
 * @prop --tct-textarea-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
 * @prop --tct-textarea-label-optional-font-weight: (<number>) Controls the font weight of the "(optional)" indicator next to the label.
 * @prop --tct-textarea-icon-stroke-primary: (<color>) Controls the primary stroke color of icons inside the textarea.
 * @prop --tct-textarea-message-box-shadow: (*) Controls the box shadow of the textarea messages container.
 * @prop --tct-textarea-messages-font-color?: (<color>) Controls the optional text color of the textarea messages container.
 * @prop --tct-textarea-messages-margin-top: (<length-percentage>) Controls the top margin of the textarea messages container.
 * @prop --tct-textarea-messages-tween: (*) Controls the transition timing of the textarea messages container.
 * @prop --tct-textarea-max-length-color: (<color>) Controls the text color of the max-length counter.
 * @prop --tct-textarea-max-length-font-size: (<length-percentage>) Controls the font size of the max-length counter.
 * @prop --tct-textarea-resize-btn-background?: (<color>) Controls the optional background color of the resize handle button.
 * @prop --tct-textarea-resize-btn-height: (<length>) Controls the height of the resize handle button.
 * @prop --tct-textarea-resize-btn-width: (<length>) Controls the width of the resize handle button.
 * @prop --tct-textarea-resize-color: (<color>) Controls the stroke color of the resize handle icon.
 * @prop --tct-textarea-resize-icon-size: (<length>) Controls the size of the resize handle icon.
 * @prop --tct-textarea-resize-icon-padding: (<length-percentage>) Controls the padding around the resize handle icon.
 * @prop --tct-textarea-resize-stroke-width: (<number>) Controls the stroke width of the resize handle icon.
 * @prop --tct-textarea-resize-right: (<length-percentage>) Controls the right offset of the resize handle button.
 * @prop --tct-textarea-resize-bottom: (<length-percentage>) Controls the bottom offset of the resize handle button.
 */
:host {
  --comp-default-textarea-margin: var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));
  display: block;
  margin: var(--tct-textarea-margin, var(--comp-default-textarea-margin));
  font-size: var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));
  font-weight: var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400));
}

:host([hidden]) {
  display: none;
}

label {
  --comp-label-padding: var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));
  --comp-label-margin: var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));
  display: block;
  padding: var(--comp-label-padding);
  margin: var(--comp-label-margin);
  color: var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));
  font-size: var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));
  font-weight: var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));
  text-transform: var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));
  letter-spacing: var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, inherit));
  transition: color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
}
.has-error label {
  color: var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)));
}
:hover label {
  color: var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
}
.has-error :hover label {
  color: var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))));
}
:host(:focus-within) label {
  color: var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
}
:host(:focus-within) .has-error label {
  color: var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))));
}

.optional-tag {
  --comp-label-optional-margin: var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));
  margin: var(--comp-label-optional-margin);
  color: var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
  font-size: var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, var(--const-px-12, 12px)));
  font-weight: var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400));
}

.input-container {
  min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
  height: 100%;
  --comp-default-border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 4px));
  --comp-textarea-border-top-left-radius: var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));
  --comp-textarea-border-top-right-radius: var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));
  --comp-textarea-border-bottom-right-radius: var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));
  --comp-textarea-border-bottom-left-radius: var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));
  --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)
      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)
      var(--comp-textarea-border-bottom-left-radius);
  --comp-textarea-border-width: var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));
  --comp-textarea-icon-clearance: 34px;
}
:host([disabled]) .input-container {
  cursor: not-allowed;
  opacity: var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
  backdrop-filter: var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter));
}

.content-container {
  --comp-textarea-min-height: 46px;
  --comp-textarea-min-width: 150px;
  position: relative;
  display: inline-block;
  min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
  min-width: var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)));
}
:host(:not([cols])) .content-container {
  width: 100%;
}

textarea {
  --comp-textarea-padding: var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));
  --comp-textarea-backdrop-filter: var(--tct-textarea-backdrop-filter, none);
  --comp-textarea-border-color: var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));
  --comp-textarea-background: var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));
  --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);
  --comp-textarea-hover-ring: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);
  font-size: var(--tct-textarea-font-size, inherit);
  resize: none;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
  padding: var(--comp-textarea-padding);
  backdrop-filter: var(--comp-textarea-backdrop-filter);
  background: var(--comp-textarea-background);
  color: var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));
  border-width: var(--comp-textarea-border-width);
  border-style: solid;
  border-color: var(--comp-textarea-border-color);
  border-radius: var(--comp-textarea-border-radius);
  box-shadow: var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));
  scrollbar-width: thin;
  scrollbar-color: var(--t-a11y-gray-color) transparent;
  --comp-textarea-tween: var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
  transition: background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween);
}
textarea::-webkit-scrollbar {
  width: var(--app-scale-1x);
  height: var(--app-scale-1x);
  margin: var(--app-scale-1x);
}
textarea::-webkit-scrollbar-thumb {
  background: var(--t-a11y-gray-color);
  border-radius: 2px;
}
textarea::-webkit-scrollbar-track {
  background: transparent;
}
textarea:not([cols]) {
  width: 100%;
}
.has-error textarea {
  padding-right: var(--comp-textarea-icon-clearance);
  backdrop-filter: var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));
  border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));
  background: var(--tct-textarea-error-background, var(--comp-textarea-background));
  box-shadow: var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)));
}
textarea:hover {
  border-color: var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));
  backdrop-filter: var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));
  background: var(--tct-textarea-hover-background, var(--comp-textarea-background));
  box-shadow: var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring));
}
.has-error textarea:hover {
  border-color: var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));
  backdrop-filter: var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));
  background: var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));
  box-shadow: var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))));
}
textarea:focus {
  border-color: var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));
  backdrop-filter: var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));
  background: var(--tct-textarea-focus-background, var(--comp-textarea-background));
}
.has-error textarea:focus {
  border-color: var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));
  backdrop-filter: var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));
  background: var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));
  box-shadow: var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))));
}
textarea:focus-visible {
  box-shadow: var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring));
}
textarea::placeholder {
  color: var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));
}
textarea[disabled] {
  cursor: not-allowed;
}
textarea.resize-vertical-auto {
  overflow: hidden;
}
.has-error textarea {
  padding-right: var(--comp-textarea-icon-clearance);
}
.has-error textarea:not(:focus) {
  border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));
}

q2-icon {
  margin-top: calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);
  margin-bottom: calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);
  pointer-events: none;
  position: absolute;
  top: var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));
  color: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
  right: 0;
  margin-right: var(--tct-scale-2x, var(--app-scale-2x, 10px));
  --tct-icon-stroke-primary: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
  --t-icon-stroke-primary: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
}

.icon-error {
  color: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
  --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
  --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
}

.messages-container {
  height: 0px;
  overflow: hidden;
  background: var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
  box-shadow: var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));
  transition: height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
  margin-top: var(--tct-textarea-messages-margin-top, 2px);
  z-index: 1;
  position: absolute;
  width: 100%;
  color: var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit));
}

.max-length {
  color: var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
  font-size: var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, var(--const-px-12, 12px)))));
  position: absolute;
  right: 0;
}

.btn-resize {
  --tct-textarea-resize-icon-padding: calc(
      calc(
              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))
          ) / 2
  );
  width: var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));
  height: var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));
  background: var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));
  stroke: var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
  stroke-width: var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));
  border: 0;
  position: absolute;
  right: var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));
  bottom: var(--tct-textarea-resize-bottom, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));
  display: block;
  padding: var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));
  font-size: 0;
}
.btn-resize:focus {
  outline: none;
  box-shadow: none;
}
:host([resize=both]) .btn-resize {
  cursor: se-resize;
}
:host([resize=vertical]) .btn-resize, :host([resize=vertical-auto]) .btn-resize {
  cursor: s-resize;
}
:host([resize=horizontal]) .btn-resize {
  cursor: e-resize;
}