header shadow, css optimisations

components/Calendar.vue

@@ -115,7 +115,7 @@
 </script>
 
 <style lang="scss" scoped>
-    @import "assets/style";
+    @import "assets/variables";
 
     .calendar {
         display: grid;
@@ -171,7 +171,7 @@
                 }
                 &:hover, &.day-selected {
                     background: lighten($primary, 25%) !important;
-                    @extend .shadow;
+                    box-shadow: $box-shadow;
                     .day-number {
                         color: $white;
                     }
@@ -179,7 +179,7 @@
             }
             &.day-today {
                 border: 3px solid $black !important;
-                @extend .shadow;
+                box-shadow: $box-shadow;
             }
             .day-tooltip {
                 position: absolute;

components/Header.vue

@@ -394,6 +394,7 @@
             @supports not (backdrop-filter: blur(12px)) {
                 background-color: $white;
             }
+            box-shadow: $box-shadow;
         }
 
         .nav-custom:not(.nav-custom-start) {

components/OpinionListInput.vue

@@ -68,7 +68,7 @@
 </script>
 
 <style lang="scss">
-    @import "assets/style";
+    @import "assets/variables";
 
     @include media-breakpoint-down('sm', $grid-breakpoints) {
         .btn-thin {

routes/calendar.vue

@@ -91,7 +91,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "assets/style";
+@import "assets/variables";
 
 @for $i from 3 to 5 {
     @include media-breakpoint-up('lg', $grid-breakpoints) {