routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/components/VDatePicker/VDatePickerControls.sass

@@ -0,0 +1,64 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-date-picker-controls
+    display: flex
+    align-items: center
+    justify-content: space-between
+    font-size: .875rem
+    height: $date-picker-controls-height
+    padding: $date-picker-controls-padding
+
+    .v-btn
+      text-transform: none
+      font-weight: 400
+      line-height: initial
+      letter-spacing: initial
+
+      > .v-btn__append > .v-icon
+        // matching VBtn for icon rotation
+        transition-property: transform
+        transition-duration: 0.28s
+        transition-timing-function: settings.$standard-easing
+
+    .v-date-picker--months &
+      .v-date-picker-controls__only-month-btn
+        > .v-btn__append > .v-icon
+          transform: rotate(180deg)
+
+    .v-date-picker--year &
+      .v-date-picker-controls__mode-btn
+        transform: rotate(180deg)
+      .v-date-picker-controls__year-btn,
+      .v-date-picker-controls__only-year-btn
+        > .v-btn__append > .v-icon
+          transform: rotate(180deg)
+
+    &__date
+      margin-inline-end: 4px
+
+    &__month,
+    &__year
+      display: flex
+
+      @include tools.rtl()
+        flex-direction: row-reverse
+
+    & &__month-btn,
+    & &__year-btn
+      padding: 0 12px
+
+    & &__only-month-btn,
+    & &__only-year-btn
+      padding-inline: $date-picker-controls-docked-toggle-btn-padding
+
+      // just lower than default
+      min-width: 40px
+
+      > .v-btn__append
+        margin-inline: $date-picker-controls-docked-toggle-append-margin-inline
+
+  .v-date-picker__title
+    display: inline-block