//
// Common text item styles
//

#{$ouds-root-selector} {
  --#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-default};
}

%text-item-common {
  // scss-docs-start text-input-common-css-vars
  --#{$prefix}text-input-color: var(--#{$prefix}color-content-default);
  --#{$prefix}text-input-caret-color: var(--#{$prefix}color-content-default);
  --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-enabled);
  --#{$prefix}text-input-border-color: #{$ouds-text-input-color-border-enabled};
  --#{$prefix}text-input-border-width-top: 0px;
  --#{$prefix}text-input-border-width-right: 0px;
  --#{$prefix}text-input-border-width-bottom: #{$ouds-text-input-border-width-default};
  --#{$prefix}text-input-border-width-left: 0px;
  --#{$prefix}text-input-border-width-focus: 0px;

  --#{$prefix}text-input-padding-x: #{$ouds-text-input-space-padding-inline-default};
  --#{$prefix}text-input-padding-y: #{$ouds-text-input-space-padding-block-default};

  --#{$prefix}text-input-icon-size: #{$ouds-text-input-size-leading-icon};

  --#{$prefix}text-input-trailing-action-width: #{$ouds-button-size-min-width};
  --#{$prefix}text-input-trailing-action-height: #{$ouds-button-size-max-height-icon-only};
  --#{$prefix}text-input-trailing-action-padding-right: #{$ouds-text-input-space-padding-inline-trailing-action};

  --#{$prefix}text-input-label-color: var(--#{$prefix}color-content-muted);

  --#{$prefix}text-input-column-gap: #{$ouds-text-input-space-column-gap-default};
  --#{$prefix}text-input-column-gap-trailing-error: #{$ouds-text-input-space-column-gap-trailing-error-action};
  // scss-docs-end text-input-common-css-vars
}

//
// Text input
//

