fix: special requests

components/TempDesignSystem/Form/TextArea/textarea.module.css

@@ -0,0 +1,72 @@
+.helpText {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-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-Medium);
+  display: grid;
+  min-width: 0; /* allow shrinkage */
+  grid-template-rows: auto 1fr;
+  height: 138px;
+  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-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);
+}