.rt-TextAreaRoot {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  font-family: var(--default-font-family);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  text-align: start;

  /* Allows the `resize` property to work on the div */
  overflow: hidden;

  &:where(:focus-within) {
    outline: 2px solid var(--focus-8);
    outline-offset: -1px;
  }
}

.rt-TextAreaInput {
  border-radius: inherit;
  resize: none;

  display: block;
  width: 100%;
  flex-grow: 1;

  /* scrollbar */
  & {
    /* Arrow mouse cursor over the scrollbar */
    cursor: auto;
  }
  &::-webkit-scrollbar {
    width: var(--space-3);
    height: var(--space-3);
  }
  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    background-clip: content-box;
    border: var(--space-1) solid transparent;
    border-radius: var(--space-3);
  }
  &::-webkit-scrollbar-track {
    background-color: var(--gray-a3);
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--gray-a8);
  }
  @media (hover: hover) {
    :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
      background-color: var(--gray-a9);
    }
  }
  &:where(:autofill, [data-com-onepassword-filled]) {
    /* Reliably removes native autofill colors */
    background-clip: text;
    -webkit-text-fill-color: var(--gray-12);
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

.rt-TextAreaRoot {
  box-sizing: border-box;
  padding: var(--text-area-border-width);
}
.rt-TextAreaInput {
  padding: var(--text-area-padding-y) var(--text-area-padding-x);
}

@breakpoints {
  .rt-TextAreaRoot {
    &:where(.rt-r-size-1) {
      min-height: var(--space-8);
      border-radius: var(--radius-2);

      & :where(.rt-TextAreaInput) {
        /* Clip text to border */
        --text-area-padding-y: calc(var(--space-1) - var(--text-area-border-width));
        --text-area-padding-x: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
        font-size: var(--font-size-1);
        line-height: var(--line-height-1);
        letter-spacing: var(--letter-spacing-1);
      }
    }
    &:where(.rt-r-size-2) {
      min-height: var(--space-9);
      border-radius: var(--radius-2);

      & :where(.rt-TextAreaInput) {
        /* Clip text to border */
        --text-area-padding-y: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
        font-size: var(--font-size-2);
        line-height: var(--line-height-2);
        letter-spacing: var(--letter-spacing-2);
      }
    }
    &:where(.rt-r-size-3) {
      min-height: 80px;
      border-radius: var(--radius-3);

      & :where(.rt-TextAreaInput) {
        /* Clip text to border */
        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
        font-size: var(--font-size-3);
        line-height: var(--line-height-3);
        letter-spacing: var(--letter-spacing-3);
      }
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

/* surface */
.rt-TextAreaRoot:where(.rt-variant-surface) {
  --text-area-border-width: 1px;

  /* Blend inner shadow with page background */
  background-clip: content-box;
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a7);
  color: var(--gray-12);

  & :where(.rt-TextAreaInput) {
    &::placeholder {
      color: var(--gray-a10);
    }
  }

  /* prettier-ignore */
  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
    /* Blend with focus color */
    background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
    box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
  }

  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
    /* Blend with grey */
    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
  }
}

/* classic */
.rt-TextAreaRoot:where(.rt-variant-classic) {
  --text-area-border-width: 1px;

  /* Blend inner shadow with page background */
  background-clip: content-box;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-1);
  color: var(--gray-12);

  & :where(.rt-TextAreaInput) {
    &::placeholder {
      color: var(--gray-a10);
    }
  }

  /* prettier-ignore */
  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
    /* Blend with focus color */
    background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
    box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
  }

  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
    /* Blend with grey */
    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
  }
}

/* soft */
.rt-TextAreaRoot:where(.rt-variant-soft) {
  --text-area-border-width: 0px;

  background-color: var(--accent-a3);
  color: var(--accent-12);

  & :where(.rt-TextAreaInput) {
    &::selection {
      /* Use gray selection when component color is gray */
      background-color: var(--accent-a5);
    }
    &::placeholder {
      color: var(--accent-12);
      opacity: 0.65;
    }
  }

  &:where(:focus-within) {
    /* Use gray outline when component color is gray */
    outline-color: var(--accent-8);
  }

  /* prettier-ignore */
  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
    /* Use gray autofill color when component color is gray */
    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
  }

  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
    background-color: var(--gray-a3);
  }
}

/* all disabled and read-only text-areas */
.rt-TextAreaInput {
  &:where(:disabled, :read-only) {
    cursor: text;
    color: var(--gray-a11);
    /* Safari */
    -webkit-text-fill-color: var(--gray-a11);

    &::placeholder {
      opacity: 0.5;
    }
    &:where(:placeholder-shown) {
      cursor: var(--cursor-disabled);
    }
    &::selection {
      background-color: var(--gray-a5);
    }
    .rt-TextAreaRoot:where(:focus-within:has(&)) {
      outline-color: var(--gray-8);
    }
  }
}