.text-input {
  @extend %text-item-common;
  // scss-docs-start text-input-css-vars
  --#{$prefix}text-input-min-width: #{px-to-rem($ouds-text-input-size-min-width)};
  --#{$prefix}text-input-min-height: #{px-to-rem($ouds-text-input-size-min-height)};
  --#{$prefix}text-input-column-row-gap: #{$ouds-text-input-space-row-gap-label-input};
  // scss-docs-end text-input-css-vars

  &.component-max-width {
    max-width: px-to-rem($ouds-text-input-size-max-width);
  }

  .text-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--#{$prefix}text-input-column-row-gap);
    justify-content: center;
    min-width: var(--#{$prefix}text-input-min-width);
    min-height: var(--#{$prefix}text-input-min-height);
    padding-top: calc(var(--#{$prefix}text-input-padding-y) - var(--#{$prefix}text-input-border-width-top));
    padding-right: calc(var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-border-width-right));
    padding-bottom: calc(var(--#{$prefix}text-input-padding-y) - var(--#{$prefix}text-input-border-width-bottom));
    padding-left: calc(var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-border-width-left));
    background-color: var(--#{$prefix}text-input-background-color);
    background-clip: padding-box;
    border-color: var(--#{$prefix}text-input-border-color);
    border-style: solid;
    border-width: var(--#{$prefix}text-input-border-width-top) var(--#{$prefix}text-input-border-width-right) var(--#{$prefix}text-input-border-width-bottom) var(--#{$prefix}text-input-border-width-left);
    @include get-font-size("label-large");
    @include border-radius(var(--#{$prefix}text-input-border-radius), 0);

    &.text-input-container-outlined {
      --#{$prefix}text-input-background-color: transparent;
      --#{$prefix}text-input-border-width-top: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-right: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-default};
    }

    > label {
      z-index: 2;
      overflow: hidden;
      color: var(--#{$prefix}text-input-label-color);
      @include transition(font-size .1s ease-out);

      // Allow the whole text-input-container to be clickable to focus the input
      &::before {
        position: absolute;
        inset: 0;
        cursor: text;
        content: "";
      }
    }

    .text-input-field {
      position: absolute;
      top: 50%;
      left: calc(var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-border-width-left));
      z-index: 3;
      width: 100%;
      padding: 0;
      font-weight: $ouds-font-weight-system-web-moderate;
      color: var(--#{$prefix}text-input-color);
      appearance: none;
      caret-color: var(--#{$prefix}text-input-caret-color);
      background-color: transparent;
      border: 0;
      box-shadow: none;
      opacity: 0;
      transform: translate(0, -50%);

      &:placeholder-shown:not([placeholder=" "]),
      &[placeholder]:not(:placeholder-shown),
      &:focus:not(:read-only),
      &:focus-visible:not(:read-only) {
        position: static;
        outline: 0;
        opacity: 1;
        transform: none;
      }

      &:disabled {
        pointer-events: none;
      }
    }

    // Input prefix and suffix
    .input-container {
      position: absolute;
      top: 50%;
      left: calc(var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-border-width-left));
      z-index: 1;
      display: flex;
      gap: $ouds-text-input-space-column-gap-inline-text;
      align-items: center;
      align-self: stretch;
      padding: 0;
      opacity: 0;
      transform: translate(0, -50%);

      &:has(.text-input-field:placeholder-shown:not([placeholder=" "])),
      &:has(.text-input-field[placeholder]:not(:placeholder-shown)),
      &:has(.text-input-field:focus),
      &:has(.text-input-field:focus-visible) {
        position: static;
        width: 100%;
        opacity: 1;
        transform: none;
      }
    }

    [data-bs-prefix] {
      &::before{
        display: block;
        color: var(--#{$prefix}color-content-muted);
        content: attr(data-bs-prefix);
      }
    }

    [data-bs-suffix] {
      &::after{
        display: block;
        color: var(--#{$prefix}color-content-muted);
        content: attr(data-bs-suffix);
      }
    }

    // Hover state styles
    &:hover:has(.text-input-field:not(:focus, :disabled, :read-only, :user-invalid, [aria-invalid="true"])) {
      --#{$prefix}text-input-border-color: #{$ouds-text-input-color-border-hover};

      &:not(.text-input-container-outlined) {
        --#{$prefix}text-input-background-color: #{$ouds-color-action-support-hover};
      }
    }

    // Focused state styles
    &:has(.text-input-field:focus:not(:disabled, :read-only)) {
      --#{$prefix}text-input-border-width-bottom: #{$ouds-text-input-border-width-focus};

      &.text-input-container-outlined {
        --#{$prefix}text-input-border-width-top: #{$ouds-text-input-border-width-focus};
        --#{$prefix}text-input-border-width-right: #{$ouds-text-input-border-width-focus};
        --#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-focus};
      }
    }

    &:has(.text-input-field:focus:not(:disabled, :read-only, :user-invalid, [aria-invalid="true"])) {
      --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-pressed);
      --#{$prefix}text-input-border-color: #{$ouds-text-input-color-border-focus};

      &.text-input-container-outlined {
        --#{$prefix}text-input-background-color: transparent;
      }
    }

    &:has(.text-input-field:placeholder-shown:not([placeholder=" "])),
    &:has(.text-input-field[placeholder]:not(:placeholder-shown)),
    &:has(.text-input-field:focus:not(:read-only)) {
      > label {
        text-overflow: ellipsis;
        white-space: nowrap;
        @include get-font-size("label-small");

        // stylelint-disable-next-line selector-no-qualifying-type
        &.is-required {
          position: relative;
          width: fit-content;
          max-width: 100%;
          padding-right: 7px;

          &::after {
            right: 0;
            margin-left: 3px;
          }
        }
      }
    }

    // Prevent label flickering when input already focused
    &:has(.text-input-field:focus) {
      > label {
        pointer-events: none;
      }
    }

    // Read only inputs
    &:has(.text-input-field:read-only:not(:disabled)) {
      --#{$prefix}text-input-background-color: transparent;
      --#{$prefix}text-input-border-color: #{$ouds-color-border-muted};
      --#{$prefix}text-input-border-width-top: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-right: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-default};

      outline: 0;

      &.text-input-container-outlined {
        --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-disabled);
        --#{$prefix}text-input-border-width-top: 0px;
        --#{$prefix}text-input-border-width-right: 0px;
        --#{$prefix}text-input-border-width-bottom: 0px;
        --#{$prefix}text-input-border-width-left: 0px;
      }
    }

    // Disabled inputs
    &:has(.text-input-field:disabled) {
      > label::before {
        cursor: default;
      }
    }

    // To have the disabled rendering on loading button: `&:has(.text-input-field:disabled:not(.loading-indeterminate, .loading-determinate)) {`
    &:has(.text-input-field:disabled):not(:has(.loading-indeterminate, .loading-determinate)) {
      --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-disabled);
      --#{$prefix}text-input-color: var(--#{$prefix}color-action-disabled);
      --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-disabled);

      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
      opacity: 1;

      &:not(.text-input-container-outlined) {
        --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-disabled);
      }

      > img,
      > svg,
      > .icon {
        color: $ouds-color-content-disabled;
      }
    }

    // Leading icon
    > img,
    > svg,
    > .icon {
      position: absolute;
      top: calc(var(--#{$prefix}text-input-min-height) / 2 - var(--#{$prefix}text-input-icon-size) / 2 - var(--#{$prefix}text-input-border-width-top));
      left: calc(var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-border-width-left));
      z-index: 2;
      width: var(--#{$prefix}text-input-icon-size);
      min-width: var(--#{$prefix}text-input-icon-size);
      height: var(--#{$prefix}text-input-icon-size);
      color: $ouds-color-content-muted;
    }

    &:has(> svg:not(.loader)),
    &:has(> img) {
      > .text-input-field,
      > .input-container,
      > label {
        padding-left: calc(var(--#{$prefix}text-input-icon-size) + var(--#{$prefix}text-input-column-gap));
      }
    }

    // Trailing action
    > button {
      position: absolute;
      top: calc(var(--#{$prefix}text-input-min-height) / 2 - var(--#{$prefix}text-input-trailing-action-height) / 2 - var(--#{$prefix}text-input-border-width-top));
      right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left));
      z-index: 3;
    }

    &:has(> button),
    &:has(.loading-indeterminate, .loading-determinate) {
      padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
    }

    // Invalid text inputs
    &:has(.text-input-field:is(:user-invalid, [aria-invalid="true"])) {
      --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-enabled);
      --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-enabled);

      padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));

      &:has(> button),
      &:has(.loading-indeterminate, .loading-determinate) {
        padding-right: calc($ouds-button-size-icon-only + var(--#{$prefix}text-input-column-gap-trailing-error) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
      }

      &::after {
        position: absolute;
        top: calc(var(--#{$prefix}text-input-min-height) / 2 - var(--#{$prefix}text-input-trailing-action-height) / 2 - var(--#{$prefix}text-input-border-width-top));
        right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left));
        width: var(--#{$prefix}text-input-trailing-action-width);
        height: var(--#{$prefix}text-input-trailing-action-height);
        overflow: hidden;
        font-size: px-to-rem($ouds-button-size-icon-only);
        line-height: 1;
        color: var(--#{$prefix}text-input-label-color);
        content: "";
        background-color: currentcolor;
        mask: var(--#{$prefix}error-icon) no-repeat 50% / px-to-rem($ouds-button-size-icon-only);
      }

      &:has(> button)::after,
      &:has(.loading-indeterminate, .loading-determinate)::after {
        right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap-trailing-error) - var(--#{$prefix}text-input-border-width-left));
        width: px-to-rem($ouds-button-size-icon-only);
      }

      &:not(.text-input-container-outlined) {
        --#{$prefix}text-input-background-color: var(--#{$prefix}color-surface-status-negative-muted);
      }

      &:hover {
        --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-hover);
        --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-hover);
      }
    }

    &:has(.text-input-field:is(:user-invalid, [aria-invalid="true"]):focus) {
      --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-pressed);
      --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-pressed);
      --#{$prefix}text-input-caret-color: var(--#{$prefix}color-action-negative-pressed);
    }

    .loader {
      position: absolute;
      top: 50%;
      right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) + $ouds-button-space-inset-icon-only);
      left: auto;
      display: none;
      width: px-to-rem($ouds-button-size-loader);
      height: px-to-rem($ouds-button-size-loader);
      pointer-events: none;
      transform: translate(0, -50%) rotate(-90deg);

      > .loader-inner {
        fill: none;
        stroke: var(--#{$prefix}color-content-default);
        stroke-dasharray: var(--#{$prefix}loading-dasharray);
        stroke-width: 6;
        transform-origin: center;
        animation: var(--#{$prefix}loading-animation);
      }
    }

    > button .loader {
      position: static;
      transform: rotate(-90deg);
    }

    &:has(.loading-indeterminate) {
      --#{$prefix}loading-dasharray: 96;
      --#{$prefix}loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate;
    }

    &:has(.loading-determinate) {
      --#{$prefix}loading-dasharray: 107;
      --#{$prefix}loading-animation: var(--#{$prefix}loading-time) infinite linear rotate-determinate;
    }

    &:has(.loading-indeterminate, .loading-determinate) {
      > button {
        > svg,
        > img {
          display: none;
        }
      }

      .loader {
        display: block;
      }
    }
  }

  // Helper link
  .text-input-container ~ .link {
    @extend %text-input-message;
  }

  // Helper text and error text visibility handling
  .text-input-container:has(.text-input-field:is(:user-invalid, [aria-invalid="true"])):has(~ .error-text) ~ .helper-text {
    display: none;
  }

  .text-input-container:has(.text-input-field:is(:user-invalid, [aria-invalid="true"])) ~ .error-text {
    display: block;
  }
}


//
// Text area
//

.text-area {
  @extend %text-item-common;

  &.component-max-width {
    max-width: px-to-rem($ouds-text-area-size-max-width);
  }

  .text-area-container {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: var(--#{$prefix}text-input-min-width);

    padding-top: calc($ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-top));
    background-color: var(--#{$prefix}text-input-background-color);
    background-clip: padding-box;
    border-color: var(--#{$prefix}text-input-border-color);
    border-style: solid;
    border-width: var(--#{$prefix}text-input-border-width-top) var(--#{$prefix}text-input-border-width-right) var(--#{$prefix}text-input-border-width-bottom) var(--#{$prefix}text-input-border-width-left);
    @include get-font-size("label-large");
    @include border-radius(var(--#{$prefix}text-input-border-radius), 0);

    &.text-area-container-outlined {
      --#{$prefix}text-input-background-color: transparent;
      --#{$prefix}text-input-border-width-top: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-right: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-default};
    }

    > label {
      z-index: 2;
      padding-right: calc($ouds-text-input-space-padding-inline-trailing-action + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap) - var(--#{$prefix}text-input-border-width-right));
      padding-left: calc(#{$ouds-text-input-space-padding-inline-default} - var(--#{$prefix}text-input-border-width-left));
      overflow: hidden;
      color: var(--#{$prefix}text-input-label-color);
      text-overflow: ellipsis;
      white-space: nowrap;
      @include get-font-size("label-small");

      // Allow the whole text-area-container to be clickable to focus the input
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: text;
        content: "";
        background-color: transparent;
      }

      // stylelint-disable-next-line selector-no-qualifying-type
      &.is-required {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding-right: 7px;

        &::after {
          right: 0;
          margin-left: 3px;
        }
      }
    }

    .text-area-field {
      z-index: 3;
      width: 100%;
      height: calc(px-to-rem($ouds-text-area-size-min-height-input) * 2 + $ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-bottom));
      min-height: calc(px-to-rem($ouds-text-area-size-min-height-input) + $ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-bottom));
      max-height: px-to-rem($ouds-text-area-size-max-height-input);
      padding: 0;
      padding-right: calc($ouds-text-input-space-padding-inline-trailing-action + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap) - var(--#{$prefix}text-input-border-width-right));
      padding-bottom: calc(#{$ouds-text-area-space-padding-block} - var(--#{$prefix}text-input-border-width-bottom));
      padding-left: calc(#{$ouds-text-input-space-padding-inline-default} - var(--#{$prefix}text-input-border-width-left));
      font-weight: $ouds-font-weight-system-web-moderate;
      color: var(--#{$prefix}text-input-color);
      appearance: none;
      caret-color: var(--#{$prefix}text-input-caret-color);
      resize: vertical;
      background-color: transparent;
      border: 0;
      box-shadow: none;

      // Disable resize on touch devices
      @media (pointer: coarse) and (not (any-pointer: fine)) {
        resize: none;
      }

      @supports (field-sizing: content) {
        height: unset;
        field-sizing: content;  // Not yet standard, but supported in some browsers
      }

      &:focus,
      &:focus-visible {
        outline: 0;
      }
    }

    // Hover state styles
    &:hover:has(.text-area-field:not(:focus, :disabled, :read-only, :user-invalid, [aria-invalid="true"])) {
      --#{$prefix}text-input-border-color: #{$ouds-text-input-color-border-hover};

      &:not(.text-area-container-outlined) {
        --#{$prefix}text-input-background-color: #{$ouds-color-action-support-hover};
      }
    }

    // Focused state styles
    &:has(.text-area-field:focus) {
      --#{$prefix}text-input-border-width-bottom: #{$ouds-text-input-border-width-focus};

      &.text-area-container-outlined {
        --#{$prefix}text-input-border-width-top: #{$ouds-text-input-border-width-focus};
        --#{$prefix}text-input-border-width-right: #{$ouds-text-input-border-width-focus};
        --#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-focus};
      }
    }

    &:has(.text-area-field:focus:not(:disabled, :read-only, :user-invalid, [aria-invalid="true"])) {
      --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-pressed);
      --#{$prefix}text-input-border-color: #{$ouds-text-input-color-border-focus};

      &.text-area-container-outlined {
        --#{$prefix}text-input-background-color: transparent;
      }
    }

    // Read only inputs
    &:has(.text-area-field:read-only:not(:disabled)) {
      --#{$prefix}text-input-background-color: transparent;
      --#{$prefix}text-input-border-color: #{$ouds-color-border-muted};
      --#{$prefix}text-input-border-width-top: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-right: #{$ouds-text-input-border-width-default};
      --#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-default};

      outline: 0;

      &.text-area-container-outlined {
        --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-disabled);
        --#{$prefix}text-input-border-width-top: 0px;
        --#{$prefix}text-input-border-width-right: 0px;
        --#{$prefix}text-input-border-width-bottom: 0px;
        --#{$prefix}text-input-border-width-left: 0px;
      }
    }

    // Disabled inputs
    &:has(.text-area-field:disabled) {
      --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-disabled);
      --#{$prefix}text-input-color: var(--#{$prefix}color-action-disabled);
      --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-disabled);

      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
      opacity: 1;

      > label::before {
        cursor: default;
      }

      &:not(.text-area-container-outlined) {
        --#{$prefix}text-input-background-color: var(--#{$prefix}color-action-support-disabled);
      }
    }

    // Invalid text inputs
    &:has(.text-area-field:is(:user-invalid, [aria-invalid="true"])) {
      --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-enabled);
      --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-enabled);

      .text-area-field,
      label {
        padding-right: calc(var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
      }

      &::after {
        position: absolute;
        top: calc(px-to-rem($ouds-text-area-size-max-height-assets-container) / 2 + ($ouds-text-area-space-padding-block) - var(--#{$prefix}text-input-border-width-top));
        right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left));
        width: var(--#{$prefix}text-input-trailing-action-width);
        height: var(--#{$prefix}text-input-trailing-action-height);
        overflow: hidden;
        font-size: px-to-rem($ouds-button-size-icon-only);
        line-height: 1;
        color: var(--#{$prefix}text-input-label-color);
        content: "";
        background-color: currentcolor;
        mask: escape-svg(var(--#{$prefix}error-icon)) no-repeat 50% / px-to-rem($ouds-button-size-icon-only);
        transform: translateY(-50%);
      }

      &:not(.text-area-container-outlined) {
        --#{$prefix}text-input-background-color: var(--#{$prefix}color-surface-status-negative-muted);
      }

      &:hover {
        --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-hover);
        --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-hover);
      }
    }

    &:has(.text-area-field:is(:user-invalid, [aria-invalid="true"]):focus) {
      --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-pressed);
      --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-pressed);
      --#{$prefix}text-input-caret-color: var(--#{$prefix}color-action-negative-pressed);
    }
  }

  // Helper link
  .text-area-container ~ .link {
    @extend %text-input-message;
  }

  // Helper text and error text visibility handling
  .text-area-container:has(.text-area-field:is(:user-invalid, [aria-invalid="true"])):has(~ .error-text) ~ .helper-text {
    display: none;
  }

  .text-area-container:has(.text-area-field:is(:user-invalid, [aria-invalid="true"])) ~ .error-text {
    display: block;
  }
}


//
// Text item helper and error messages
//

// Shared styles for helpers and error messages
%text-input-message {
  --#{$prefix}text-input-message-margin-top: #{$ouds-text-input-space-padding-block-top-helper-text};

  padding-right: var(--#{$prefix}text-input-padding-x);
  padding-left: var(--#{$prefix}text-input-padding-x);
}

// Helper text
.helper-text{
  @extend %text-input-message;
  margin-top: var(--#{$prefix}text-input-message-margin-top);
  margin-bottom: 0;
  color: var(--#{$prefix}color-content-muted);
  @include get-font-size("label-medium");
}

// Error text message
.error-text {
  @extend %text-input-message;
  display: none;
  margin-top: var(--#{$prefix}text-input-message-margin-top);
  margin-bottom: 0;
  color: var(--#{$prefix}color-content-status-negative);
  @include get-font-size("label-medium");
}