From b1d47748c87f933753bda03c6496f81aa5045b28 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 13 May 2025 22:38:10 +0200
Subject: [PATCH] Use SASS module system

Get rid of all the SASS warnings/errors when building.
---
 src/App.vue                                   |  7 +++--
 src/assets/css/_mixins.scss                   |  1 -
 src/assets/css/_utilities.scss                |  2 ++
 src/assets/css/_variables.scss                |  2 ++
 src/assets/css/channel.scss                   |  4 ++-
 src/assets/css/chat.scss                      | 31 ++++++++++---------
 src/assets/css/components/_poll.scss          |  2 ++
 .../css/components/_voice-recorder.scss       |  2 ++
 src/assets/css/create.scss                    |  2 +-
 src/assets/css/filedrop.scss                  |  2 ++
 src/assets/css/join.scss                      | 13 ++++----
 src/assets/css/login.scss                     |  3 +-
 src/assets/css/main.scss                      |  7 +++--
 src/assets/css/typography.scss                |  2 +-
 src/assets/css/vendors/_v-emoji-picker.scss   |  7 +++--
 src/components/ActionRow.vue                  |  3 +-
 src/components/AudioLayout.vue                |  2 +-
 src/components/AuthedImage.vue                |  2 +-
 src/components/BottomSheet.vue                | 10 +++---
 src/components/Chat.vue                       |  2 +-
 src/components/ChatHeader.vue                 |  2 +-
 src/components/ChatHeaderPrivate.vue          |  2 +-
 src/components/Create.vue                     |  5 +--
 src/components/CreateChannel.vue              |  4 +--
 src/components/CreateFileDrop.vue             |  4 +--
 src/components/CreatePollDialog.vue           |  4 +--
 src/components/CreateRoom.vue                 |  2 +-
 src/components/GetLink.vue                    |  4 +--
 src/components/InputControl.vue               |  2 +-
 src/components/InteractiveAuth.vue            |  2 +-
 src/components/Invite.vue                     |  2 +-
 src/components/Join.vue                       |  2 +-
 src/components/LeaveRoomDialog.vue            |  2 +-
 src/components/Login.vue                      |  2 +-
 .../MessageOperationsBottomSheet.vue          |  9 ++++--
 src/components/MessageRetentionDialog.vue     |  3 +-
 src/components/MoreLessControl.vue            |  2 +-
 src/components/MoreMenuPopup.vue              |  9 +++---
 src/components/NoHistoryRoomWelcomeHeader.vue |  2 +-
 src/components/Profile.vue                    |  2 +-
 src/components/ProfileInfoPopup.vue           |  9 +++---
 src/components/PurgeRoomDialog.vue            |  2 +-
 src/components/QRCodePopup.vue                |  2 +-
 src/components/QuoteView.vue                  |  2 +-
 src/components/ReportRoomDialog.vue           |  2 +-
 src/components/RoomDialogBase.vue             |  2 +-
 src/components/RoomInfo.vue                   |  2 +-
 src/components/RoomInfoBottomSheet.vue        |  2 +-
 src/components/RoomList.vue                   |  2 +-
 src/components/RoundedDialog.vue              |  2 +-
 src/components/SelectLanguageDialog.vue       |  2 +-
 src/components/StickerPickerBottomSheet.vue   |  2 +-
 src/components/UserProfileDialog.vue          |  2 +-
 src/components/VoiceRecorder.vue              |  4 +--
 src/components/VoiceRecorderLock.vue          |  2 +-
 src/components/YouAre.vue                     |  2 +-
 src/components/create/CreateRoomAvatar.vue    |  3 +-
 src/components/file_mode/FileDropLayout.vue   |  2 +-
 src/components/file_mode/GalleryItemsView.vue |  2 +-
 src/components/file_mode/ThumbnailView.vue    |  2 +-
 src/components/messages/AudioPlayer.vue       |  2 +-
 src/components/messages/AudioWaveformView.vue |  2 +-
 src/components/messages/ContactBanned.vue     |  2 +-
 src/components/messages/ContactChanged.vue    |  2 +-
 src/components/messages/ContactInvited.vue    |  2 +-
 src/components/messages/ContactJoin.vue       |  2 +-
 src/components/messages/ContactKicked.vue     |  2 +-
 src/components/messages/ContactLeave.vue      |  2 +-
 src/components/messages/DebugEvent.vue        |  2 +-
 src/components/messages/MessageIncoming.vue   |  2 +-
 .../messages/MessageIncomingAudio.vue         |  2 +-
 .../messages/MessageIncomingFile.vue          |  2 +-
 .../messages/MessageIncomingImage.vue         |  2 +-
 .../messages/MessageIncomingPoll.vue          |  4 +--
 .../messages/MessageIncomingSticker.vue       |  2 +-
 .../messages/MessageIncomingText.vue          |  2 +-
 .../messages/MessageIncomingThread.vue        |  2 +-
 .../messages/MessageIncomingVideo.vue         |  2 +-
 src/components/messages/MessageOperations.vue |  2 +-
 .../messages/MessageOperationsPicker.vue      |  2 +-
 src/components/messages/MessageOutgoing.vue   |  2 +-
 .../messages/MessageOutgoingAudio.vue         |  2 +-
 .../messages/MessageOutgoingFile.vue          |  2 +-
 .../messages/MessageOutgoingImage.vue         |  2 +-
 .../messages/MessageOutgoingPoll.vue          |  4 +--
 .../messages/MessageOutgoingSticker.vue       |  2 +-
 .../messages/MessageOutgoingText.vue          |  2 +-
 .../messages/MessageOutgoingThread.vue        |  2 +-
 .../messages/MessageOutgoingVideo.vue         |  2 +-
 src/components/messages/QuickReactions.vue    |  2 +-
 src/components/messages/ReadMarker.vue        |  2 +-
 src/components/messages/RoomAliased.vue       |  2 +-
 src/components/messages/RoomAvatarChanged.vue |  2 +-
 src/components/messages/RoomCreated.vue       |  2 +-
 .../messages/RoomDeletionNotice.vue           |  2 +-
 src/components/messages/RoomEncrypted.vue     |  2 +-
 .../messages/RoomGuestAccessChanged.vue       |  2 +-
 .../messages/RoomHistoryVisibility.vue        |  2 +-
 src/components/messages/RoomJoinRules.vue     |  2 +-
 src/components/messages/RoomNameChanged.vue   |  2 +-
 .../messages/RoomPowerLevelsChanged.vue       |  2 +-
 src/components/messages/RoomTopicChanged.vue  |  2 +-
 src/components/messages/SeenBy.vue            |  2 +-
 .../channel/MessageOperationsChannel.vue      |  2 +-
 .../channel/QuickReactionsChannel.vue         |  2 +-
 .../channel/SwipeableThumbnailsView.vue       |  2 +-
 .../export/MessageIncomingAudioExport.vue     |  2 +-
 .../export/MessageIncomingFileExport.vue      |  2 +-
 .../export/MessageIncomingImageExport.vue     |  2 +-
 .../export/MessageIncomingThreadExport.vue    |  2 +-
 .../export/MessageIncomingVideoExport.vue     |  2 +-
 .../export/MessageOutgoingAudioExport.vue     |  2 +-
 .../export/MessageOutgoingFileExport.vue      |  2 +-
 .../export/MessageOutgoingImageExport.vue     |  2 +-
 .../export/MessageOutgoingThreadExport.vue    |  2 +-
 .../export/MessageOutgoingVideoExport.vue     |  2 +-
 .../welcome_headers/WelcomeHeaderChannel.vue  |  2 +-
 .../WelcomeHeaderChannelUser.vue              |  2 +-
 .../WelcomeHeaderDirectChat.vue               |  2 +-
 .../welcome_headers/WelcomeHeaderRoom.vue     |  2 +-
 120 files changed, 189 insertions(+), 157 deletions(-)
 delete mode 100644 src/assets/css/_mixins.scss

