/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light,
.scania.tds-mode-light,
.scania .tl-mode-light,
.scania.tl-mode-light {
  --component--input-background-primary: var(--color-background-layer-01);
  --component--input-background-secondary: var(--color-background-layer-02);
  --component--input-border-default: var(--color-border-soft);
  --component--input-border-hover: var(--color-border-strong);
  --component--input-border-success-default: var(--color-border-strong);
  --component--input-border-error-default: var(--color-system-danger-default);
  --component--input-border-radius-default: var(--scania-unit-4);
  --component--input-border-radius-none: var(--scania-unit-0);
  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
  --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
  --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
  --component--input-border-width-default: var(--scania-unit-1);
  --component--input-border-width-none: var(--scania-unit-0);
  --component--input-border-width-top: var(--component--input-border-width-none);
  --component--input-border-width-right: var(--component--input-border-width-none);
  --component--input-border-width-bottom: var(--component--input-border-width-default);
  --component--input-border-width-left: var(--component--input-border-width-none);
  --component--input-icon-prefix-default: var(--color-text-defined);
  --component--input-icon-suffix-default: var(--color-text-defined);
  --component--input-icon-error-default: var(--color-system-danger-default);
  --component--input-opacity-disabled: var(--scania-opacity-25);
  --component--input-text-counter-default: var(--color-text-defined);
  --component--input-text-label-default: var(--color-text-strong);
  --component--input-text-helper-default: var(--color-text-defined);
  --component--input-text-placeholder-default: var(--color-text-soft);
  --component--input-text-value-default: var(--color-text-strong);
  --component--input-text-error-default: var(--color-system-danger-default);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component--input-background-primary: var(--color-background-layer-01);
  --component--input-background-secondary: var(--color-background-layer-02);
  --component--input-border-default: var(--color-border-soft);
  --component--input-border-hover: var(--color-border-strong);
  --component--input-border-success-default: var(--color-border-strong);
  --component--input-border-error-default: var(--color-system-danger-default);
  --component--input-border-radius-default: var(--traton-unit-4);
  --component--input-border-radius-none: var(--traton-unit-0);
  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
  --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
  --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
  --component--input-border-width-default: var(--traton-unit-1);
  --component--input-border-width-none: var(--traton-unit-0);
  --component--input-border-width-top: var(--component--input-border-width-default);
  --component--input-border-width-right: var(--component--input-border-width-default);
  --component--input-border-width-bottom: var(--component--input-border-width-default);
  --component--input-border-width-left: var(--component--input-border-width-default);
  --component--input-icon-prefix-default: var(--color-text-defined);
  --component--input-icon-suffix-default: var(--color-text-defined);
  --component--input-icon-error-default: var(--color-system-danger-default);
  --component--input-opacity-disabled: var(--traton-opacity-25);
  --component--input-text-counter-default: var(--color-text-defined);
  --component--input-text-label-default: var(--color-text-strong);
  --component--input-text-helper-default: var(--color-text-defined);
  --component--input-text-placeholder-default: var(--color-text-subtle);
  --component--input-text-value-default: var(--color-text-strong);
  --component--input-text-error-default: var(--color-system-danger-default);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component--input-background-primary: var(--color-background-layer-01);
  --component--input-background-secondary: var(--color-background-layer-02);
  --component--input-border-default: var(--color-border-soft);
  --component--input-border-hover: var(--color-border-strong);
  --component--input-border-success-default: var(--color-border-strong);
  --component--input-border-error-default: var(--color-system-danger-default);
  --component--input-border-radius-default: var(--scania-unit-4);
  --component--input-border-radius-none: var(--scania-unit-0);
  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
  --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
  --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
  --component--input-border-width-default: var(--scania-unit-1);
  --component--input-border-width-none: var(--scania-unit-0);
  --component--input-border-width-top: var(--component--input-border-width-none);
  --component--input-border-width-right: var(--component--input-border-width-none);
  --component--input-border-width-bottom: var(--component--input-border-width-default);
  --component--input-border-width-left: var(--component--input-border-width-none);
  --component--input-icon-prefix-default: var(--color-text-defined);
  --component--input-icon-suffix-default: var(--color-text-defined);
  --component--input-icon-error-default: var(--color-system-danger-default);
  --component--input-opacity-disabled: var(--scania-opacity-25);
  --component--input-text-counter-default: var(--color-text-defined);
  --component--input-text-label-default: var(--color-text-strong);
  --component--input-text-helper-default: var(--color-text-defined);
  --component--input-text-placeholder-default: var(--color-text-soft);
  --component--input-text-value-default: var(--color-text-strong);
  --component--input-text-error-default: var(--color-system-danger-default);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component--input-background-primary: var(--color-background-layer-01);
  --component--input-background-secondary: var(--color-background-layer-02);
  --component--input-border-default: var(--color-border-soft);
  --component--input-border-hover: var(--color-border-strong);
  --component--input-border-success-default: var(--color-border-strong);
  --component--input-border-error-default: var(--color-system-danger-default);
  --component--input-border-radius-default: var(--traton-unit-4);
  --component--input-border-radius-none: var(--traton-unit-0);
  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
  --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
  --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
  --component--input-border-width-default: var(--traton-unit-1);
  --component--input-border-width-none: var(--traton-unit-0);
  --component--input-border-width-top: var(--component--input-border-width-default);
  --component--input-border-width-right: var(--component--input-border-width-default);
  --component--input-border-width-bottom: var(--component--input-border-width-default);
  --component--input-border-width-left: var(--component--input-border-width-default);
  --component--input-icon-prefix-default: var(--color-text-defined);
  --component--input-icon-suffix-default: var(--color-text-defined);
  --component--input-icon-error-default: var(--color-system-danger-default);
  --component--input-opacity-disabled: var(--traton-opacity-25);
  --component--input-text-counter-default: var(--color-text-defined);
  --component--input-text-label-default: var(--color-text-strong);
  --component--input-text-helper-default: var(--color-text-defined);
  --component--input-text-placeholder-default: var(--color-text-subtle);
  --component--input-text-value-default: var(--color-text-strong);
  --component--input-text-error-default: var(--color-system-danger-default);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light,
.scania.tds-mode-light,
.scania .tl-mode-light,
.scania.tl-mode-light {
  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
  --component-textarea-icon-resize-default: var(--color-icon-subtle);
  --component-textarea-icon-readonly-default: var(--color-icon-strong);
  --component-textarea-size-resize-height: var(--scania-unit-12);
  --component-textarea-size-resize-width: var(--scania-unit-12);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
  --component-textarea-icon-resize-default: var(--color-icon-subtle);
  --component-textarea-icon-readonly-default: var(--color-icon-strong);
  --component-textarea-size-resize-height: var(--traton-unit-12);
  --component-textarea-size-resize-width: var(--traton-unit-12);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
  --component-textarea-icon-resize-default: var(--color-icon-subtle);
  --component-textarea-icon-readonly-default: var(--color-icon-strong);
  --component-textarea-size-resize-height: var(--scania-unit-12);
  --component-textarea-size-resize-width: var(--scania-unit-12);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
  --component-textarea-icon-resize-default: var(--color-icon-subtle);
  --component-textarea-icon-readonly-default: var(--color-icon-strong);
  --component-textarea-size-resize-height: var(--traton-unit-12);
  --component-textarea-size-resize-width: var(--traton-unit-12);
}

.tl-textarea {
  --textarea-background-primary: var(--component--input-background-primary);
  --textarea-background-secondary: var(--component--input-background-secondary);
  --textarea-background: var(--textarea-background-primary);
  --textarea-text: var(--component--input-text-value-default);
  --textarea-background-disabled: var(--textarea-background-primary);
  --textarea-text-disabled: var(--color-text-disabled);
  --textarea-placeholder-disabled: var(--color-text-disabled);
  --textarea-label-disabled: var(--color-text-disabled);
  --textarea-label: var(--component--input-text-label-default);
  --textarea-label-inside: var(--component--input-text-label-default);
  --textarea-label-inside-left: 16px;
  --textarea-placeholder: var(--component--input-text-placeholder-default);
  --textarea-helper: var(--component--input-text-helper-default);
  --textarea-error: var(--component--input-text-error-default);
  --textarea-error-icon: var(--component--input-icon-error-default);
  --textarea-textcounter: var(--component--input-text-counter-default);
  --textarea-resize-icon: var(--component-textarea-icon-resize-default);
  --textarea-opacity-disabled: var(--component--input-opacity-disabled);
  --textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
    calc(var(--component--input-border-radius-top-right) * 1px)
    calc(var(--component--input-border-radius-bottom-right) * 1px)
    calc(var(--component--input-border-radius-bottom-left) * 1px);
  --textarea-border-color: var(--component--input-border-default);
  --textarea-border-color-hover: var(--component--input-border-hover);
  --textarea-border-color-success: var(--component--input-border-success-default);
  --textarea-border-color-error: var(--component--input-border-error-default);
  --textarea-border-color-readonly: var(--color-border-strong);
  --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
}
.tl-textarea--primary {
  --textarea-background: var(--textarea-background-primary);
  --textarea-background-disabled: var(--textarea-background-primary);
  --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
}
.tl-textarea--secondary {
  --textarea-background: var(--textarea-background-secondary);
  --textarea-background-disabled: var(--textarea-background-secondary);
  --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-secondary);
}

