upgrade Materio to 2.2.1

src/styles/desktop/template/base/_components.scss

@@ -2,9 +2,10 @@
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "./mixins";
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "@/styles/desktop/template/layout/placeholders";
+@use "@/styles/desktop/template/layout/mixins" as layoutMixins;
 @use "@/styles/desktop/configured-variables/template" as variables;
+@use "@/styles/desktop/template/vuetify/variables" as vuetify;
 
 // 👉 Avatar group
 .v-avatar-group {
@@ -68,6 +69,17 @@
     }
 }
 
+// 👉 Datatable
+.v-data-table-footer__pagination {
+    @include layoutMixins.rtl {
+        .v-btn {
+            .v-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
+
 // Dialog responsive width
 .v-dialog {
     // dialog custom close btn
@@ -75,8 +87,8 @@
         position: absolute;
         z-index: 1;
         color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
-        inset-block-start: 0.9375rem;
-        inset-inline-end: 0.9375rem;
+        inset-block-start: 0.5rem;
+        inset-inline-end: 0.5rem;
 
         .v-btn__overlay {
             display: none;
@@ -119,8 +131,23 @@
     }
 }
 
-// v-tab with pill support
+// 👉 Expansion panel
+.v-expansion-panels.customized-panels {
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: vuetify.$border-radius-root;
 
+    .v-expansion-panel-title {
+        background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
+        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+        margin-block-end: -1px;
+    }
+
+    .v-expansion-panel-text__wrapper {
+        padding: 20px;
+    }
+}
+
+// v-tab with pill support
 .v-tabs.v-tabs-pill {
     .v-tab.v-btn {
         border-radius: 0.25rem !important;
@@ -151,10 +178,7 @@
     }
 }
 
-// 👉 Textarea
-
-.v-textarea .v-field__input {
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -webkit-mask-image: none !important;
-    mask-image: none !important;
+// 👉 Switch
+.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+    color: #fff !important;
 }