From df9824d4e642e55f0fe4e322858c95f415a900f5 Mon Sep 17 00:00:00 2001
From: Roel Berends <r.berends@ditpsoftware.nl>
Date: Wed, 27 Nov 2024 16:36:58 +0100
Subject: [PATCH] chore: updates to text area scss

---
 .../src/textarea/index.scss                   | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/component-library-angular/src/textarea/index.scss b/packages/component-library-angular/src/textarea/index.scss
index 1c14d2fd..b8dc47de 100644
--- a/packages/component-library-angular/src/textarea/index.scss
+++ b/packages/component-library-angular/src/textarea/index.scss
@@ -1,4 +1,54 @@
 .utrecht-textarea {
   min-block-size: 5em;
   min-inline-size: 5em;
+
+  &:hover:not(:disabled, :focus, :focus-visible) {
+    background-color: var(
+      --tilburg-form-control-hover-background-color,
+      var(
+        --utrecht-form-control-focus-background-color,
+        var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))
+      )
+    );
+    border-color: var(
+      --tilburg-form-control-hover-border-color,
+      var(
+        --utrecht-form-control-focus-border-color,
+        var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))
+      )
+    );
+    color: var(
+      --tilburg-form-control-hover-color,
+      var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))
+    );
+  }
+
+  &:focus-visible:not(:disabled) {
+    --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+      var(--utrecht-focus-inverse-outline-color, transparent);
+
+    background-color: var(
+      --utrecht-textarea-focus-background-color,
+      var(
+        --utrecht-form-control-focus-background-color,
+        var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))
+      )
+    );
+    border-color: var(
+      --utrecht-textarea-focus-border-color,
+      var(
+        --utrecht-form-control-focus-border-color,
+        var(--utrecht-texarea-border-color, var(--utrecht-form-control-border-color))
+      )
+    );
+    box-shadow: var(--_utrecht-focus-ring-box-shadow);
+    color: var(
+      --utrecht-textbox-focus-color,
+      var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))
+    );
+    outline-color: var(--utrecht-focus-outline-color, revert);
+    outline-offset: var(--utrecht-focus-outline-offset, revert);
+    outline-style: var(--utrecht-focus-outline-style, revert);
+    outline-width: var(--utrecht-focus-outline-width, revert);
+  }
 }