/* Typography Usage mixins */
.tl-textarea {
  display: block;
  position: relative;
  width: 100%;
  min-width: 208px;
  padding-bottom: 1px;
  border-radius: var(--textarea-border-radius);
  box-sizing: border-box;
}
.tl-textarea--no-min-width {
  min-width: auto;
}
.tl-textarea:has(.tl-textarea__input:disabled) {
  cursor: not-allowed;
}
.tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__input, .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__label {
  opacity: var(--textarea-opacity-disabled);
}
.tl-textarea:has(.tl-textarea__input:disabled)::after {
  opacity: var(--textarea-opacity-disabled);
}
.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 16px;
  height: 16px;
  background-color: var(--textarea-text);
  mask-image: var(--icon-edit_inactive-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 2;
}
.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
  top: 20px;
  right: 16px;
}
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
  top: 42px;
}
.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
  top: 44px;
}
.tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
  top: 17px;
}
.traton .tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
  top: 19px;
}
.tl-textarea::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: calc(var(--component-textarea-size-resize-width) * 1px);
  height: calc(var(--component-textarea-size-resize-height) * 1px);
  background-color: var(--textarea-resize-icon);
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  z-index: 2;
}
.traton .tl-textarea::after {
  bottom: 5px;
  right: 4px;
}
.tl-textarea:not(.tl-textarea--label-inside)::after {
  bottom: 5px;
}
.traton .tl-textarea:not(.tl-textarea--label-inside)::after {
  bottom: 5px;
}
.tl-textarea:has(.tl-textarea__bottom)::after {
  bottom: 25px;
}
.traton .tl-textarea:has(.tl-textarea__bottom)::after {
  bottom: 27px;
}

