Change focus style

frontend/src/app/spot/styles/sass/components/button.sass

@@ -22,7 +22,8 @@
   &, *
     box-sizing: border-box
 
-  @include spot-focus
+  &:focus
+    @include spot-focus
 
   &:hover
     background-color: $spot-color-basic-gray-6

frontend/src/app/spot/styles/sass/components/checkbox.sass

@@ -6,7 +6,7 @@
   width: $spot-spacing-1_5
 
   &:focus-within &--fake
-    outline: $spot-focus
+    @include spot-focus
 
   &, *
     box-sizing: border-box

frontend/src/app/spot/styles/sass/components/filter-chip.sass

@@ -18,7 +18,8 @@
     cursor: pointer
     padding: $spot-spacing-0_25
 
-    @include spot-focus
+    &:focus
+      @include spot-focus
 
   &--title
     padding: $spot-spacing-0_25

frontend/src/app/spot/styles/sass/components/text-field.sass

@@ -16,7 +16,7 @@
   &:focus,
   &_focused
     color: $spot-color-basic-black
-    outline: $spot-focus
+    @include spot-focus
 
   &--input
     background: transparent
@@ -40,7 +40,8 @@
     font-size: $spot-spacing-0_75
     color: $spot-color-basic-gray-3
 
-    @include spot-focus
+    &:focus
+      @include spot-focus
 
     &:not(:last-child)
       margin-right: $spot-spacing-0_5

frontend/src/app/spot/styles/sass/components/toggle.sass

@@ -20,7 +20,7 @@
     cursor: pointer
 
     &:focus-within
-      outline: $spot-focus
+      @include spot-focus
 
     &:not(:last-child)
       border-right: 0

frontend/src/app/spot/styles/sass/variables/focus.sass

@@ -1,5 +1,6 @@
-$spot-focus: 2px solid $spot-color-indication-attention
+$spot-focus: 1px solid $spot-color-indication-attention
 
 @mixin spot-focus
-  &:focus
+  outline: $spot-focus
-    outline: $spot-focus
+  outline-offset: -1px
+  box-shadow: 0 0 1px 0 $spot-color-indication-attention