fix(Textarea): correct outline to be inset (#3237)

<img width="481" alt="Screenshot 2024-01-17 at 20 15 13"
src="https://github.com/dnbexperience/eufemia/assets/1501870/49e75eb2-4f40-45ab-8ef6-7b7dbf33a083">

[CSB
Reprod](https://codesandbox.io/p/sandbox/eufemia-input-vs-textarea-rpsynq)

packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap

@@ -170,7 +170,10 @@ button .dnb-form-status__text {
   bottom: -0.5rem;
   right: -0.5rem;
   background-color: var(--color-white);
-  box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+  --border-color: var(--textarea-border-color);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25rem;
 }
 .dnb-textarea__row {
@@ -350,6 +353,13 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+.dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--textarea-background-color);
@@ -363,14 +373,20 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
   color: var(--color-black-55);
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+  --border-color: var(--textarea-border-color--hover);
+  --border-width: var(--textarea-border-width--hover);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  --border-color: var(--textarea-border-color--disabled);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   background-color: var(--color-black-3);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {

packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss

@@ -51,7 +51,11 @@
     right: -0.5rem;
 
     background-color: var(--color-white);
-    box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+    @include fakeBorder(
+      var(--textarea-border-color),
+      var(--textarea-border-width),
+      inset
+    );
 
     border-radius: 0.25rem;
   }

packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss

@@ -6,6 +6,12 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+
   &__textarea {
     color: var(--color-black);
     background-color: var(--textarea-background-color);
@@ -23,7 +29,10 @@
 
   &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
   &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__state {
-    box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+    @include fakeBorder(
+      var(--textarea-border-color--hover),
+      var(--textarea-border-width--hover)
+    );
   }
 
   // We may enable this in future – right now it's unclear
@@ -41,7 +50,11 @@
 
   &--disabled &__state,
   &__textarea[disabled] ~ &__state {
-    box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+    @include fakeBorder(
+      var(--textarea-border-color--disabled),
+      var(--textarea-border-width),
+      inset
+    );
     background-color: var(--color-black-3);
   }