.tl-textarea__input {
  all: unset;
  border-radius: var(--textarea-border-radius);
  background-color: var(--textarea-background);
  color: var(--textarea-text);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-style: solid;
  border-color: var(--textarea-border-color);
  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
  outline: none;
  transition: border-color 200ms ease;
}
.tl-textarea__input::placeholder {
  color: var(--textarea-placeholder);
}
.tl-textarea__input:disabled {
  background-color: var(--textarea-background-disabled);
  color: var(--textarea-text-disabled);
  user-select: none;
  pointer-events: none;
}
.tl-textarea__input:disabled::placeholder {
  color: var(--textarea-placeholder-disabled);
}
.tl-textarea__input {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: block;
  position: relative;
  width: 100%;
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
  color: var(--textarea-text);
  resize: vertical;
  z-index: 0;
}
.tl-textarea__input::placeholder {
  transform: translateY(1px);
}
.tl-textarea__input:focus {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}
.tl-textarea__input::-webkit-resizer {
  display: none;
}
.tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
  border-color: var(--textarea-border-color-hover);
}
.tl-textarea--error .tl-textarea__input {
  border-color: var(--textarea-border-color-error);
}
.tl-textarea--error .tl-textarea__input:focus {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}
.tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
  border-color: var(--textarea-border-color-error);
}
.tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
  border-color: var(--textarea-border-color-success);
}
.tl-textarea__input:disabled {
  cursor: not-allowed;
  pointer-events: none;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
  border-color: var(--textarea-border-color-readonly);
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
  border-color: var(--textarea-border-color-hover);
}
.tl-textarea--label-inside .tl-textarea__input {
  padding-top: 26px;
  padding-bottom: 15px;
}
.tl-textarea--label-inside .tl-textarea__input::placeholder {
  color: transparent;
  transform: translateY(1px);
}
.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
  color: var(--textarea-placeholder-disabled) !important;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
  user-select: auto;
  caret-color: transparent;
  cursor: default;
  pointer-events: none;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
  padding-right: 50px;
}

.tl-textarea:not(.tl-textarea--label-inside) .tl-textarea__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: block;
  margin-bottom: 8px;
  color: var(--textarea-label);
}
.tl-textarea--label-inside .tl-textarea__label {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  position: absolute;
  top: 21px;
  left: var(--textarea-label-inside-left, 16px);
  color: var(--textarea-label-inside);
  pointer-events: none;
  transform: none;
  transform-origin: top left;
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
  z-index: 2;
}
.tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  top: 8px;
  color: var(--textarea-label-disabled);
  transform: translateY(0);
}
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
  color: var(--textarea-label-disabled);
}

.tl-textarea__bottom {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.tl-textarea__helper {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  color: var(--textarea-helper);
  position: relative;
}
:has(.tl-textarea__input:disabled) .tl-textarea__helper {
  color: var(--color-text-disabled);
}
.tl-textarea--error .tl-textarea__helper {
  padding-left: 24px;
}
.tl-textarea--error .tl-textarea__helper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background-color: var(--textarea-error-icon);
  mask-image: var(--icon-error-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper {
  padding-left: 0;
}
.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
  display: none;
}
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
  color: var(--textarea-error);
}
.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
  background-color: var(--color-text-disabled);
}

.tl-textarea__charcounter {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  margin-left: auto;
  color: var(--textarea-textcounter);
}
:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
  color: var(--color-text-disabled);
}
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
  color: var(--textarea-error);
}
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
  color: var(--textarea-error);
}

.tl-textarea__charcounter-divider {
  color: var(--color-text-disabled);
}

.tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
.tl-textarea--label-inside:has(.tl-textarea__input:not(:placeholder-shown)) .tl-textarea__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  top: 12.5px;
  transform: none;
}