fix date picker style

components/Ui/Input/DateRangePicker.vue

@@ -81,19 +81,46 @@ const dateRangePickerAltPosition = (el: HTMLElement) => {
 }
 </script>
 
-<style scoped lang="scss">
-  :deep(div[role="textbox"]) {
-    height: 100% !important;
-    max-height: 100% !important;
-  }
+<style lang="scss">
 
-  :deep(.dp__input_wrap) {
-    height: 100% !important;
-    max-height: 100% !important;
+  // @see https://vue3datepicker.com/customization/theming/
+  // [!] Sass variables overriding does not work in scoped mode
+  .dp__theme_light, .dp__theme_dark {
+    --dp-background-color: #ffffff;
+    --dp-text-color: #212121;
+    --dp-hover-color: #f3f3f3;
+    --dp-hover-text-color: #212121;
+    --dp-hover-icon-color: #959595;
+    --dp-primary-color: rgb(var(--v-theme-primary)) !important;
+    --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
+    --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
+    --dp-border-color: #ddd;
+    --dp-menu-border-color: #ddd;
+    --dp-border-color-hover: #aaaeb7;
+    --dp-disabled-color: #f6f6f6;
+    --dp-scroll-bar-background: #f3f3f3;
+    --dp-scroll-bar-color: #959595;
+    --dp-success-color: rgb(var(--v-theme-success)) !important;
+    --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
+    --dp-icon-color: #959595;
+    --dp-danger-color: #ff6f60;
+    --dp-highlight-color: rgba(25, 118, 210, 0.1);
   }
 
-  :deep(.date-range-picker-input) {
+  .date-range-picker {
+    div[role="textbox"] {
+      height: 100% !important;
+      max-height: 100% !important;
+    }
+
+    .dp__input_wrap {
+      height: 100% !important;
+      max-height: 100% !important;
+    }
+
+    .date-range-picker-input {
       height: 100% !important;
       max-height: 100% !important;
+    }
   }
 </style>