From 06cc569f20971f3063458b36bedbcc43b25b5a33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Wed, 25 Sep 2024 16:19:59 +0200
Subject: [PATCH] chore(styles): added additional param for outline style

---
 packages/styles/src/mixins/_utilities.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index b894c0cae0..1d0342456d 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -98,7 +98,8 @@
   $additional-selector: '',
   $offset: spacing.$size-line,
   $width: spacing.$size-line,
-  $color: var(--post-focus-color)
+  $color: var(--post-focus-color),
+  $style: solid
 ) {
   &#{$additional-selector} {
     outline-style: none !important; // !important is needed to override bootstrap .form-control:focus
@@ -109,7 +110,7 @@
 
   // :has(:focus-visible) mimic a focus-visible-within pseudo-class
   &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
-    outline-style: solid !important;
+    outline-style: $style !important;
 
     @include high-contrast-mode() {
       outline-color: Highlight !important;
@@ -122,7 +123,7 @@
   // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
   @supports not selector(:has(:focus-visible)) {
     &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
-      outline-style: solid !important;
+      outline-style: $style !important;
 
       @include high-contrast-mode() {
         outline-color: Highlight !important;