diff --git a/src/App.vue b/src/App.vue
index c880269..c97b8ed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -226,8 +226,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'vuetify/settings';
-@import '@/assets/css/variables';
+@use '@/assets/css/variables' as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 .copyright {
   font-size: 10px;
@@ -238,7 +239,7 @@ export default {
 }
 
 .main {
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     margin: 0 auto;
     width: $main-desktop-width;
   }
diff --git a/src/assets/css/_mixins.scss b/src/assets/css/_mixins.scss
deleted file mode 100644
index 2ff021f..0000000
--- a/src/assets/css/_mixins.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Sass Mixins
\ No newline at end of file
diff --git a/src/assets/css/_utilities.scss b/src/assets/css/_utilities.scss
index acb95ac..060bf16 100644
--- a/src/assets/css/_utilities.scss
+++ b/src/assets/css/_utilities.scss
@@ -1,3 +1,5 @@
+@use "@/assets/css/variables" as *;
+
 .cursor-pointer {
     cursor: pointer !important;
 }
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index 50c55e4..42d9106 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -1,3 +1,5 @@
+@forward "vuetify/settings";
+
 $font-family: "Poppins";
 $background: #ffffff;
 $app-background: #f6f6f6;
diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss
index 8c2e89b..343da1d 100644
--- a/src/assets/css/channel.scss
+++ b/src/assets/css/channel.scss
@@ -1,3 +1,5 @@
+@use "@/assets/css/variables" as *;
+
 .chat-root.channel {
   background-color: #f2f2f2;
   .chat-content {
@@ -111,6 +113,7 @@
       flex: 0 0 100%;
       margin: 24px 7px 0 7px;
       padding: 0 8px 16px 8px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       .emoji {
         font-size: 12 * $chat-text-size;
         font-weight: 500;
@@ -120,7 +123,6 @@
           height: 21px;
         }
       }
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
 
     /* Make all images 'cover' */
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 07860ca..1a2c77e 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -1,8 +1,11 @@
-@import "vuetify/settings";
-@import "@/assets/css/main.scss";
-@import "@/assets/css/vendors/v-emoji-picker";
-@import "@/assets/css/filedrop.scss";
-@import "@/assets/css/channel.scss";
+@forward "@/assets/css/variables";
+@use "vuetify/settings" as *;
+@use "@/assets/css/variables" as *;
+@use "@/assets/css/main.scss" as *;
+@use "@/assets/css/vendors/v-emoji-picker" as *;
+@use "@/assets/css/filedrop.scss" as *;
+@use "@/assets/css/channel.scss" as *;
+@use "sass:map";
 
 $admin-bg: black;
 $admin-fg: white;
@@ -192,7 +195,7 @@ body {
     }
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+  @media #{map.get($display-breakpoints, 'sm-and-down')} {
     position: fixed;
     z-index: 10;
   }
@@ -237,7 +240,7 @@ body {
       background: #4d4d4d;
     }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       //margin-top: 72px;
       margin-bottom: 70px;
     }
@@ -271,7 +274,7 @@ body {
       margin: 0px 20px;
       padding: 20px;
 
-      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      @media #{map.get($display-breakpoints, 'sm-and-down')} {
         margin: 0px 5px;
         padding: 15px;
       }
@@ -290,7 +293,7 @@ body {
       border: 1px solid #d4d4d4;
       border-radius: 32px;
       margin-bottom: 10px;
-      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      @media #{map.get($display-breakpoints, 'sm-and-down')} {
         margin-bottom: 12px;
       }
     }
@@ -304,7 +307,7 @@ body {
           fill: black;
         }
 
-        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        @media #{map.get($display-breakpoints, 'sm-and-down')} {
           display: none;
         }
       }
@@ -355,7 +358,7 @@ body {
       z-index: 40;
     }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       position: fixed;
       bottom: 0px;
       width: 100%;
@@ -459,7 +462,7 @@ body {
     position: relative;
     max-width: 70%;
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       min-height: $min-touch-target;
     }
   }
@@ -553,7 +556,7 @@ body {
     position: relative;
     max-width: 70%;
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       min-height: $min-touch-target;
     }
   }
