TextArea.css

.textArea {
  position: relative;
  max-width: 100%;

  &.fullWidth {
    width: 100%;
  }

  & textarea {
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    font-size: var(--font-size-medium);
    line-height: var(--line-height);
    max-width: 100%;
  }
}

.lockWidth {
  min-width: 100%;
  max-width: 100%;
}

.startControls,
.endControls {
  position: absolute;
  inset-inline-end: 8px; /* leave some space for textarea's resize control */
  bottom: 1px; /* makes the controls look more vertically centered in single line textareas */
  pointer-events: none;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex: 0;
}

.startControls {
  justify-content: flex-start;
  padding: 0 0 0 var(--input-horizontal-padding);
}

[dir="rtl"] .startControls {
  padding: 0 var(--input-horizontal-padding) 0 0;
}

.endControls {
  justify-content: flex-end;
  padding: 0 var(--input-horizontal-padding) 0 0;
}

[dir="rtl"] .endControls {
  padding: 0 0 0 var(--input-horizontal-padding);
}

.controlGroup {
  pointer-events: all;
  display: flex;
  align-items: center;
}