.helpText {
  align-items: flex-start;
  display: flex;
  gap: var(--Space-x05);
}

.error {
  align-items: center;
  color: var(--Scandic-Red-60);
  display: flex;
  gap: var(--Space-x05);
  margin: var(--Space-x1) 0 0;
}

.container {
  background-color: var(--Main-Grey-White);
  border-color: var(--Scandic-Beige-40);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-radius-md);
  display: grid;
  min-width: 0; /* allow shrinkage */
  grid-template-rows: auto 1fr;
  height: 138px;
  padding: var(--Space-x3) var(--Space-x2) 0 var(--Space-x2);
  transition: border-color 200ms ease;
}

.container:has(.textarea:active, .textarea:focus) {
  border-color: var(--Scandic-Blue-90);
}

.container:has(.textarea:disabled) {
  background-color: var(--Main-Grey-10);
  border: none;
  color: var(--Main-Grey-40);
}

.container:has(.textarea[data-invalid='true'], .textarea[aria-invalid='true']) {
  border-color: var(--Scandic-Red-60);
}

.textarea {
  background: none;
  border: none;
  color: var(--Main-Grey-100);
  height: 100%;
  width: 100%;
  margin: 0;
  order: 2;
  overflow: visible;
  padding: 0;
  resize: none;
}

.textarea:not(:active, :focus):placeholder-shown {
  height: 88px;
  transition: height 150ms ease;
}

.textarea:focus,
.textarea:focus:placeholder-shown,
.textarea:active,
.textarea:active:placeholder-shown {
  height: 94px;
  transition: height 150ms ease;
  outline: none;
}

.textarea:disabled {
  color: var(--Main-Grey-40);
}