@@ -997,7 +1000,7 @@ body {
   }
 
   .filled-button {
-    @media #{map-get($display-breakpoints, 'sm-and-up')} {
+    @media #{map.get($display-breakpoints, 'sm-and-up')} {
       min-width: 180px !important;
     }
   }
diff --git a/src/assets/css/components/_poll.scss b/src/assets/css/components/_poll.scss
index 9541f2f..2d62c81 100644
--- a/src/assets/css/components/_poll.scss
+++ b/src/assets/css/components/_poll.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .poll-bubble {
   width: 70%;
   text-align: start;
diff --git a/src/assets/css/components/_voice-recorder.scss b/src/assets/css/components/_voice-recorder.scss
index 825b3f1..8f326d3 100644
--- a/src/assets/css/components/_voice-recorder.scss
+++ b/src/assets/css/components/_voice-recorder.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .grow-enter-active,
 .grow-leave-active {
   transition-timing-function: ease-out;
diff --git a/src/assets/css/create.scss b/src/assets/css/create.scss
index aab863d..514fd5d 100644
--- a/src/assets/css/create.scss
+++ b/src/assets/css/create.scss
@@ -1,4 +1,4 @@
-@import "@/assets/css/main.scss";
+@use "@/assets/css/main.scss" as *;
 
 
 .create-root {
diff --git a/src/assets/css/filedrop.scss b/src/assets/css/filedrop.scss
index 88968a1..76f7b17 100644
--- a/src/assets/css/filedrop.scss
+++ b/src/assets/css/filedrop.scss
@@ -1,3 +1,5 @@
+@use "@/assets/css/variables" as *;
+
 $large-button-height: $min-touch-target;
 $small-button-height: 36px;
 
diff --git a/src/assets/css/join.scss b/src/assets/css/join.scss
index 9840179..bfc7931 100644
--- a/src/assets/css/join.scss
+++ b/src/assets/css/join.scss
@@ -1,5 +1,6 @@
-@import "vuetify/settings";
-@import "@/assets/css/main.scss";
+@use "vuetify/settings" as *;
+@use "@/assets/css/main.scss" as *;
+@use "sass:map";
 
 .v-btn.btn-light {
     font-family: sans-serif;
@@ -37,7 +38,7 @@
         background: white;
         box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 
-        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        @media #{map.get($display-breakpoints, 'sm-and-down')} {
             padding: 20px;
         }
     }
@@ -58,7 +59,7 @@
         .inactive {
             color: unset;
 
-            @media #{map-get($display-breakpoints, 'sm-and-up')} {
+            @media #{map.get($display-breakpoints, 'sm-and-up')} {
                 &:hover {
                     color: $very-very-purple;
                 }
@@ -152,10 +153,10 @@
         }
     }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
         margin: 10px;
     }
-    @media #{map-get($display-breakpoints, 'md-and-up')} {
+    @media #{map.get($display-breakpoints, 'md-and-up')} {
         width: $main-desktop-width;
         margin: 0 auto;
     }
