chore(calendar-event): apply global focus styling (VIV-2327) (#2307)

* chore(calendar-event): add global focus styling

* add white/black outline for overlapping events

* fix call-lint error

* update ui tests snapshots

Author: konradsienkowski

libs/components/src/lib/calendar-event/calendar-event.scss

@@ -16,6 +16,8 @@
 	$default: filled
 );
 @use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
+@use '../../../../shared/src/lib/sass/mixins/focus' as focus;
+@use '../../../../shared/src/lib/sass/mixins/focus' as focus-variables;
 
 :host {
 	display: contents;
@@ -55,6 +57,7 @@
 		#{variables.$indent}: calc(
 			0px + var(#{variables.$overlap-count}, 0) * #{$unit-indent}
 		);
+		#{focus-variables.$focus-stroke-gap-color}: transparent;
 
 		position: absolute;
 		z-index: var(#{variables.$overlap-count});
@@ -85,9 +88,17 @@
 	}
 
 	&:focus {
+		@include focus.focus;
+
 		z-index: 2000;
-		filter: var(#{constants.$vvd-shadow-surface-8dp});
-		outline: none;
+	}
+	:host([overlap-count]) & {
+		#{focus-variables.$focus-stroke-gap-color}: var(
+			#{constants.$vvd-color-canvas}
+		);
+	}
+	:host([overlap-count]) &:not(:focus) {
+		box-shadow: inset 0 0 0 1px var(#{constants.$vvd-color-canvas});
 	}
 }