/* docara-shell-source: runtime/component/textarea/css/textarea.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/4) justify-content/flex-start (.justify-start) */
  .sf-textarea {
    min-width: 0;
    min-inline-size: 0;
    --sf-textarea--radius: var(--sf-textarea-radius, var(--sf-radius--ui));
    background-color: transparent;
    background-color: var(--sf-textarea--background-color, transparent);
    gap: var(--sf-space-1\/4);
    gap: var(--sf-textarea--gap, var(--sf-space-1\/4));
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-textarea .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--background-color: transparent;
    background-color: var(--sf-textarea-hint-text-wrap--background-color);
    color: var(--sf-textarea-hint-text-wrap--color);
    font-family: var(--sf-textarea-hint-text-wrap--font-family);
    font-size: var(--sf-textarea-hint-text-wrap--font-size);
    font-weight: var(--sf-textarea-hint-text-wrap--font-weight);
    line-height: var(--sf-textarea-hint-text-wrap--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-textarea-label--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-textarea .sf-textarea-label {
    --sf-textarea-label--background-color: transparent;
    --sf-textarea-label--gap: var(--sf-space-1\/4);
    background-color: var(--sf-textarea-label--background-color);
    gap: var(--sf-textarea-label--gap);
  }
  .sf-textarea .sf-textarea-required {
    --sf-textarea-required--color: var(--sf-error);
    --sf-textarea-required--font-family: var(--sf-text--family);
    --sf-textarea-required--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-textarea-required--color);
    font-family: var(--sf-textarea-required--font-family);
    font-size: var(--sf-textarea-required--font-size);
    font-weight: var(--sf-textarea-required--font-weight);
    line-height: var(--sf-textarea-required--line-height);
  }
  .sf-textarea .sf-textarea-text {
    --sf-textarea-text--color: var(--sf-on-surface-variant);
    --sf-textarea-text--font-family: var(--sf-text--family);
    --sf-textarea-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-textarea-text--color);
    font-family: var(--sf-textarea-text--font-family);
    font-size: var(--sf-textarea-text--font-size);
    font-weight: var(--sf-textarea-text--font-weight);
    line-height: var(--sf-textarea-text--line-height);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-textarea textarea {
    border-bottom-right-radius: var(--sf-textarea-textarea--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-textarea textarea {
    border-bottom-right-radius: var(--sf-textarea-textarea--border-end-end-radius);
    }
  }
  .sf-textarea textarea:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-textarea-textarea--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-textarea textarea {
    border-bottom-left-radius: var(--sf-textarea-textarea--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-textarea textarea {
    border-bottom-left-radius: var(--sf-textarea-textarea--border-end-end-radius);
    }
  }
  .sf-textarea textarea:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-textarea-textarea--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-textarea textarea {
    border-bottom-left-radius: var(--sf-textarea-textarea--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-textarea textarea {
    border-bottom-left-radius: var(--sf-textarea-textarea--border-end-start-radius);
    }
  }
  .sf-textarea textarea:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-textarea-textarea--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-textarea textarea {
    border-bottom-right-radius: var(--sf-textarea-textarea--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-textarea textarea {
    border-bottom-right-radius: var(--sf-textarea-textarea--border-end-start-radius);
    }
  }
  .sf-textarea textarea:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-textarea-textarea--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-textarea textarea {
    border-top-right-radius: var(--sf-textarea-textarea--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-textarea textarea {
    border-top-right-radius: var(--sf-textarea-textarea--border-start-end-radius);
    }
  }
  .sf-textarea textarea:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-textarea-textarea--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-textarea textarea {
    border-top-left-radius: var(--sf-textarea-textarea--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-textarea textarea {
    border-top-left-radius: var(--sf-textarea-textarea--border-start-end-radius);
    }
  }
  .sf-textarea textarea:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-textarea-textarea--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-textarea textarea {
    border-top-left-radius: var(--sf-textarea-textarea--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-textarea textarea {
    border-top-left-radius: var(--sf-textarea-textarea--border-start-start-radius);
    }
  }
  .sf-textarea textarea:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-textarea-textarea--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-textarea textarea {
    border-top-right-radius: var(--sf-textarea-textarea--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-textarea textarea {
    border-top-right-radius: var(--sf-textarea-textarea--border-start-start-radius);
    }
  }
  .sf-textarea textarea:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-textarea-textarea--border-start-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-textarea textarea {
    padding-right: var(--sf-textarea-textarea--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-textarea textarea {
    padding-right: var(--sf-textarea-textarea--padding-inline-end);
    }
  }
  .sf-textarea textarea:where(:dir(ltr)) {
    padding-right: var(--sf-textarea-textarea--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-textarea textarea {
    padding-left: var(--sf-textarea-textarea--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-textarea textarea {
    padding-left: var(--sf-textarea-textarea--padding-inline-end);
    }
  }
  .sf-textarea textarea:where(:dir(rtl)) {
    padding-left: var(--sf-textarea-textarea--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-textarea textarea {
    padding-left: var(--sf-textarea-textarea--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-textarea textarea {
    padding-left: var(--sf-textarea-textarea--padding-inline-start);
    }
  }
  .sf-textarea textarea:where(:dir(ltr)) {
    padding-left: var(--sf-textarea-textarea--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-textarea textarea {
    padding-right: var(--sf-textarea-textarea--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-textarea textarea {
    padding-right: var(--sf-textarea-textarea--padding-inline-start);
    }
  }
  .sf-textarea textarea:where(:dir(rtl)) {
    padding-right: var(--sf-textarea-textarea--padding-inline-start);
  }
  .sf-textarea textarea {
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    --sf-textarea-textarea--border: var(--sf-px) solid;
    --sf-textarea-textarea--border-end-end-radius: var(--sf-textarea--radius);
    --sf-textarea-textarea--border-end-start-radius: var(--sf-textarea--radius);
    --sf-textarea-textarea--border-start-end-radius: var(--sf-textarea--radius);
    --sf-textarea-textarea--border-start-start-radius: var(--sf-textarea--radius);
    background-color: var(--sf-textarea-textarea--background-color);
    border: var(--sf-textarea-textarea--border);
    border-color: transparent;
    border-color: var(--sf-textarea-textarea--border-color, transparent);
    border-end-end-radius: var(--sf-textarea-textarea--border-end-end-radius);
    border-end-start-radius: var(--sf-textarea-textarea--border-end-start-radius);
    border-start-end-radius: var(--sf-textarea-textarea--border-start-end-radius);
    border-start-start-radius: var(--sf-textarea-textarea--border-start-start-radius);
    box-shadow: var(--sf-textarea-textarea--box-shadow);
    color: var(--sf-textarea-textarea--color);
    font-family: var(--sf-textarea-textarea--font-family);
    font-size: var(--sf-textarea-textarea--font-size);
    font-weight: var(--sf-textarea-textarea--font-weight);
    line-height: var(--sf-textarea-textarea--line-height);
    padding-bottom: var(--sf-textarea-textarea--padding-bottom);
    -webkit-padding-end: var(--sf-textarea-textarea--padding-inline-end);
            padding-inline-end: var(--sf-textarea-textarea--padding-inline-end);
    -webkit-padding-start: var(--sf-textarea-textarea--padding-inline-start);
            padding-inline-start: var(--sf-textarea-textarea--padding-inline-start);
    padding-top: var(--sf-textarea-textarea--padding-top);
    resize: vertical;
    resize: var(--sf-resize, vertical);
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--sf-animation);
  }
  .sf-textarea textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface-variant);
    --sf-textarea-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-textarea-placeholder--color);
    font-family: var(--sf-textarea-placeholder--font-family);
    font-size: var(--sf-textarea-placeholder--font-size);
    line-height: var(--sf-textarea-placeholder--line-height);
  }
  .sf-textarea textarea::-moz-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface-variant);
    --sf-textarea-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-textarea-placeholder--color);
    font-family: var(--sf-textarea-placeholder--font-family);
    font-size: var(--sf-textarea-placeholder--font-size);
    line-height: var(--sf-textarea-placeholder--line-height);
  }
  .sf-textarea textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface-variant);
    --sf-textarea-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-textarea-placeholder--color);
    font-family: var(--sf-textarea-placeholder--font-family);
    font-size: var(--sf-textarea-placeholder--font-size);
    line-height: var(--sf-textarea-placeholder--line-height);
  }
  .sf-textarea textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface-variant);
    --sf-textarea-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-textarea-placeholder--color);
    font-family: var(--sf-textarea-placeholder--font-family);
    font-size: var(--sf-textarea-placeholder--font-size);
    line-height: var(--sf-textarea-placeholder--line-height);
  }
  .sf-textarea textarea::placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface-variant);
    --sf-textarea-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-textarea-placeholder--color);
    font-family: var(--sf-textarea-placeholder--font-family);
    font-size: var(--sf-textarea-placeholder--font-size);
    line-height: var(--sf-textarea-placeholder--line-height);
  }
  .sf-textarea.sf-textarea--filled textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface);
  }
  .sf-textarea.sf-textarea--filled textarea::-moz-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface);
  }
  .sf-textarea.sf-textarea--filled textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface);
  }
  .sf-textarea.sf-textarea--filled textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface);
  }
  .sf-textarea.sf-textarea--filled textarea::placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-surface);
  }
  .sf-textarea.sf-textarea--size-1.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-1.sf-textarea--filled .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-hint-text-wrap--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-1.sf-textarea--filled .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-2.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-2.sf-textarea--filled .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-1\/2.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-1\/2.sf-textarea--filled .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--font-family: var(--sf-text--family);
    --sf-textarea-hint-text-wrap--font-weight: var(--sf-font-weight-regular);
  }
  .sf-textarea.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--filled .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--color: var(--sf-on-surface-variant);
  }
  .sf-textarea.sf-textarea--size-1 .sf-textarea-required {
    --sf-textarea-required--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-required--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1 .sf-textarea-text {
    --sf-textarea-text--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1.sf-textarea--bordered textarea, .sf-textarea.sf-textarea--size-1.sf-textarea--filled textarea {
    --sf-textarea-textarea--font-size: var(--sf-text-size-1);
    --sf-textarea-textarea--line-height: var(--sf-text-height-1);
    --sf-textarea-textarea--font-family: var(--sf-text--family);
    --sf-textarea-textarea--font-weight: var(--sf-font-weight-regular);
  }
  .sf-textarea.sf-textarea--bordered textarea, .sf-textarea.sf-textarea--filled textarea {
    --sf-textarea-textarea--color: var(--sf-textarea-color, var(--sf-on-surface));
  }
  .sf-textarea.sf-textarea--bordered textarea {
    --sf-textarea-textarea--background-color: var(--sf-textarea-background-color, var(--sf-surface-0));
    --sf-textarea-textarea--border-color: var(--sf-textarea-border-color, var(--sf-outline));
  }
  .sf-textarea:not(.error).sf-textarea--size-1.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary);
  }
  .sf-textarea:not(.error).sf-textarea--size-1.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary);
  }
  .sf-textarea:not(.error).sf-textarea--size-1.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary);
  }
  .sf-textarea:not(.error).sf-textarea--size-1.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):active) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary);
  }
  .sf-textarea.sf-textarea--bordered[\:has\(textarea\:disabled\)] textarea, .sf-textarea.sf-textarea--filled[\:has\(textarea\:disabled\)] textarea {
    --sf-textarea-textarea--color: var(--sf-on-disable);
  }
  .sf-textarea.sf-textarea--bordered:has(textarea:disabled) textarea, .sf-textarea.sf-textarea--filled:has(textarea:disabled) textarea {
    --sf-textarea-textarea--color: var(--sf-on-disable);
  }
  .sf-textarea.sf-textarea--bordered[\:has\(textarea\:disabled\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-outline-disable);
  }
  .sf-textarea.sf-textarea--bordered:has(textarea:disabled) textarea {
    --sf-textarea-textarea--border-color: var(--sf-outline-disable);
  }
  .sf-textarea.sf-textarea--filled[\:has\(textarea\:disabled\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-disable);
  }
  .sf-textarea.sf-textarea--filled:has(textarea:disabled) textarea {
    --sf-textarea-textarea--background-color: var(--sf-disable);
  }
  .sf-textarea.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-transparent-for-focus);
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled).focus-visible) textarea {
    --sf-textarea-textarea--background-color: var(--sf-transparent-for-focus);
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-transparent-for-focus);
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):focus-visible) textarea {
    --sf-textarea-textarea--background-color: var(--sf-transparent-for-focus);
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea.error.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.error.sf-textarea--filled .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--color: var(--sf-error);
  }
  .sf-textarea.error.sf-textarea--bordered textarea {
    --sf-textarea-textarea--background-color: var(--sf-transparent-for-focus);
    --sf-textarea-textarea--border-color: var(--sf-error);
  }
  .sf-textarea.sf-textarea--filled textarea {
    --sf-textarea-textarea--background-color: var(--sf-textarea-background-color, var(--sf-surface-container));
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    --sf-textarea-textarea--border-color: var(--sf-textarea-border-color, var(--sf-transparent-for-focus));
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container-hover);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container-hover);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container-hover);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):hover) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container-hover);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):active) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea.error.sf-textarea--filled textarea {
    --sf-textarea-textarea--background-color: var(--sf-error-container);
  }
  .sf-textarea.sf-textarea--size-2.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-2.sf-textarea--filled .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--font-size: var(--sf-text-size-1);
    --sf-textarea-hint-text-wrap--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-2 .sf-textarea-required {
    --sf-textarea-required--font-size: var(--sf-text-size-1);
    --sf-textarea-required--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-2 .sf-textarea-text {
    --sf-textarea-text--font-size: var(--sf-text-size-1);
    --sf-textarea-text--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-2.sf-textarea--bordered textarea, .sf-textarea.sf-textarea--size-2.sf-textarea--filled textarea {
    --sf-textarea-textarea--font-size: var(--sf-text-size-2);
    --sf-textarea-textarea--line-height: var(--sf-text-height-2);
  }
  .sf-textarea.sf-textarea--size-2.sf-textarea--bordered textarea, .sf-textarea.sf-textarea--size-2.sf-textarea--filled textarea, .sf-textarea.sf-textarea--size-1\/2.sf-textarea--bordered textarea, .sf-textarea.sf-textarea--size-1\/2.sf-textarea--filled textarea {
    --sf-textarea-textarea--font-family: var(--sf-text--family);
  }
  .sf-textarea:not(.error).sf-textarea--size-2.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] textarea, .sf-textarea:not(.error).sf-textarea--size-1\/2.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea:not(.error).sf-textarea--size-2.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] textarea, .sf-textarea:not(.error).sf-textarea--size-1\/2.sf-textarea--bordered[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea:not(.error).sf-textarea--size-2.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) textarea, .sf-textarea:not(.error).sf-textarea--size-1\/2.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea:not(.error).sf-textarea--size-2.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):active) textarea, .sf-textarea:not(.error).sf-textarea--size-1\/2.sf-textarea--bordered:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):active) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-active);
  }
  .sf-textarea.sf-textarea--size-1\/2.sf-textarea--bordered .sf-textarea-hint-text-wrap, .sf-textarea.sf-textarea--size-1\/2.sf-textarea--filled .sf-textarea-hint-text-wrap {
    --sf-textarea-hint-text-wrap--font-size: var(--sf-text-size-1\/3);
    --sf-textarea-hint-text-wrap--line-height: var(--sf-text-height-1\/3);
  }
  .sf-textarea.sf-textarea--size-1\/2 .sf-textarea-required {
    --sf-textarea-required--font-size: var(--sf-text-size-1\/3);
    --sf-textarea-required--line-height: var(--sf-text-height-1\/3);
  }
  .sf-textarea.sf-textarea--size-1\/2 .sf-textarea-text {
    --sf-textarea-text--font-size: var(--sf-text-size-1\/3);
    --sf-textarea-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-textarea.sf-textarea--size-1\/2.sf-textarea--bordered textarea, .sf-textarea.sf-textarea--size-1\/2.sf-textarea--filled textarea {
    --sf-textarea-textarea--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-textarea--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1 textarea {
    --sf-textarea-textarea--padding-bottom: var(--sf-textarea-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));
    --sf-textarea-textarea--padding-inline-end: var(--sf-textarea-padding-inline, calc(var(--sf-ui-1--space-x) + var(--sf-ui-1--text-space-x)));
    --sf-textarea-textarea--padding-inline-start: var(--sf-textarea-padding-inline, calc(var(--sf-ui-1--space-x) + var(--sf-ui-1--text-space-x)));
    --sf-textarea-textarea--padding-top: var(--sf-textarea-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-textarea.sf-textarea--size-1 textarea[rows="1"] {
    height: var(--sf-ui-1--control-height);
    block-size: var(--sf-ui-1--control-height);
  }
  .sf-textarea.sf-textarea--size-1 textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-1 textarea::-moz-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-1 textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-1 textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-1 textarea::placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-textarea.sf-textarea--size-2 textarea {
    --sf-textarea-textarea--padding-bottom: var(--sf-textarea-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));
    --sf-textarea-textarea--padding-inline-end: var(--sf-textarea-padding-inline, calc(var(--sf-ui-2--space-x) + var(--sf-ui-2--text-space-x)));
    --sf-textarea-textarea--padding-inline-start: var(--sf-textarea-padding-inline, calc(var(--sf-ui-2--space-x) + var(--sf-ui-2--text-space-x)));
    --sf-textarea-textarea--padding-top: var(--sf-textarea-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-textarea.sf-textarea--size-2 textarea[rows="1"] {
    height: var(--sf-ui-2--control-height);
    block-size: var(--sf-ui-2--control-height);
  }
  .sf-textarea.sf-textarea--size-2 textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-textarea.sf-textarea--size-2 textarea::-moz-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-textarea.sf-textarea--size-2 textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-textarea.sf-textarea--size-2 textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-textarea.sf-textarea--size-2 textarea::placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea {
    --sf-textarea-textarea--padding-bottom: var(--sf-textarea-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));
    --sf-textarea-textarea--padding-inline-end: var(--sf-textarea-padding-inline, calc(var(--sf-ui-1\/2--space-x) + var(--sf-ui-1\/2--text-space-x)));
    --sf-textarea-textarea--padding-inline-start: var(--sf-textarea-padding-inline, calc(var(--sf-ui-1\/2--space-x) + var(--sf-ui-1\/2--text-space-x)));
    --sf-textarea-textarea--padding-top: var(--sf-textarea-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea[rows="1"] {
    height: var(--sf-ui-1\/2--control-height);
    block-size: var(--sf-ui-1\/2--control-height);
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea::-moz-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea.sf-textarea--size-1\/2 textarea::placeholder {
    --sf-textarea-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-textarea-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-textarea[\:has\(textarea\:disabled\)] textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea[\:has\(textarea\:disabled\)] textarea::-moz-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea[\:has\(textarea\:disabled\)] textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea[\:has\(textarea\:disabled\)] textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea[\:has\(textarea\:disabled\)] textarea::placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea:has(textarea:disabled) textarea::-webkit-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea:has(textarea:disabled) textarea::-moz-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea:has(textarea:disabled) textarea:-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea:has(textarea:disabled) textarea::-ms-input-placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea:has(textarea:disabled) textarea::placeholder {
    --sf-textarea-placeholder--color: var(--sf-on-disable);
  }
  .sf-textarea:not(.error)[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-hover);
  }
  .sf-textarea:not(.error)[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-hover);
  }
  .sf-textarea:not(.error):has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-hover);
  }
  .sf-textarea:not(.error):has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):hover) textarea {
    --sf-textarea-textarea--border-color: var(--sf-primary-hover);
  }
  .sf-textarea:not(.error)[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error)[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error):has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error):has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):active) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.sf-textarea--pointer-focus)[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] textarea {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-textarea:not(.sf-textarea--pointer-focus):has(textarea:enabled:not(:disabled):not(.disabled).focus-visible) textarea {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-textarea:not(.sf-textarea--pointer-focus)[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] textarea {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-textarea:not(.sf-textarea--pointer-focus):has(textarea:enabled:not(:disabled):not(.disabled):focus-visible) textarea {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* Here the control is the part the person sees, so the ring stays on it. What
     has to go is the ring after a click: the global :focus-visible rule paints one
     even when this component has decided not to, and then the textarea is the only
     text control in the set that rings on a mouse click. */
  .sf-textarea.sf-textarea--pointer-focus textarea.focus-visible {
    outline: none;
  }
  .sf-textarea.sf-textarea--pointer-focus textarea:focus-visible {
    outline: none;
  }
  .sf-textarea:not(.error).sf-textarea--bordered[\:has\(textarea\:-moz-read-only\:not\(\:disabled\)\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-textarea:not(.error).sf-textarea--bordered[\:has\(textarea\:read-only\:not\(\:disabled\)\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-textarea:not(.error).sf-textarea--bordered:has(textarea:-moz-read-only:not(:disabled)) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-textarea:not(.error).sf-textarea--bordered:has(textarea:read-only:not(:disabled)) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
}
@layer sf.states {
  @media (prefers-reduced-motion: reduce) {
    .sf-textarea textarea {
      transition-duration: 0s;
    }
  }
  @media (forced-colors: active) {
    .sf-textarea:not(.sf-textarea--pointer-focus) textarea:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-textarea-textarea--box-shadow: none;
    }
    .sf-textarea:not(.sf-textarea--pointer-focus) textarea:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-textarea-textarea--box-shadow: none;
    }
  }
}
/* A filled field reads as a field only by its fill, so while someone is typing
   in it -- focus anywhere inside, by pointer or keyboard -- it becomes the
   ordinary field: the surface of a bordered field and a visible boundary. The
   fill comes back when focus leaves. Error, disabled and read-only fields keep
   their own look. */
@layer sf.components {
  /* Focus anywhere within the field changes the fill, not the focus ring. */
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\[focus-within\]\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\[focus-within\]\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only)[focus-within]) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only)[focus-within]) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:focus-within\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:focus-within\)] textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):focus-within) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:enabled:not(:disabled):not(.disabled):not(:read-only):focus-within) textarea {
    --sf-textarea-textarea--background-color: var(--sf-surface-0);
  }
  /* The boundary of the ordinary field; lighter than the hover rule. */
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\[focus-within\]\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea[focus-within]) textarea {
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea:not(.error).sf-textarea--filled[\:has\(textarea\:focus-within\)] textarea {
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
  .sf-textarea:not(.error).sf-textarea--filled:has(textarea:focus-within) textarea {
    --sf-textarea-textarea--border-color: var(--sf-outline);
  }
}