diff --git a/src/assets/css/login.scss b/src/assets/css/login.scss
index 5a61f47..f95cc17 100644
--- a/src/assets/css/login.scss
+++ b/src/assets/css/login.scss
@@ -1,4 +1,5 @@
-@import "@/assets/css/main.scss";
+@use "@/assets/css/main.scss" as *;
+@use "@/assets/css/variables" as *;
 
 .login-root {
     background-color: $background;
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 27e39c0..8ac5430 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,6 +1,7 @@
-@import './variables';
-@import './utilities';
-@import './mixins';
+@forward 'variables';
+@forward 'utilities';
+@use 'variables' as *;
+@use 'utilities' as *;
 
 @font-face {
     font-family: "Inter";
diff --git a/src/assets/css/typography.scss b/src/assets/css/typography.scss
index 050656f..76bc975 100644
--- a/src/assets/css/typography.scss
+++ b/src/assets/css/typography.scss
@@ -1,4 +1,4 @@
-@import "@/assets/css/main.scss";
+@use "@/assets/css/main.scss" as *;
 
 .h3-bold {
   font-family: "Poppins";
diff --git a/src/assets/css/vendors/_v-emoji-picker.scss b/src/assets/css/vendors/_v-emoji-picker.scss
index 5c0e7d6..5a2287f 100644
--- a/src/assets/css/vendors/_v-emoji-picker.scss
+++ b/src/assets/css/vendors/_v-emoji-picker.scss
@@ -1,3 +1,6 @@
+@use "vuetify/settings" as *;
+@use "sass:map";
+
 .v3-emoji-picker {
     width: 100%;
     background-color: #ffffff;
@@ -7,11 +10,11 @@
     flex: 1 1 100%;
 
     .v3-emojis button {
-        @media #{map-get($display-breakpoints, 'sm')} {
+        @media #{map.get($display-breakpoints, 'sm')} {
             flex-basis: 10% !important;
             max-width: 10% !important;
         }
-        @media #{map-get($display-breakpoints, 'md-and-up')} {
+        @media #{map.get($display-breakpoints, 'md-and-up')} {
             flex-basis: 6.25% !important;
             max-width: 6.25% !important;
         }
diff --git a/src/components/ActionRow.vue b/src/components/ActionRow.vue
index 1e8cefa..02341e3 100644
--- a/src/components/ActionRow.vue
+++ b/src/components/ActionRow.vue
@@ -39,5 +39,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "vuetify/settings";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue
index bb73f35..ed66778 100644
--- a/src/components/AudioLayout.vue
+++ b/src/components/AudioLayout.vue
@@ -445,5 +445,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/AuthedImage.vue b/src/components/AuthedImage.vue
index 9c94e73..f8f5049 100644
--- a/src/components/AuthedImage.vue
+++ b/src/components/AuthedImage.vue
@@ -65,5 +65,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index 10d9dab..5a2b17b 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -161,8 +161,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'vuetify/settings';
-@import '@/assets/css/variables';
+@use 'vuetify/settings' as *;
+@use '@/assets/css/variables' as *;
+@use "sass:map";
+
 .sheetContent {
   position:absolute;
   top:20px;left:0;
@@ -223,7 +225,7 @@ export default {
     z-index: 1;
   }
 
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     margin: 0 auto;
     width: $dialog-desktop-width;
   }
@@ -236,7 +238,7 @@ export default {
 }
 
 .bottom-sheet-content[data-state="small"] {
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     top: 100px !important;
   }
 }
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 3ceca96..94b383d 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -2139,7 +2139,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 .heart-wrapper {
   position: fixed;
   z-index: -1;
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index b775c8c..e25756f 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -241,7 +241,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .popup-open {
   position: relative;
diff --git a/src/components/ChatHeaderPrivate.vue b/src/components/ChatHeaderPrivate.vue
index e558844..e360eaa 100644
--- a/src/components/ChatHeaderPrivate.vue
+++ b/src/components/ChatHeaderPrivate.vue
@@ -97,7 +97,7 @@ export default {
 
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .popup-open {
   position: relative;
diff --git a/src/components/Create.vue b/src/components/Create.vue
index 7ab6ad4..eef7339 100644
--- a/src/components/Create.vue
+++ b/src/components/Create.vue
@@ -62,8 +62,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
+@use "@/assets/css/variables" as *;
 
 .create-title {
   margin-bottom: 24 * $chat-text-size;
diff --git a/src/components/CreateChannel.vue b/src/components/CreateChannel.vue
index 13e2c45..8cc00ab 100644
--- a/src/components/CreateChannel.vue
+++ b/src/components/CreateChannel.vue
@@ -182,6 +182,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/CreateFileDrop.vue b/src/components/CreateFileDrop.vue
index 57c8d2b..aac86f1 100644
--- a/src/components/CreateFileDrop.vue
+++ b/src/components/CreateFileDrop.vue
@@ -190,6 +190,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/CreatePollDialog.vue b/src/components/CreatePollDialog.vue
index 9e34808..1c54b59 100644
--- a/src/components/CreatePollDialog.vue
+++ b/src/components/CreatePollDialog.vue
@@ -198,6 +198,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import "@/assets/css/components/poll.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/components/poll.scss";
 </style>
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 02ce134..f3bef6c 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -394,7 +394,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/create.scss";
+@use "@/assets/css/create.scss";
 
 .avatar-select-control .v-select__selection {
   flex-basis: 100%;
diff --git a/src/components/GetLink.vue b/src/components/GetLink.vue
index 5b4587a..7af93b8 100644
--- a/src/components/GetLink.vue
+++ b/src/components/GetLink.vue
@@ -248,6 +248,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/typography.scss";
-@import "@/assets/css/create.scss";
+@use "@/assets/css/typography.scss";
+@use "@/assets/css/create.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/InputControl.vue b/src/components/InputControl.vue
index e2a7efb..6936e88 100644
--- a/src/components/InputControl.vue
+++ b/src/components/InputControl.vue
@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .input-field {
   width: 100%;
diff --git a/src/components/InteractiveAuth.vue b/src/components/InteractiveAuth.vue
index 147f78a..104dade 100644
--- a/src/components/InteractiveAuth.vue
+++ b/src/components/InteractiveAuth.vue
@@ -349,5 +349,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/Invite.vue b/src/components/Invite.vue
index 5e1a4e7..57e0bbe 100644
--- a/src/components/Invite.vue
+++ b/src/components/Invite.vue
@@ -167,7 +167,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
+  @use "@/assets/css/chat.scss" as *;
   .invite {
     .chip-group-wrapper {
       min-height: 100px;
diff --git a/src/components/Join.vue b/src/components/Join.vue
index 27dd270..07bca4a 100644
--- a/src/components/Join.vue
+++ b/src/components/Join.vue
@@ -474,7 +474,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/join.scss";
+@use "@/assets/css/join.scss";
 
 .avatar-select-control .v-select__selection {
   flex-basis: 100%;
diff --git a/src/components/LeaveRoomDialog.vue b/src/components/LeaveRoomDialog.vue
index e94f457..3f5e1cf 100644
--- a/src/components/LeaveRoomDialog.vue
+++ b/src/components/LeaveRoomDialog.vue
@@ -114,5 +114,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 9a993b9..f1e6ead 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -269,5 +269,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/login.scss";
+@use "@/assets/css/login.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/MessageOperationsBottomSheet.vue b/src/components/MessageOperationsBottomSheet.vue
index cee4d98..92b0bf5 100644
--- a/src/components/MessageOperationsBottomSheet.vue
+++ b/src/components/MessageOperationsBottomSheet.vue
@@ -70,7 +70,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/variables" as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 /* Default implementation only dims background when fully open,
  so we use our own flag (data-closed) here to that we can
@@ -101,7 +104,7 @@ export default {
       right: 0;
       background-color: rgba(0, 0, 0, 0.15);
 
-      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      @media #{map.get($display-breakpoints, 'sm-and-down')} {
         z-index: 10;
       }
 
@@ -119,7 +122,7 @@ export default {
       left: 50%;
       transform: translate(-50%, 0);
 
-      @media #{map-get($display-breakpoints, 'lg-and-up')} {
+      @media #{map.get($display-breakpoints, 'lg-and-up')} {
         width: $dialog-desktop-width;
       }
     }
diff --git a/src/components/MessageRetentionDialog.vue b/src/components/MessageRetentionDialog.vue
index 364aa9f..0c7309b 100644
--- a/src/components/MessageRetentionDialog.vue
+++ b/src/components/MessageRetentionDialog.vue
@@ -94,7 +94,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/variables" as *;
 
 .v-radio .other {
   display: flex;
diff --git a/src/components/MoreLessControl.vue b/src/components/MoreLessControl.vue
index 52693a7..df1c45b 100644
--- a/src/components/MoreLessControl.vue
+++ b/src/components/MoreLessControl.vue
@@ -57,5 +57,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/MoreMenuPopup.vue b/src/components/MoreMenuPopup.vue
index 26fd35f..02a5eaf 100644
--- a/src/components/MoreMenuPopup.vue
+++ b/src/components/MoreMenuPopup.vue
@@ -83,8 +83,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import 'vuetify/settings';
+@use "@/assets/css/chat.scss" as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 .popup-wrapper {
   width: fit-content;
@@ -150,11 +151,11 @@ export default {
   //border-radius: 40px;
   width: 95%;
 
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map.get($display-breakpoints, 'sm-and-up')} {
     width: 70%;
   }
 
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     overflow: unset;
     width: $main-desktop-width;
     ;
diff --git a/src/components/NoHistoryRoomWelcomeHeader.vue b/src/components/NoHistoryRoomWelcomeHeader.vue
index f94460e..b030181 100644
--- a/src/components/NoHistoryRoomWelcomeHeader.vue
+++ b/src/components/NoHistoryRoomWelcomeHeader.vue
@@ -12,7 +12,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 .shield {
   margin-bottom: 12px;  
 }
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 5136a39..6661423 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -428,5 +428,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 428a23c..bc1d78b 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -119,8 +119,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import 'vuetify/settings';
+@use "@/assets/css/chat.scss" as *;
+@use "vuetify/settings" as *;
+@use "sass:map";
 
 .profile-info-popup {
   font-family: "Inter", sans-serif !important;
@@ -212,11 +213,11 @@ export default {
     font-size: 10 * $chat-text-size !important;
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map.get($display-breakpoints, 'sm-and-up')} {
     width: 70%;
   }
 
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map.get($display-breakpoints, 'lg-and-up')} {
     overflow: unset;
     width: $main-desktop-width;
     position: absolute;
diff --git a/src/components/PurgeRoomDialog.vue b/src/components/PurgeRoomDialog.vue
index 5c8c166..dd5f85f 100644
--- a/src/components/PurgeRoomDialog.vue
+++ b/src/components/PurgeRoomDialog.vue
@@ -171,5 +171,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/QRCodePopup.vue b/src/components/QRCodePopup.vue
index 433c833..65593de 100644
--- a/src/components/QRCodePopup.vue
+++ b/src/components/QRCodePopup.vue
@@ -106,5 +106,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/QuoteView.vue b/src/components/QuoteView.vue
index 8bd4df4..cff3380 100644
--- a/src/components/QuoteView.vue
+++ b/src/components/QuoteView.vue
@@ -154,7 +154,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
+  @use "@/assets/css/chat.scss" as *;
 
   .author {
     font-size: 80%;
diff --git a/src/components/ReportRoomDialog.vue b/src/components/ReportRoomDialog.vue
index 4c4dc36..29c932c 100644
--- a/src/components/ReportRoomDialog.vue
+++ b/src/components/ReportRoomDialog.vue
@@ -71,5 +71,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/RoomDialogBase.vue b/src/components/RoomDialogBase.vue
index 4b11f9c..e359ad9 100644
--- a/src/components/RoomDialogBase.vue
+++ b/src/components/RoomDialogBase.vue
@@ -39,5 +39,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index eb0502c..a6dcddb 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -567,6 +567,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 </style>
\ No newline at end of file
diff --git a/src/components/RoomInfoBottomSheet.vue b/src/components/RoomInfoBottomSheet.vue
index a317a9c..ded6f9e 100644
--- a/src/components/RoomInfoBottomSheet.vue
+++ b/src/components/RoomInfoBottomSheet.vue
@@ -46,5 +46,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index df2059c..0bdaee6 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -217,7 +217,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>
diff --git a/src/components/RoundedDialog.vue b/src/components/RoundedDialog.vue
index 5b98d6e..753e370 100644
--- a/src/components/RoundedDialog.vue
+++ b/src/components/RoundedDialog.vue
@@ -10,5 +10,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/SelectLanguageDialog.vue b/src/components/SelectLanguageDialog.vue
index 85535c7..d015906 100644
--- a/src/components/SelectLanguageDialog.vue
+++ b/src/components/SelectLanguageDialog.vue
@@ -50,5 +50,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/StickerPickerBottomSheet.vue b/src/components/StickerPickerBottomSheet.vue
index 4989ec7..55e2e1a 100644
--- a/src/components/StickerPickerBottomSheet.vue
+++ b/src/components/StickerPickerBottomSheet.vue
@@ -59,7 +59,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
+  @use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss">
diff --git a/src/components/UserProfileDialog.vue b/src/components/UserProfileDialog.vue
index 6e5060c..f5525bb 100644
--- a/src/components/UserProfileDialog.vue
+++ b/src/components/UserProfileDialog.vue
@@ -235,5 +235,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index 7e9b94f..0a6e11b 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -553,6 +553,6 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "@/assets/css/chat.scss";
-  @import "@/assets/css/components/voice-recorder.scss";
+  @use "@/assets/css/chat.scss" as *;
+  @use "@/assets/css/components/voice-recorder.scss";
 </style>
diff --git a/src/components/VoiceRecorderLock.vue b/src/components/VoiceRecorderLock.vue
index c1b1785..aad8fda 100644
--- a/src/components/VoiceRecorderLock.vue
+++ b/src/components/VoiceRecorderLock.vue
@@ -24,5 +24,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style> 
\ No newline at end of file
diff --git a/src/components/YouAre.vue b/src/components/YouAre.vue
index e4a37e0..c4e94a1 100644
--- a/src/components/YouAre.vue
+++ b/src/components/YouAre.vue
@@ -54,5 +54,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/create/CreateRoomAvatar.vue b/src/components/create/CreateRoomAvatar.vue
index 5c1b9a1..ec66588 100644
--- a/src/components/create/CreateRoomAvatar.vue
+++ b/src/components/create/CreateRoomAvatar.vue
@@ -54,7 +54,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/create.scss";
+@use "@/assets/css/create.scss";
+@use "@/assets/css/variables" as *;
 
 .create-room-avatar {
     width: 72px;
diff --git a/src/components/file_mode/FileDropLayout.vue b/src/components/file_mode/FileDropLayout.vue
index eb417c6..d36a81f 100644
--- a/src/components/file_mode/FileDropLayout.vue
+++ b/src/components/file_mode/FileDropLayout.vue
@@ -214,5 +214,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/file_mode/GalleryItemsView.vue b/src/components/file_mode/GalleryItemsView.vue
index 418e26d..fec79a2 100644
--- a/src/components/file_mode/GalleryItemsView.vue
+++ b/src/components/file_mode/GalleryItemsView.vue
@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .chat-header {
   position: relative !important;
diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue
index 3cc290c..d8fd0fd 100644
--- a/src/components/file_mode/ThumbnailView.vue
+++ b/src/components/file_mode/ThumbnailView.vue
@@ -89,7 +89,7 @@ export default {
 
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .thumbnail-item {
     width: 100%;
diff --git a/src/components/messages/AudioPlayer.vue b/src/components/messages/AudioPlayer.vue
index 9f64cfc..536abd6 100644
--- a/src/components/messages/AudioPlayer.vue
+++ b/src/components/messages/AudioPlayer.vue
@@ -85,5 +85,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/messages/AudioWaveformView.vue b/src/components/messages/AudioWaveformView.vue
index 905fbbc..d8bb406 100644
--- a/src/components/messages/AudioWaveformView.vue
+++ b/src/components/messages/AudioWaveformView.vue
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .waveform svg {
     width: 100%;
diff --git a/src/components/messages/ContactBanned.vue b/src/components/messages/ContactBanned.vue
index 37c2a45..2f43506 100644
--- a/src/components/messages/ContactBanned.vue
+++ b/src/components/messages/ContactBanned.vue
@@ -21,5 +21,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/ContactChanged.vue b/src/components/messages/ContactChanged.vue
index e03d24a..8708f82 100644
--- a/src/components/messages/ContactChanged.vue
+++ b/src/components/messages/ContactChanged.vue
@@ -40,5 +40,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/ContactInvited.vue b/src/components/messages/ContactInvited.vue
index 110c43e..8e9337e 100644
--- a/src/components/messages/ContactInvited.vue
+++ b/src/components/messages/ContactInvited.vue
@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/ContactJoin.vue b/src/components/messages/ContactJoin.vue
index d8aa6d8..eb8defd 100644
--- a/src/components/messages/ContactJoin.vue
+++ b/src/components/messages/ContactJoin.vue
@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/ContactKicked.vue b/src/components/messages/ContactKicked.vue
index b34da00..4f2375c 100644
--- a/src/components/messages/ContactKicked.vue
+++ b/src/components/messages/ContactKicked.vue
@@ -21,5 +21,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/ContactLeave.vue b/src/components/messages/ContactLeave.vue
index 1e40799..eb21a48 100644
--- a/src/components/messages/ContactLeave.vue
+++ b/src/components/messages/ContactLeave.vue
@@ -19,5 +19,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/DebugEvent.vue b/src/components/messages/DebugEvent.vue
index e678340..24705db 100644
--- a/src/components/messages/DebugEvent.vue
+++ b/src/components/messages/DebugEvent.vue
@@ -11,5 +11,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue
index 7ed65c6..3ec7e44 100644
--- a/src/components/messages/MessageIncoming.vue
+++ b/src/components/messages/MessageIncoming.vue
@@ -52,5 +52,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingAudio.vue b/src/components/messages/MessageIncomingAudio.vue
index 4ae54e5..3ce0882 100644
--- a/src/components/messages/MessageIncomingAudio.vue
+++ b/src/components/messages/MessageIncomingAudio.vue
@@ -17,5 +17,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingFile.vue b/src/components/messages/MessageIncomingFile.vue
index 5df9b0f..368e1dd 100644
--- a/src/components/messages/MessageIncomingFile.vue
+++ b/src/components/messages/MessageIncomingFile.vue
@@ -30,5 +30,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index 8d6487e..d554dce 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -82,5 +82,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingPoll.vue b/src/components/messages/MessageIncomingPoll.vue
index cee6217..e2f4ca8 100644
--- a/src/components/messages/MessageIncomingPoll.vue
+++ b/src/components/messages/MessageIncomingPoll.vue
@@ -93,6 +93,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import "@/assets/css/components/poll.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/components/poll.scss";
 </style>
diff --git a/src/components/messages/MessageIncomingSticker.vue b/src/components/messages/MessageIncomingSticker.vue
index 0a3a020..96d2d0b 100644
--- a/src/components/messages/MessageIncomingSticker.vue
+++ b/src/components/messages/MessageIncomingSticker.vue
@@ -34,5 +34,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingText.vue b/src/components/messages/MessageIncomingText.vue
index d3c966d..94a4848 100644
--- a/src/components/messages/MessageIncomingText.vue
+++ b/src/components/messages/MessageIncomingText.vue
@@ -39,5 +39,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingThread.vue b/src/components/messages/MessageIncomingThread.vue
index 7364600..f30734c 100644
--- a/src/components/messages/MessageIncomingThread.vue
+++ b/src/components/messages/MessageIncomingThread.vue
@@ -137,7 +137,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>
diff --git a/src/components/messages/MessageIncomingVideo.vue b/src/components/messages/MessageIncomingVideo.vue
index 5150fe0..6ddbe13 100644
--- a/src/components/messages/MessageIncomingVideo.vue
+++ b/src/components/messages/MessageIncomingVideo.vue
@@ -36,5 +36,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
index c8ba5de..da15ebf 100644
--- a/src/components/messages/MessageOperations.vue
+++ b/src/components/messages/MessageOperations.vue
@@ -72,5 +72,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOperationsPicker.vue b/src/components/messages/MessageOperationsPicker.vue
index d1b80fb..145975a 100644
--- a/src/components/messages/MessageOperationsPicker.vue
+++ b/src/components/messages/MessageOperationsPicker.vue
@@ -47,5 +47,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue
index d272270..137356f 100644
--- a/src/components/messages/MessageOutgoing.vue
+++ b/src/components/messages/MessageOutgoing.vue
@@ -57,5 +57,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingAudio.vue b/src/components/messages/MessageOutgoingAudio.vue
index 69fcc78..e353179 100644
--- a/src/components/messages/MessageOutgoingAudio.vue
+++ b/src/components/messages/MessageOutgoingAudio.vue
@@ -17,5 +17,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingFile.vue b/src/components/messages/MessageOutgoingFile.vue
index 30cb03d..fe454fa 100644
--- a/src/components/messages/MessageOutgoingFile.vue
+++ b/src/components/messages/MessageOutgoingFile.vue
@@ -30,5 +30,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index b198b9f..5225196 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.vue
@@ -81,5 +81,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingPoll.vue b/src/components/messages/MessageOutgoingPoll.vue
index 0563560..c3a7a60 100644
--- a/src/components/messages/MessageOutgoingPoll.vue
+++ b/src/components/messages/MessageOutgoingPoll.vue
@@ -93,6 +93,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-@import "@/assets/css/components/poll.scss";
+@use "@/assets/css/chat.scss" as *;
+@use "@/assets/css/components/poll.scss";
 </style>
diff --git a/src/components/messages/MessageOutgoingSticker.vue b/src/components/messages/MessageOutgoingSticker.vue
index 5aa7417..757e59e 100644
--- a/src/components/messages/MessageOutgoingSticker.vue
+++ b/src/components/messages/MessageOutgoingSticker.vue
@@ -33,5 +33,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue
index 719d80a..948ce13 100644
--- a/src/components/messages/MessageOutgoingText.vue
+++ b/src/components/messages/MessageOutgoingText.vue
@@ -35,5 +35,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingThread.vue b/src/components/messages/MessageOutgoingThread.vue
index 71e89eb..d00f514 100644
--- a/src/components/messages/MessageOutgoingThread.vue
+++ b/src/components/messages/MessageOutgoingThread.vue
@@ -134,7 +134,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>
diff --git a/src/components/messages/MessageOutgoingVideo.vue b/src/components/messages/MessageOutgoingVideo.vue
index 027818d..b8a8b7d 100644
--- a/src/components/messages/MessageOutgoingVideo.vue
+++ b/src/components/messages/MessageOutgoingVideo.vue
@@ -36,5 +36,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/QuickReactions.vue b/src/components/messages/QuickReactions.vue
index c3aa40c..aa6ef20 100644
--- a/src/components/messages/QuickReactions.vue
+++ b/src/components/messages/QuickReactions.vue
@@ -161,5 +161,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/ReadMarker.vue b/src/components/messages/ReadMarker.vue
index f8b3969..ba5360a 100644
--- a/src/components/messages/ReadMarker.vue
+++ b/src/components/messages/ReadMarker.vue
@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomAliased.vue b/src/components/messages/RoomAliased.vue
index 9c87f29..1f4dac4 100644
--- a/src/components/messages/RoomAliased.vue
+++ b/src/components/messages/RoomAliased.vue
@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomAvatarChanged.vue b/src/components/messages/RoomAvatarChanged.vue
index cc68bca..590d71b 100644
--- a/src/components/messages/RoomAvatarChanged.vue
+++ b/src/components/messages/RoomAvatarChanged.vue
@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomCreated.vue b/src/components/messages/RoomCreated.vue
index c83ad15..9d4fc08 100644
--- a/src/components/messages/RoomCreated.vue
+++ b/src/components/messages/RoomCreated.vue
@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomDeletionNotice.vue b/src/components/messages/RoomDeletionNotice.vue
index f8b7524..9bd43f7 100644
--- a/src/components/messages/RoomDeletionNotice.vue
+++ b/src/components/messages/RoomDeletionNotice.vue
@@ -19,5 +19,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomEncrypted.vue b/src/components/messages/RoomEncrypted.vue
index 874d989..8154ea8 100644
--- a/src/components/messages/RoomEncrypted.vue
+++ b/src/components/messages/RoomEncrypted.vue
@@ -13,5 +13,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomGuestAccessChanged.vue b/src/components/messages/RoomGuestAccessChanged.vue
index b89501c..84fe7e6 100644
--- a/src/components/messages/RoomGuestAccessChanged.vue
+++ b/src/components/messages/RoomGuestAccessChanged.vue
@@ -30,5 +30,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomHistoryVisibility.vue b/src/components/messages/RoomHistoryVisibility.vue
index a6e1592..70272cc 100644
--- a/src/components/messages/RoomHistoryVisibility.vue
+++ b/src/components/messages/RoomHistoryVisibility.vue
@@ -30,5 +30,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomJoinRules.vue b/src/components/messages/RoomJoinRules.vue
index 0ee433b..9a57b78 100644
--- a/src/components/messages/RoomJoinRules.vue
+++ b/src/components/messages/RoomJoinRules.vue
@@ -26,5 +26,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomNameChanged.vue b/src/components/messages/RoomNameChanged.vue
index 1e844c5..381a920 100644
--- a/src/components/messages/RoomNameChanged.vue
+++ b/src/components/messages/RoomNameChanged.vue
@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomPowerLevelsChanged.vue b/src/components/messages/RoomPowerLevelsChanged.vue
index 14df1ff..97cc259 100644
--- a/src/components/messages/RoomPowerLevelsChanged.vue
+++ b/src/components/messages/RoomPowerLevelsChanged.vue
@@ -82,5 +82,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/RoomTopicChanged.vue b/src/components/messages/RoomTopicChanged.vue
index 9268756..e66d7bc 100644
--- a/src/components/messages/RoomTopicChanged.vue
+++ b/src/components/messages/RoomTopicChanged.vue
@@ -14,5 +14,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/SeenBy.vue b/src/components/messages/SeenBy.vue
index 8fe2f1b..f72c8a7 100644
--- a/src/components/messages/SeenBy.vue
+++ b/src/components/messages/SeenBy.vue
@@ -139,5 +139,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/channel/MessageOperationsChannel.vue b/src/components/messages/channel/MessageOperationsChannel.vue
index 668400b..7541e4e 100644
--- a/src/components/messages/channel/MessageOperationsChannel.vue
+++ b/src/components/messages/channel/MessageOperationsChannel.vue
@@ -42,5 +42,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/channel/QuickReactionsChannel.vue b/src/components/messages/channel/QuickReactionsChannel.vue
index 0817304..c05998e 100644
--- a/src/components/messages/channel/QuickReactionsChannel.vue
+++ b/src/components/messages/channel/QuickReactionsChannel.vue
@@ -125,5 +125,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/channel/SwipeableThumbnailsView.vue b/src/components/messages/channel/SwipeableThumbnailsView.vue
index fe1dcc6..4c4df19 100644
--- a/src/components/messages/channel/SwipeableThumbnailsView.vue
+++ b/src/components/messages/channel/SwipeableThumbnailsView.vue
@@ -53,5 +53,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/messages/export/MessageIncomingAudioExport.vue b/src/components/messages/export/MessageIncomingAudioExport.vue
index f606bba..967b801 100644
--- a/src/components/messages/export/MessageIncomingAudioExport.vue
+++ b/src/components/messages/export/MessageIncomingAudioExport.vue
@@ -17,5 +17,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/messages/export/MessageIncomingFileExport.vue b/src/components/messages/export/MessageIncomingFileExport.vue
index e29bbc9..02f53a4 100644
--- a/src/components/messages/export/MessageIncomingFileExport.vue
+++ b/src/components/messages/export/MessageIncomingFileExport.vue
@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .thumbnail-item {
     width: 100%;
diff --git a/src/components/messages/export/MessageIncomingImageExport.vue b/src/components/messages/export/MessageIncomingImageExport.vue
index 21c0ce7..95b53ae 100644
--- a/src/components/messages/export/MessageIncomingImageExport.vue
+++ b/src/components/messages/export/MessageIncomingImageExport.vue
@@ -43,5 +43,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/messages/export/MessageIncomingThreadExport.vue b/src/components/messages/export/MessageIncomingThreadExport.vue
index 7419344..c2bda70 100644
--- a/src/components/messages/export/MessageIncomingThreadExport.vue
+++ b/src/components/messages/export/MessageIncomingThreadExport.vue
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>
diff --git a/src/components/messages/export/MessageIncomingVideoExport.vue b/src/components/messages/export/MessageIncomingVideoExport.vue
index 1f5f9b5..d13a88a 100644
--- a/src/components/messages/export/MessageIncomingVideoExport.vue
+++ b/src/components/messages/export/MessageIncomingVideoExport.vue
@@ -23,5 +23,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/messages/export/MessageOutgoingAudioExport.vue b/src/components/messages/export/MessageOutgoingAudioExport.vue
index 45e3897..85ccadb 100644
--- a/src/components/messages/export/MessageOutgoingAudioExport.vue
+++ b/src/components/messages/export/MessageOutgoingAudioExport.vue
@@ -17,5 +17,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/messages/export/MessageOutgoingFileExport.vue b/src/components/messages/export/MessageOutgoingFileExport.vue
index 9188771..1599a99 100644
--- a/src/components/messages/export/MessageOutgoingFileExport.vue
+++ b/src/components/messages/export/MessageOutgoingFileExport.vue
@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 
 .thumbnail-item {
     width: 100%;
diff --git a/src/components/messages/export/MessageOutgoingImageExport.vue b/src/components/messages/export/MessageOutgoingImageExport.vue
index 2c3bc72..42dd988 100644
--- a/src/components/messages/export/MessageOutgoingImageExport.vue
+++ b/src/components/messages/export/MessageOutgoingImageExport.vue
@@ -43,5 +43,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/messages/export/MessageOutgoingThreadExport.vue b/src/components/messages/export/MessageOutgoingThreadExport.vue
index 18c0cc9..2a1f64f 100644
--- a/src/components/messages/export/MessageOutgoingThreadExport.vue
+++ b/src/components/messages/export/MessageOutgoingThreadExport.vue
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
 
 <style lang="scss" scoped>
diff --git a/src/components/messages/export/MessageOutgoingVideoExport.vue b/src/components/messages/export/MessageOutgoingVideoExport.vue
index e0c729b..ae4fb82 100644
--- a/src/components/messages/export/MessageOutgoingVideoExport.vue
+++ b/src/components/messages/export/MessageOutgoingVideoExport.vue
@@ -23,5 +23,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
diff --git a/src/components/welcome_headers/WelcomeHeaderChannel.vue b/src/components/welcome_headers/WelcomeHeaderChannel.vue
index f9b8741..2362189 100644
--- a/src/components/welcome_headers/WelcomeHeaderChannel.vue
+++ b/src/components/welcome_headers/WelcomeHeaderChannel.vue
@@ -79,5 +79,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/welcome_headers/WelcomeHeaderChannelUser.vue b/src/components/welcome_headers/WelcomeHeaderChannelUser.vue
index d90df5f..1eb1b8e 100644
--- a/src/components/welcome_headers/WelcomeHeaderChannelUser.vue
+++ b/src/components/welcome_headers/WelcomeHeaderChannelUser.vue
@@ -42,5 +42,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/welcome_headers/WelcomeHeaderDirectChat.vue b/src/components/welcome_headers/WelcomeHeaderDirectChat.vue
index 6ae80c9..1ac85a4 100644
--- a/src/components/welcome_headers/WelcomeHeaderDirectChat.vue
+++ b/src/components/welcome_headers/WelcomeHeaderDirectChat.vue
@@ -61,5 +61,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file
diff --git a/src/components/welcome_headers/WelcomeHeaderRoom.vue b/src/components/welcome_headers/WelcomeHeaderRoom.vue
index 459740b..70362c8 100644
--- a/src/components/welcome_headers/WelcomeHeaderRoom.vue
+++ b/src/components/welcome_headers/WelcomeHeaderRoom.vue
@@ -92,5 +92,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+@use "@/assets/css/chat.scss" as *;
 </style>
\ No newline at end of file