fix(styles): new focus mixin integrated

packages/styles/src/components/datepicker.scss

@@ -5,7 +5,9 @@
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
+@use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
+@use './../mixins/utilities';
 
 @use './../themes/bootstrap/core' as b;
 
@@ -21,8 +23,9 @@ ngb-datepicker.dropdown-menu {
 ngb-datepicker-navigation {
   justify-content: space-between;
 
-  button.ngb-dp-arrow-btn:focus-visible {
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+  button.ngb-dp-arrow-btn {
+    @include utilities.focus-style();
+    outline-width: spacing.$size-line !important;
   }
 }
 
@@ -35,9 +38,10 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select {
     background-position: right;
 
     &:focus {
+      outline-style: solid;
+      box-shadow: none;
       border-radius: commons.$border-radius;
-      background-color: transparent;
-      box-shadow: inset 0 0 0 commons.$border-thick color.$black;
+      @include utilities.focus-style();
     }
 
     + select {
@@ -108,7 +112,9 @@ span.ngb-dp-navigation-chevron {
     height: 40px !important;
     line-height: 40px;
     &.active:not(.bg-primary) {
-      outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+      @include utilities.focus-style();
+      outline-style: solid;
+      border-radius: commons.$border-radius !important;
     }
   }
 }
@@ -161,7 +167,13 @@ span.ngb-dp-navigation-chevron {
     transform: none;
   }
   &:focus-visible {
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+    outline: none;
+    & .pi {
+      @include utilities.focus-style();
+      outline-style: solid;
+      border-radius: commons.$border-radius !important;
+      outline-offset: spacing.$size-micro;
+    }
   }
 }