Change colour scheme of inline datepicker and remove obsolete styles

frontend/src/app/shared/components/datepicker/datepicker.modal.sass

@@ -7,7 +7,6 @@
   // drastically increase the width.
   max-width: 730px
   box-shadow: $spot-shadow-light-mid
-  padding: 1rem
 
   &--dates-container
     display: grid

frontend/src/global_styles/content/_datepicker.sass

@@ -26,9 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-$datepicker--border-radius: 2px
-$datepicker--line-height:   28px
-$datepicker--hover-color:   #DDDDDD
+$datepicker--border-radius: 5px
 
 .flatpickr-current-month
   display: flex !important
@@ -38,84 +36,58 @@ $datepicker--hover-color:   #DDDDDD
   left: 65% !important
 
 .flatpickr-calendar.inline
-  width: initial !important
-  top: 0 !important
-  margin: 0 1.5rem
-  padding-top: 10px !important
-  border-top: 1px solid $datepicker--hover-color !important
-  border-radius: 0 !important
   box-shadow: none !important
+  @include spot-caption
 
   .flatpickr-months
     min-height: 45px
-    .flatpickr-prev-month,
-    .flatpickr-next-month
-      top: unset
-
-  .flatpickr-monthDropdown-months
-    display: inline-block
 
   .flatpickr-weekwrapper
     display: none
 
   .flatpickr-weekday
     color: var(--body-font-color)
-    font-size: var(--body-font-size)
 
   .flatpickr-weekdaycontainer,
   .flatpickr-days .dayContainer
-    padding: 0.75rem 0.75rem 15px 0.75rem
+    padding: 0 1.25rem
 
   .flatpickr-days
     .dayContainer
       box-shadow: none
 
       .flatpickr-day
-        height: $datepicker--line-height
-        line-height: $datepicker--line-height
+        color: $spot-color-basic-black
+        height: 30px
+        line-height: 28px
         border-radius: $datepicker--border-radius
+        box-shadow: none !important
 
         &:nth-child(7n+7),
         &:nth-child(7n+6)
-          background: var(--gray-light)
-          border-radius: 0
-
-        &:nth-child(7n+6)
-          box-shadow: 5px 0 0 var(--gray-light)
+          background: $spot-color-basic-gray-6
 
         &.today
-          border-color: var(--light-gray) !important
-          &:hover:not(.selected)
-            color: var(--body-font-color)
-
-        &.selected
-          background: var(--primary-color)
-          border-color: var(--primary-color)
-          &.startRange
-            border-radius: 2px 0 0 2px
-          // Workaround to close the gap caused by original styles
-          &.endRange
-            border-radius: 0 2px 2px 0
-            box-shadow: none
-          &:hover
-            background: var(--primary-color-dark)
-            border-color: var(--primary-color-dark)
+          background: $spot-color-indication-current-date
+          border-color: $spot-color-indication-current-date
+
+        &.selected,
+        &.startRange,
+        &.endRange
+          background: $spot-color-main
+          border-color: $spot-color-main
+          color: $spot-color-basic-white
+
+        &.startRange
+          border-radius: $datepicker--border-radius 0 0 $datepicker--border-radius
+
+        &.endRange
+          border-radius: 0 $datepicker--border-radius $datepicker--border-radius 0
+
+        &.endRange.startRange
+          border-radius: $datepicker--border-radius
 
         &.inRange
-          background: $datepicker--hover-color
-          border-color: $datepicker--hover-color
+          background: $spot-color-feedback-info-light
+          border-color: $spot-color-feedback-info-light
           border-radius: 0
-          &:nth-child(7n+7)
-            box-shadow: none
-          &:hover
-            background: var(--light-gray)
-            border-color: var(--light-gray)
-
-        &.inRange:not(:nth-child(7n+7)),
-        &.selected.startRange:not(:nth-child(7n+7))
-          box-shadow: 5px 0 0 $datepicker--hover-color
-
-        &:hover
-          background: $datepicker--hover-color
-          border-color: $datepicker--hover-color
-          border-radius: $datepicker--border-radius