@value (var-in-mobile) from "~@xo-union/tk-ui-breakpoints/lib/variables.css";
@value (varFontSize100, varLineHeight100, varFontSize200, varLineHeight200, varFontSize300, varLineHeight300, varFontSize400, varLineHeight400, varFontSize450, varLineHeight450, varFontSize500, varLineHeight500, varFontSize600, varLineHeight600, varFontSize700, varLineHeight700, varFontSize800, varLineHeight800, varFontSize900, varLineHeight900, var-hero-xl-letter-spacing, var-hero-xl-font-weight, var-hero-xl-font-family, var-hero-xl-font-size, var-hero-xl-line-height, var-hero-lg-letter-spacing, var-hero-lg-font-weight, var-hero-lg-font-family, var-hero-lg-font-size, var-hero-lg-line-height, var-hero-md-letter-spacing, var-hero-md-font-weight, var-hero-md-font-family, var-hero-md-font-size, var-hero-md-line-height, var-hero-sm-letter-spacing, var-hero-sm-font-weight, var-hero-sm-font-family, var-hero-sm-font-size, var-hero-sm-line-height, var-h1-font-weight, var-h1-font-family, var-h1-font-size, var-h1-line-height, var-h2-font-weight, var-h2-font-family, var-h2-font-size, var-h2-line-height, var-h3-letter-spacing, var-h3-font-weight, var-h3-font-family, var-h3-font-size, var-h3-line-height, var-h4-letter-spacing, var-h4-font-weight, var-h4-font-family, var-h4-font-size, var-h4-line-height, var-subhead-letter-spacing, var-subhead-font-family, var-subhead-font-size, var-subhead-line-height, var-editorial-letter-spacing, var-editorial-font-family, var-editorial-font-size, var-editorial-line-height, var-body1-letter-spacing, var-body1-font-family, var-body1-font-size, var-body1-line-height, var-body2-letter-spacing, var-body2-font-family, var-body2-font-size, var-body2-line-height, var-buttonL-letter-spacing, var-buttonL-font-weight, var-buttonL-font-family, var-buttonL-font-size, var-buttonL-line-height, var-buttonM-letter-spacing, var-buttonM-font-weight, var-buttonM-font-family, var-buttonM-font-size, var-buttonM-line-height, var-overline-letter-spacing, var-overline-text-transform, var-overline-font-weight, var-overline-font-family, var-overline-font-size, var-overline-line-height, var-caption-lg-letter-spacing, var-caption-lg-font-weight, var-caption-lg-font-family, var-caption-lg-font-size, var-caption-lg-line-height, var-caption-sm-letter-spacing, var-caption-sm-font-weight, var-caption-sm-font-family, var-caption-sm-font-size, var-caption-sm-line-height, var-mobile-hero-xl-font-size, var-mobile-hero-xl-line-height, var-mobile-hero-lg-font-size, var-mobile-hero-lg-line-height, var-mobile-hero-md-font-size, var-mobile-hero-md-line-height, var-mobile-hero-sm-font-size, var-mobile-hero-sm-line-height, var-mobile-h1-font-size, var-mobile-h1-line-height, var-mobile-h2-font-size, var-mobile-h2-line-height, var-mobile-h3-font-size, var-mobile-h3-line-height, var-mobile-h4-font-size, var-mobile-h4-line-height, var-mobile-subhead-font-size, var-mobile-subhead-line-height ) from "~@xo-union/tk-ui-typography/lib/variables.css";
.input::placeholder {
  letter-spacing: var-body1-letter-spacing;
  font-family: var-body1-font-family;
  font-size: var-body1-font-size;
  line-height: var-body1-line-height;
}

@value (
  varNeutralWhite,
  varNeutral500,
  varNeutral600,
  varTextError,
  varTextSubtle,
  varBackgroundLightContrast,
  varBackgroundLightContrast2
) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value (
  var-sp-down-1,
  var-sp-down-2,
  var-sp-down-3,
  var-sp-down-4,
  var-sp-up-1
) from "~@xo-union/tk-css-spacing/lib/variables.css";
@value ( base ) from "../../css/base.css";
@value ( sub-text ) from "../../css/sub-text.css";
@value ( is-neutral, is-invalid, is-valid ) from "../../css/validations.css";
@value horizontal-spacing: calc(var-sp-down-4 + var-sp-down-2);
.container {
  composes: container from "../../css/container.css";
  display: flex;
  flex-wrap: wrap;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: varBackgroundLightContrast2;
  border-radius: 2px;
  box-shadow: inset -8px 0 varNeutralWhite;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: varNeutral500;
  border-radius: 2px;
  box-shadow: inset -8px 0 varNeutralWhite;
}
.custom-scrollbar::-webkit-scrollbar-button:start:decrement, .custom-scrollbar::-webkit-scrollbar-button:end:increment {
  display: block;
  height: var-sp-down-3;
}

.text-area-reset {
  margin: 0;
}

.input {
  composes: field-base from "../../css/field-base.css";
  composes: input-with-animated-label from "../../css/animated-label.css";
  composes: base;
  composes: custom-scrollbar;
  composes: text-area-reset;
  color: varNeutral600;
  min-height: 104px;
  padding-bottom: var-sp-down-3;
  padding-left: horizontal-spacing;
  padding-right: var-sp-down-1;
  padding-top: var-sp-up-1;
  resize: none;
  transition-property: border-color;
}
.input::placeholder {
  color: varNeutral500;
}
.input:disabled {
  background-color: varBackgroundLightContrast;
  cursor: not-allowed;
}

.placeholder {
  padding-left: horizontal-spacing;
  padding-top: var-sp-down-2;
}

.label {
  composes: animated-label from "../../css/animated-label.css";
  background-color: varNeutralWhite;
  cursor: text;
  padding-left: horizontal-spacing;
  right: 20px;
  z-index: 1;
}

.length-indicator {
  margin-left: auto;
  padding-top: var-sp-down-3;
  transition: all 0.1s ease-out 0.1s;
}

.length-indicator-valid {
  color: var(--tkww-union-fields-select-length-indicator-valid-color, varTextSubtle);
}

.length-indicator-invalid {
  color: var(--tkww-union-fields-select-length-indicator-invalid-color, varTextError);
}

.label + .input {
  padding-top: var-sp-up-1;
}