From 0b66f365b2ea4f8194c46e63d16ab2b64d0553ca Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Thu, 4 Apr 2024 22:13:35 +0200
Subject: [PATCH] chore: replace Sass with PostCSS

---
 cypress/plugins/index.ts                      |   2 +-
 docs/.vitepress/components/CaptionedImage.vue |   2 +-
 .../components/MobileAppScreenshots.vue       |   2 +-
 docs/.vitepress/components/PlusBadge.vue      |   2 +-
 docs/.vitepress/components/SponsorLogo.vue    |   2 +-
 docs/.vitepress/components/Sponsors.vue       |   2 +-
 docs/.vitepress/components/Themes.vue         |   2 +-
 docs/.vitepress/layout/Layout.vue             |   2 +-
 docs/plus/purchase-activation.md              |   2 +-
 package.json                                  |   4 +-
 postcss.config.cjs                            |   6 +
 .../partials/_mixins.scss => css/app.pcss}    |  35 +-
 .../_hacks.scss => css/partials/hack.pcss}    |   0
 .../_shared.scss => css/partials/shared.pcss} |  11 +-
 .../partials/skeleton.pcss}                   |   9 +-
 .../partials/tooltip.pcss}                    |   0
 .../_vars.scss => css/partials/vars.pcss}     |   0
 resources/assets/css/remote.pcss              |   4 +
 .../vendor/alertify.pcss}                     |   0
 .../vendor/nprogress.pcss}                    |   0
 resources/assets/css/vendor/plyr.pcss         | 583 ++++++++++++++
 resources/assets/css/vendor/reset.pcss        |  34 +
 resources/assets/js/App.vue                   |   6 +-
 resources/assets/js/app.ts                    |   1 +
 .../assets/js/components/album/AlbumInfo.vue  |  16 +-
 .../js/components/album/AlbumTrackList.vue    |  15 +-
 .../components/album/AlbumTrackListItem.vue   |   2 +-
 .../js/components/artist/ArtistInfo.vue       |   6 +-
 .../js/components/auth/ForgotPasswordForm.vue |   2 +-
 .../assets/js/components/auth/LoginForm.vue   |   2 +-
 .../js/components/auth/ResetPasswordForm.vue  |   6 +-
 .../auth/__snapshots__/LoginForm.spec.ts.snap |   4 +-
 .../components/auth/sso/GoogleLoginButton.vue |   2 +-
 .../invitation/AcceptInvitation.vue           |   6 +-
 .../koel-plus/ActivateLicenseForm.vue         |   2 +-
 .../components/koel-plus/BtnUpgradeToPlus.vue |   8 +-
 .../js/components/koel-plus/KoelPlusModal.vue |   2 +-
 .../js/components/layout/ModalWrapper.vue     |   2 +-
 .../layout/app-footer/AudioPlayer.vue         |   4 +-
 .../layout/app-footer/FooterExtraControls.vue |   2 +-
 .../app-footer/FooterPlaybackControls.vue     |   2 +-
 .../layout/app-footer/FooterSongInfo.vue      |   2 +-
 .../FooterExtraControls.spec.ts.snap          |   2 +-
 .../js/components/layout/app-footer/index.vue |   2 +-
 .../layout/main-wrapper/ExtraDrawer.vue       |  12 +-
 .../layout/main-wrapper/MainContent.vue       |   6 +-
 .../components/layout/main-wrapper/index.vue  |   4 +-
 .../sidebar/PlaylistFolderSidebarItem.vue     |   2 +-
 .../sidebar/PlaylistSidebarItem.vue           |   2 +-
 .../sidebar/PlaylistSidebarList.vue           |   4 +-
 .../layout/main-wrapper/sidebar/Sidebar.vue   |  13 +-
 .../js/components/meta/AboutKoelModal.vue     |   2 +-
 .../assets/js/components/meta/SponsorList.vue |   2 +-
 .../assets/js/components/meta/SupportKoel.vue |   2 +-
 .../__snapshots__/AboutKoelModal.spec.ts.snap |   2 +-
 .../playlist/CreatePlaylistForm.vue           |   2 +-
 .../components/playlist/EditPlaylistForm.vue  |   2 +-
 .../playlist/InvitePlaylistCollaborators.vue  |   2 +-
 .../playlist/PlaylistCollaborationModal.vue   |   2 +-
 .../playlist/PlaylistCollaboratorList.vue     |   2 +-
 .../playlist/PlaylistCollaboratorListItem.vue |   2 +-
 .../playlist/PlaylistCollaboratorsBadge.vue   |   2 +-
 .../PlaylistCollaborationModal.spec.ts.snap   |   2 +-
 .../smart-playlist/SmartPlaylistFormBase.vue  |   2 +-
 .../smart-playlist/SmartPlaylistRule.vue      |   2 +-
 .../smart-playlist/SmartPlaylistRuleGroup.vue |   2 +-
 .../smart-playlist/SmartPlaylistRuleInput.vue |   2 +-
 .../EditableProfileAvatar.vue                 |   2 +-
 .../profile-preferences/Integrations.vue      |   2 +-
 .../profile-preferences/LastfmIntegration.vue |   4 +-
 .../profile-preferences/PreferencesForm.vue   |   2 +-
 .../profile-preferences/ProfileForm.vue       |   2 +-
 .../profile-preferences/QRLogin.vue           |   2 +-
 .../SpotifyIntegration.vue                    |   4 +-
 .../profile-preferences/ThemeCard.vue         |   2 +-
 .../profile-preferences/ThemeList.vue         |   2 +-
 .../js/components/screens/AlbumListScreen.vue |  11 +-
 .../js/components/screens/AlbumScreen.vue     |  12 +-
 .../js/components/screens/AllSongsScreen.vue  |   4 +-
 .../components/screens/ArtistListScreen.vue   |  10 +-
 .../js/components/screens/ArtistScreen.vue    |  14 +-
 .../js/components/screens/GenreListScreen.vue |  36 +-
 .../js/components/screens/HomeScreen.vue      |   4 +-
 .../js/components/screens/SettingsScreen.vue  |   2 +-
 .../js/components/screens/UploadScreen.vue    |   2 +-
 .../js/components/screens/UserListScreen.vue  |   2 +-
 .../components/screens/VisualizerScreen.vue   |   2 +-
 .../js/components/screens/YouTubeScreen.vue   |   2 +-
 .../__snapshots__/AllSongsScreen.spec.ts.snap |  12 +-
 .../__snapshots__/SettingsScreen.spec.ts.snap |   2 +-
 .../screens/search/SearchExcerptsScreen.vue   |   2 +-
 .../assets/js/components/song/AddToMenu.vue   |   2 +-
 .../js/components/song/EditSongForm.vue       |   2 +-
 .../assets/js/components/song/SongCard.vue    |   4 +-
 .../js/components/song/SongContextMenu.vue    |   4 +-
 .../assets/js/components/song/SongList.vue    |   4 +-
 .../js/components/song/SongListControls.vue   |   6 +-
 .../js/components/song/SongListFilter.vue     |   2 +-
 .../js/components/song/SongListItem.vue       |   4 +-
 .../js/components/song/SongListSorter.vue     |   4 +-
 .../js/components/song/SongThumbnail.vue      |   2 +-
 .../song/__snapshots__/AddToMenu.spec.ts.snap |   2 +-
 .../__snapshots__/EditSongForm.spec.ts.snap   |   4 +-
 .../assets/js/components/ui/AlertBox.vue      |   8 +-
 .../js/components/ui/AppleMusicButton.vue     |   2 +-
 .../js/components/ui/ArtistAlbumCard.vue      |   2 +-
 .../components/ui/ArtistAlbumScreenTabs.vue   |   4 +-
 .../js/components/ui/ArtistAlbumThumbnail.vue |   6 +-
 resources/assets/js/components/ui/Btn.vue     |   6 +-
 .../assets/js/components/ui/BtnCloseModal.vue |   2 +-
 .../assets/js/components/ui/BtnGroup.vue      |   2 +-
 .../js/components/ui/BtnScrollToTop.vue       |   2 +-
 .../assets/js/components/ui/CheckBox.vue      |   2 +-
 .../js/components/ui/ContextMenuBase.vue      |   2 +-
 .../assets/js/components/ui/DialogBox.vue     |   2 +-
 .../assets/js/components/ui/Equalizer.vue     |   2 +-
 .../js/components/ui/FooterPlayButton.vue     |   2 +-
 .../assets/js/components/ui/LyricsPane.vue    |   2 +-
 .../assets/js/components/ui/Magnifier.vue     |   8 +-
 .../assets/js/components/ui/MessageToast.vue  |   2 +-
 .../js/components/ui/MessageToaster.vue       |   2 +-
 .../js/components/ui/OfflineNotification.vue  |   2 +-
 resources/assets/js/components/ui/Overlay.vue |   2 +-
 .../assets/js/components/ui/PasswordField.vue |   2 +-
 .../js/components/ui/PlaylistThumbnail.vue    |   2 +-
 .../assets/js/components/ui/ProfileAvatar.vue |   2 +-
 .../js/components/ui/RepeatModeSwitch.vue     |   2 +-
 .../js/components/ui/ScreenControlsToggle.vue |   2 +-
 .../js/components/ui/ScreenEmptyState.vue     |   4 +-
 .../assets/js/components/ui/ScreenHeader.vue  |   2 +-
 .../assets/js/components/ui/SearchForm.vue    |   2 +-
 .../assets/js/components/ui/SoundBars.vue     |   2 +-
 .../js/components/ui/ThumbnailStack.vue       |   4 +-
 .../js/components/ui/ViewModeSwitch.vue       |   2 +-
 .../js/components/ui/VirtualScroller.vue      |   2 +-
 .../assets/js/components/ui/VolumeSlider.vue  |   4 +-
 .../js/components/ui/YouTubeVideoItem.vue     |   2 +-
 .../js/components/ui/YouTubeVideoList.vue     |   2 +-
 .../AlbumArtOverlay.spec.ts.snap              |  12 +-
 .../ui/__snapshots__/Btn.spec.ts.snap         |   2 +-
 .../ui/__snapshots__/BtnGroup.spec.ts.snap    |   2 +-
 .../ui/__snapshots__/LyricsPane.spec.ts.snap  |   2 +-
 .../ui/__snapshots__/Magnifier.spec.ts.snap   |   2 +-
 .../__snapshots__/VolumeSlider.spec.ts.snap   |   6 +-
 .../ui/skeletons/ArtistAlbumCardSkeleton.vue  |   2 +-
 .../ui/skeletons/GenreItemSkeleton.vue        |   2 +-
 .../PlaylistCollaboratorListSkeleton.vue      |   2 +-
 .../ui/skeletons/ScreenHeaderSkeleton.vue     |   2 +-
 .../ui/skeletons/SongCardSkeleton.vue         |   2 +-
 .../ui/skeletons/SongListSkeleton.vue         |   2 +-
 .../js/components/ui/upload/DropZone.vue      |   2 +-
 .../js/components/ui/upload/UploadItem.vue    |   2 +-
 .../__snapshots__/UploadItem.spec.ts.snap     |   2 +-
 .../assets/js/components/user/AddUserForm.vue |   2 +-
 .../js/components/user/EditUserForm.vue       |   2 +-
 .../js/components/user/InviteUserForm.vue     |   2 +-
 .../assets/js/components/user/UserAvatar.vue  |   2 +-
 .../js/components/user/UserBadge.spec.ts      |  27 -
 .../assets/js/components/user/UserBadge.vue   |  73 --
 .../assets/js/components/user/UserCard.vue    |   2 +-
 .../js/components/utils/ImageCropper.vue      |   2 +-
 resources/assets/js/remote/App.vue            |   8 +-
 resources/assets/js/remote/app.ts             |   1 +
 resources/assets/sass/app.scss                |  15 -
 resources/assets/sass/remote.scss             |   8 -
 resources/assets/sass/vendor/_plyr.scss       | 736 ------------------
 resources/assets/sass/vendor/_reset.scss      |   1 -
 vite.config.js                                |   8 -
 yarn.lock                                     | 165 ++--
 169 files changed, 1005 insertions(+), 1245 deletions(-)
 create mode 100644 postcss.config.cjs
 rename resources/assets/{sass/partials/_mixins.scss => css/app.pcss} (82%)
 rename resources/assets/{sass/partials/_hacks.scss => css/partials/hack.pcss} (100%)
 rename resources/assets/{sass/partials/_shared.scss => css/partials/shared.pcss} (98%)
 rename resources/assets/{sass/partials/_skeleton.scss => css/partials/skeleton.pcss} (82%)
 rename resources/assets/{sass/partials/_tooltip.scss => css/partials/tooltip.pcss} (100%)
 rename resources/assets/{sass/partials/_vars.scss => css/partials/vars.pcss} (100%)
 create mode 100644 resources/assets/css/remote.pcss
 rename resources/assets/{sass/vendor/_alertify.scss => css/vendor/alertify.pcss} (100%)
 rename resources/assets/{sass/vendor/_nprogress.scss => css/vendor/nprogress.pcss} (100%)
 create mode 100644 resources/assets/css/vendor/plyr.pcss
 create mode 100644 resources/assets/css/vendor/reset.pcss
 delete mode 100644 resources/assets/js/components/user/UserBadge.spec.ts
 delete mode 100644 resources/assets/js/components/user/UserBadge.vue
 delete mode 100644 resources/assets/sass/app.scss
 delete mode 100644 resources/assets/sass/remote.scss
 delete mode 100644 resources/assets/sass/vendor/_plyr.scss
 delete mode 100644 resources/assets/sass/vendor/_reset.scss

diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts
index 9e26b947..65f94113 100644
--- a/cypress/plugins/index.ts
+++ b/cypress/plugins/index.ts
@@ -11,6 +11,6 @@
 
 export default (on: () => void, config: Record<string, unknown>): Record<string, unknown> => {
   return Object.assign({}, config, {
-    supportFile: 'cypress/support/index.ts'
+    supportFile: 'cypress/support/main.ts'
   })
 }
diff --git a/docs/.vitepress/components/CaptionedImage.vue b/docs/.vitepress/components/CaptionedImage.vue
index 9a098a37..cb341e3d 100644
--- a/docs/.vitepress/components/CaptionedImage.vue
+++ b/docs/.vitepress/components/CaptionedImage.vue
@@ -13,7 +13,7 @@ defineOptions({
   </figure>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 figure {
   margin: 1.5rem 0;
   overflow: hidden;
diff --git a/docs/.vitepress/components/MobileAppScreenshots.vue b/docs/.vitepress/components/MobileAppScreenshots.vue
index 419295a4..9d4a488a 100644
--- a/docs/.vitepress/components/MobileAppScreenshots.vue
+++ b/docs/.vitepress/components/MobileAppScreenshots.vue
@@ -15,7 +15,7 @@ import downloadedScreenshot from '../../assets/img/mobile/downloaded.webp'
 </script>
 
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 div {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
diff --git a/docs/.vitepress/components/PlusBadge.vue b/docs/.vitepress/components/PlusBadge.vue
index bfd2bd1d..7a8a70c3 100644
--- a/docs/.vitepress/components/PlusBadge.vue
+++ b/docs/.vitepress/components/PlusBadge.vue
@@ -5,7 +5,7 @@
 <script lang="ts" setup>
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 span {
   display: inline-block;
 
diff --git a/docs/.vitepress/components/SponsorLogo.vue b/docs/.vitepress/components/SponsorLogo.vue
index b4a63338..7aed70e4 100644
--- a/docs/.vitepress/components/SponsorLogo.vue
+++ b/docs/.vitepress/components/SponsorLogo.vue
@@ -19,7 +19,7 @@ defineOptions({
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 img {
   opacity: 0.8;
 
diff --git a/docs/.vitepress/components/Sponsors.vue b/docs/.vitepress/components/Sponsors.vue
index 02ff7dfe..f766cdb4 100644
--- a/docs/.vitepress/components/Sponsors.vue
+++ b/docs/.vitepress/components/Sponsors.vue
@@ -52,7 +52,7 @@ import doLogo from '../../assets/img/sponsors/do.svg'
 import whatTheDiffLogo from '../../assets/img/sponsors/what-the-diff.svg'
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 div.sponsors {
   border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
diff --git a/docs/.vitepress/components/Themes.vue b/docs/.vitepress/components/Themes.vue
index d34206fd..38d73bf5 100644
--- a/docs/.vitepress/components/Themes.vue
+++ b/docs/.vitepress/components/Themes.vue
@@ -30,7 +30,7 @@ const themes: Theme[] = [
 </script>
 
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 div .theme + .theme {
   margin-left: -100%;
 }
diff --git a/docs/.vitepress/layout/Layout.vue b/docs/.vitepress/layout/Layout.vue
index 71ea4253..14f797ea 100644
--- a/docs/.vitepress/layout/Layout.vue
+++ b/docs/.vitepress/layout/Layout.vue
@@ -15,7 +15,7 @@ import Sponsors from '../components/Sponsors.vue'
 const { Layout: BaseLayout } = DefaultTheme
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 .aside-outline-after {
   margin-top: 1.5rem;
 }
diff --git a/docs/plus/purchase-activation.md b/docs/plus/purchase-activation.md
index c9c57b48..10a98334 100644
--- a/docs/plus/purchase-activation.md
+++ b/docs/plus/purchase-activation.md
@@ -69,7 +69,7 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" module>
+<style lang="postcss" module>
 ol img {
   margin: 1.2rem 0;
 }
diff --git a/package.json b/package.json
index 2a29eaf8..868c23ab 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@vueuse/core": "^10.9.0",
     "@vueuse/integrations": "^10.9.0",
     "add": "^2.0.6",
+    "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
     "cypress": "^9.5.4",
     "eslint": "^8.14.0",
@@ -72,8 +73,9 @@
     "laravel-vite-plugin": "^1.0.2",
     "lint-staged": "^10.3.0",
     "lucide-vue-next": "^0.363.0",
+    "postcss": "^8.4.38",
+    "postcss-nested": "^6.0.1",
     "qrcode": "^1",
-    "sass": "^1.72.0",
     "start-server-and-test": "^2.0.3",
     "typescript": "^4.8.4",
     "vite": "^5.1.6",
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 00000000..7ccf6606
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-nested'),
+    require('autoprefixer')
+  ]
+}
diff --git a/resources/assets/sass/partials/_mixins.scss b/resources/assets/css/app.pcss
similarity index 82%
rename from resources/assets/sass/partials/_mixins.scss
rename to resources/assets/css/app.pcss
index d9b3f13b..0c3041b1 100644
--- a/resources/assets/sass/partials/_mixins.scss
+++ b/resources/assets/css/app.pcss
@@ -1,10 +1,22 @@
-@mixin vertical-center() {
+@import './vendor/reset.pcss';
+@import './partials/vars.pcss';
+@import './partials/hack.pcss';
+
+@import '@modules/nouislider/distribute/nouislider.min.css';
+@import './vendor/plyr.pcss';
+@import './vendor/nprogress.pcss';
+
+@import './partials/skeleton.pcss';
+@import './partials/tooltip.pcss';
+@import './partials/shared.pcss';
+
+.vertical-center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-@mixin artist-album-wrapper() {
+.artist-album-wrapper {
   display: grid !important;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -24,9 +36,11 @@
   }
 }
 
-@mixin artist-album-info-wrapper() {
+.artist-album-info-wrapper {
   .loading {
-    @include vertical-center();
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
   }
 
@@ -62,12 +76,13 @@
   }
 }
 
-@mixin artist-album-info() {
+.artist-album-info {
   color: var(--color-text-secondary);
 
   h1 {
-    @include vertical-center();
-
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-weight: var(--font-weight-thin);
     line-height: 2.8rem;
     margin-bottom: 16px;
@@ -154,13 +169,13 @@
   }
 }
 
-@mixin inset-when-pressed() {
+.inset-when-pressed {
   &:not([disabled]):active {
     box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6);
   }
 }
 
-@mixin context-menu() {
+.context-menu {
   padding: .4rem 0;
   width: max-content;
   min-width: 144px;
@@ -179,7 +194,7 @@
   }
 }
 
-@mixin themed-background() {
+.themed-background, body, html {
   background-color: var(--color-bg-primary);
   background-image: var(--bg-image);
   background-attachment: var(--bg-attachment);
diff --git a/resources/assets/sass/partials/_hacks.scss b/resources/assets/css/partials/hack.pcss
similarity index 100%
rename from resources/assets/sass/partials/_hacks.scss
rename to resources/assets/css/partials/hack.pcss
diff --git a/resources/assets/sass/partials/_shared.scss b/resources/assets/css/partials/shared.pcss
similarity index 98%
rename from resources/assets/sass/partials/_shared.scss
rename to resources/assets/css/partials/shared.pcss
index 1be53823..18ee7a3a 100644
--- a/resources/assets/sass/partials/_shared.scss
+++ b/resources/assets/css/partials/shared.pcss
@@ -23,8 +23,6 @@ h1, h2, h3, h4, h5, h6, blockquote {
 
 body,
 html {
-  @include themed-background();
-
   color: var(--color-text-primary);
   font-family: var(--font-family);
   font-size: 13px;
@@ -130,11 +128,6 @@ a {
   }
 }
 
-.ir {
-  color: transparent;
-  font: 0/0 serif;
-}
-
 .control {
   cursor: pointer;
   color: var(--color-text-secondary);
@@ -174,6 +167,8 @@ label {
 
 .tabs {
   min-height: 100%;
+  display: flex;
+  flex-direction: column;
   position: relative;
 
   [role=tablist] {
@@ -182,6 +177,7 @@ label {
     padding: 0 1.25rem;
     display: flex;
     gap: 0.3rem;
+    min-height: 36px;
 
     [role=tab] {
       position: relative;
@@ -344,7 +340,6 @@ label {
 .context-menu,
 .submenu,
 menu {
-  @include context-menu();
   position: fixed;
 
   @keyframes subMenuHoverHelp {
diff --git a/resources/assets/sass/partials/_skeleton.scss b/resources/assets/css/partials/skeleton.pcss
similarity index 82%
rename from resources/assets/sass/partials/_skeleton.scss
rename to resources/assets/css/partials/skeleton.pcss
index e68b5870..f56d9410 100644
--- a/resources/assets/sass/partials/_skeleton.scss
+++ b/resources/assets/css/partials/skeleton.pcss
@@ -1,18 +1,13 @@
 .skeleton {
-
-  .pulse,
-  &.pulse {
+  .pulse, &.pulse {
     animation: skeleton-pulse 2s infinite;
     background-color: rgba(255, 255, 255, .05);
   }
 
   @keyframes skeleton-pulse {
-
-    0%,
-    100% {
+    0%, 100% {
       opacity: 0;
     }
-
     50% {
       opacity: 1;
     }
diff --git a/resources/assets/sass/partials/_tooltip.scss b/resources/assets/css/partials/tooltip.pcss
similarity index 100%
rename from resources/assets/sass/partials/_tooltip.scss
rename to resources/assets/css/partials/tooltip.pcss
diff --git a/resources/assets/sass/partials/_vars.scss b/resources/assets/css/partials/vars.pcss
similarity index 100%
rename from resources/assets/sass/partials/_vars.scss
rename to resources/assets/css/partials/vars.pcss
diff --git a/resources/assets/css/remote.pcss b/resources/assets/css/remote.pcss
new file mode 100644
index 00000000..0d71ec86
--- /dev/null
+++ b/resources/assets/css/remote.pcss
@@ -0,0 +1,4 @@
+@import './vendor/reset.pcss';
+@import '@modules/nouislider/distribute/nouislider.min.css';
+@import './partials/vars.pcss';
+@import './partials/shared.pcss';
diff --git a/resources/assets/sass/vendor/_alertify.scss b/resources/assets/css/vendor/alertify.pcss
similarity index 100%
rename from resources/assets/sass/vendor/_alertify.scss
rename to resources/assets/css/vendor/alertify.pcss
diff --git a/resources/assets/sass/vendor/_nprogress.scss b/resources/assets/css/vendor/nprogress.pcss
similarity index 100%
rename from resources/assets/sass/vendor/_nprogress.scss
rename to resources/assets/css/vendor/nprogress.pcss
diff --git a/resources/assets/css/vendor/plyr.pcss b/resources/assets/css/vendor/plyr.pcss
new file mode 100644
index 00000000..ccce0047
--- /dev/null
+++ b/resources/assets/css/vendor/plyr.pcss
@@ -0,0 +1,583 @@
+.plyr__captions, .plyr__controls {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-align: center
+}
+
+.plyr__tooltip, .plyr__video-embed.plyr iframe {
+  pointer-events: none
+}
+
+@-webkit-keyframes plyr-progress {
+  to {
+    background-position: 40px 0
+  }
+}
+
+@keyframes plyr-progress {
+  to {
+    background-position: 40px 0
+  }
+}
+
+.plyr {
+  position: relative;
+  max-width: 100%;
+  min-width: 290px;
+}
+
+.plyr, .plyr *, .plyr ::after, .plyr ::before {
+  box-sizing: border-box
+}
+
+.plyr a, .plyr button, .plyr input, .plyr label {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation
+}
+
+.plyr__sr-only {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0 !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden
+}
+
+.plyr__video-wrapper {
+  position: relative
+}
+
+.plyr audio, .plyr video {
+  width: 100%;
+  height: auto;
+  vertical-align: middle
+}
+
+.plyr__video-embed {
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  background: #000
+}
+
+.plyr__video-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  user-select: none
+}
+
+.plyr__video-embed > div {
+  position: relative;
+  padding-bottom: 200%;
+  transform: translateY(-35.95%)
+}
+
+.plyr__captions {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 20px 30px;
+  color: #fff;
+  font-size: 20px
+}
+
+.plyr__captions span {
+  border-radius: 2px;
+  padding: 3px 10px;
+  background: rgba(0, 0, 0, .9)
+}
+
+.plyr__captions span:empty {
+  display: none
+}
+
+@media (min-width: 768px) {
+  .plyr__captions {
+    font-size: 24px
+  }
+}
+
+.plyr--captions-active .plyr__captions {
+  display: block
+}
+
+.plyr--fullscreen-active .plyr__captions {
+  font-size: 32px
+}
+
+.plyr__controls {
+  position: relative;
+  padding: 10px;
+  background: #fff;
+  line-height: 1;
+  box-shadow: 0 1px 1px rgba(52, 63, 74, .2)
+}
+
+.plyr__controls::after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.plyr__controls--right {
+  display: block;
+  margin: 10px auto 0
+}
+
+@media (min-width: 560px) {
+  .plyr__controls--left {
+    float: left
+  }
+
+  .plyr__controls--right {
+    float: right;
+    margin-top: 0
+  }
+}
+
+.plyr__controls button {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 2px;
+  padding: 5px 10px;
+  overflow: hidden;
+  border: 0;
+  background: 0 0;
+  border-radius: 3px;
+  cursor: pointer;
+  color: var(--color-highlight);
+  transition: background .3s ease, color .3s ease, opacity .3s ease
+}
+
+.plyr__controls button svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  fill: currentColor;
+  transition: fill .3s ease
+}
+
+.plyr__controls button.tab-focus:focus, .plyr__controls button:hover {
+  background: #3498DB;
+  color: #fff
+}
+
+.plyr__controls .plyr__time, .plyr__tooltip {
+  color: var(--color-highlight);
+  font-size: 14px;
+  font-weight: 600
+}
+
+.plyr__controls button:focus {
+  outline: 0
+}
+
+.plyr__controls .icon--captions-on, .plyr__controls .icon--exit-fullscreen, .plyr__controls .icon--muted {
+  display: none
+}
+
+.plyr__controls .plyr__time {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px
+}
+
+.plyr__controls .plyr__time + .plyr__time {
+  display: none
+}
+
+@media (min-width: 560px) {
+  .plyr__controls .plyr__time + .plyr__time {
+    display: inline-block
+  }
+}
+
+.plyr__controls .plyr__time + .plyr__time::before {
+  content: '\2044';
+  margin-right: 10px
+}
+
+.plyr__tooltip {
+  visibility: hidden;
+  position: absolute;
+  z-index: 2;
+  bottom: 100%;
+  margin-bottom: 10px;
+  padding: 10px 15px;
+  opacity: 0;
+  background: #fff;
+  box-shadow: 0 0 5px rgba(64, 64, 64, .1), 0 0 0 1px rgba(64, 64, 64, .1);
+  border-radius: 3px;
+  line-height: 1.5;
+  transform: translate(-50%, 10px) scale(.8);
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+  transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
+}
+
+.plyr__tooltip::after, .plyr__tooltip::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%)
+}
+
+.plyr__tooltip::after {
+  bottom: -8px;
+  border-right: 7px solid transparent;
+  border-top: 7px solid rgba(64, 64, 64, .2);
+  border-left: 7px solid transparent;
+  z-index: 1
+}
+
+.plyr__tooltip::before {
+  bottom: -6px;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #fff;
+  border-left: 6px solid transparent;
+  z-index: 2
+}
+
+.plyr button.tab-focus:focus .plyr__tooltip, .plyr button:hover .plyr__tooltip, .plyr__tooltip--visible {
+  visibility: visible;
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1)
+}
+
+.plyr button:hover .plyr__tooltip {
+  z-index: 3
+}
+
+.plyr input[type=range]::-ms-tooltip {
+  display: none
+}
+
+.plyr input[type=range].tab-focus:focus {
+  outline: rgba(52, 63, 74, .8) dotted 1px;
+  outline-offset: 3px
+}
+
+.plyr__progress--seek[type=range]:focus, .plyr__volume[type=range]:focus {
+  outline: 0
+}
+
+.plyr__progress {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 10px;
+  background: transparent;
+}
+
+.plyr__progress--buffer[value], .plyr__progress--played[value], .plyr__progress--seek[type=range] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 4px;
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  background: 0 0
+}
+
+.plyr__progress--buffer[value]::-webkit-progress-bar, .plyr__progress--played[value]::-webkit-progress-bar {
+  background: 0 0;
+  transition: width .2s ease
+}
+
+.plyr__progress--buffer[value]::-webkit-progress-value, .plyr__progress--played[value]::-webkit-progress-value {
+  background: currentColor;
+  transition: width .2s ease
+}
+
+.plyr__progress--buffer[value]::-moz-progress-bar, .plyr__progress--played[value]::-moz-progress-bar {
+  background: currentColor;
+  transition: width .2s ease
+}
+
+.plyr__progress--played[value] {
+  z-index: 2;
+  color: #3498DB
+}
+
+.plyr__progress--buffer[value] {
+  color: rgba(86, 93, 100, .25)
+}
+
+.plyr__progress--seek[type=range] {
+  z-index: 4;
+  cursor: pointer;
+  outline: 0;
+  height: 10px; /* increase height for touch */
+}
+
+.plyr__progress--seek[type=range]::-webkit-slider-runnable-track {
+  background: 0 0;
+  border: 0
+}
+
+.plyr__progress--seek[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background: 0 0;
+  border: 0;
+  width: 1px;
+  height: 10px
+}
+
+.plyr__progress--seek[type=range]::-moz-range-track {
+  background: 0 0;
+  border: 0
+}
+
+.plyr__progress--seek[type=range]::-moz-range-thumb {
+  -moz-appearance: none;
+  background: 0 0;
+  border: 0;
+  width: 1px;
+  height: 10px
+}
+
+.plyr__progress--seek[type=range]::-ms-track {
+  color: transparent;
+  background: 0 0;
+  border: 0
+}
+
+.plyr__progress--seek[type=range]::-ms-fill-lower, .plyr__progress--seek[type=range]::-ms-fill-upper {
+  background: 0 0;
+  border: 0
+}
+
+.plyr__progress--seek[type=range]::-ms-thumb {
+  background: 0 0;
+  border: 0;
+  width: 1px;
+  height: 10px
+}
+
+.plyr__progress--seek[type=range]::-moz-focus-outer {
+  border: 0
+}
+
+.plyr__progress .plyr__tooltip {
+  left: 0
+}
+
+.plyr--is-touch .plyr--seek[type=range]::-webkit-slider-thumb {
+  width: 40px;
+  transform: translateX(-50%)
+}
+
+.plyr--is-touch .plyr--seek[type=range]::-moz-range-thumb {
+  width: 40px;
+  transform: translateX(-50%)
+}
+
+.plyr--is-touch .plyr--seek[type=range]::-ms-thumb {
+  width: 40px;
+  transform: translateX(-50%)
+}
+
+.plyr--loading .plyr__progress--buffer {
+  -webkit-animation: plyr-progress 1s linear infinite;
+  animation: plyr-progress 1s linear infinite;
+  background-size: 40px 40px;
+  background-repeat: repeat-x;
+  background-color: rgba(86, 93, 100, .25);
+  background-image: linear-gradient(-45deg, rgba(0, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .15) 75%, transparent 75%, transparent);
+  color: transparent
+}
+
+.plyr--playing .plyr__controls [data-plyr=play], .plyr__controls [data-plyr=pause] {
+  display: none
+}
+
+.plyr--playing .plyr__controls [data-plyr=pause] {
+  display: inline-block
+}
+
+.plyr__volume[type=range] {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100px;
+  margin: 0 10px 0 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: none
+}
+
+.plyr__volume[type=range]::-webkit-slider-runnable-track {
+  height: 6px;
+  background: rgba(255, 255, 255, .2);
+  border: 0;
+  border-radius: 3px
+}
+
+.plyr__volume[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  margin-top: -3px;
+  height: 12px;
+  width: 12px;
+  background: var(--color-highlight);
+  border: 0;
+  border-radius: 100%;
+  transition: background .3s ease;
+  cursor: ew-resize
+}
+
+.plyr__volume[type=range]::-moz-range-track {
+  height: 6px;
+  background: rgba(255, 255, 255, .2);
+  border: 0;
+  border-radius: 3px
+}
+
+.plyr__volume[type=range]::-moz-range-thumb {
+  height: 12px;
+  width: 12px;
+  background: var(--color-highlight);
+  border: 0;
+  border-radius: 100%;
+  transition: background .3s ease;
+  cursor: ew-resize
+}
+
+.plyr__volume[type=range]::-ms-track {
+  height: 6px;
+  background: rgba(255, 255, 255, .2);
+  border-color: transparent;
+  border-width: 3px 0;
+  color: transparent
+}
+
+.plyr__volume[type=range]::-ms-fill-lower, .plyr__volume[type=range]::-ms-fill-upper {
+  height: 6px;
+  background: rgba(255, 255, 255, .2);
+  border: 0;
+  border-radius: 3px
+}
+
+.plyr__volume[type=range]::-ms-thumb {
+  height: 12px;
+  width: 12px;
+  background: var(--color-highlight);
+  border: 0;
+  border-radius: 100%;
+  transition: background .3s ease;
+  cursor: ew-resize
+}
+
+.plyr__volume[type=range]:focus::-webkit-slider-thumb {
+  background: transparent;
+}
+
+.plyr__volume[type=range]:focus::-moz-range-thumb {
+  background: #3498DB
+}
+
+.plyr__volume[type=range]:focus::-ms-thumb {
+  background: #3498DB
+}
+
+.plyr--is-ios .plyr__volume, .plyr--is-ios [data-plyr=mute], .plyr--is-ios.plyr--audio .plyr__controls--right {
+  display: none
+}
+
+.plyr--is-ios.plyr--audio .plyr__controls--left {
+  float: none
+}
+
+.plyr--audio .plyr__controls {
+  padding-top: 20px
+}
+
+.plyr--audio .plyr__progress {
+  bottom: auto;
+  top: 0;
+  background: transparent;
+}
+
+.plyr--fullscreen-active, .plyr.plyr--fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10000000;
+  background: #000
+}
+
+.plyr--fullscreen-active video, .plyr.plyr--fullscreen video {
+  height: 100%
+}
+
+.plyr--fullscreen-active .plyr__video-wrapper, .plyr.plyr--fullscreen .plyr__video-wrapper {
+  height: 100%;
+  width: 100%
+}
+
+.plyr--fullscreen-active .plyr__controls, .plyr.plyr--fullscreen .plyr__controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0
+}
+
+.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing .plyr__controls, .plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing .plyr__controls {
+  transform: translateY(100%) translateY(5px);
+  transition: transform .3s .2s ease;
+}
+
+.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing .plyr__captions, .plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing .plyr__captions {
+  bottom: 5px;
+  transition: bottom .3s .2s ease
+}
+
+.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls, .plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls {
+  transform: translateY(0)
+}
+
+.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions, .plyr--fullscreen-active .plyr__captions, .plyr.plyr--fullscreen .plyr__captions {
+  top: auto;
+  bottom: 90px
+}
+
+@media (min-width: 560px) {
+  .plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions, .plyr--fullscreen-active .plyr__captions, .plyr.plyr--fullscreen .plyr__captions {
+    bottom: 60px
+  }
+}
+
+.plyr--captions-active .plyr__controls .icon--captions-on, .plyr--fullscreen-active .icon--exit-fullscreen, .plyr--muted .plyr__controls .icon--muted {
+  display: block
+}
+
+.plyr [data-plyr=fullscreen], .plyr [data-plyr=captions], .plyr--captions-active .plyr__controls .icon--captions-on + svg, .plyr--fullscreen-active .icon--exit-fullscreen + svg, .plyr--muted .plyr__controls .icon--muted + svg {
+  display: none
+}
+
+.plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen] {
+  display: inline-block
+}
diff --git a/resources/assets/css/vendor/reset.pcss b/resources/assets/css/vendor/reset.pcss
new file mode 100644
index 00000000..4d4d78df
--- /dev/null
+++ b/resources/assets/css/vendor/reset.pcss
@@ -0,0 +1,34 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block
+}
+
+body {
+  line-height: 1
+}
+
+ol, ul {
+  list-style: none
+}
+
+blockquote, q {
+  quotes: none
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+  content: '';
+  content: none
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index 83716ec6..88bfcc7a 100644
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, onMounted, provide, ref, watch } from 'vue'
+import { defineAsyncComponent, onMounted, provide, ref, watch } from 'vue'
 import { useOnline } from '@vueuse/core'
 import { commonStore, preferenceStore as preferences, queueStore } from '@/stores'
 import { authService, socketListener, socketService, uploadService } from '@/services'
@@ -160,9 +160,7 @@ provide(MessageToasterKey, toaster)
 provide(CurrentSongKey, currentSong)
 </script>
 
-<style lang="scss">
-@import "#/app.scss";
-
+<style lang="postcss">
 #dragGhost {
   display: inline-block;
   background: var(--color-green);
diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts
index fcd790f1..4c70d419 100644
--- a/resources/assets/js/app.ts
+++ b/resources/assets/js/app.ts
@@ -4,6 +4,7 @@ import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome
 import { RouterKey } from '@/symbols'
 import { routes } from '@/config'
 import Router from '@/router'
+import '@/../css/app.pcss'
 import App from './App.vue'
 
 createApp(App)
diff --git a/resources/assets/js/components/album/AlbumInfo.vue b/resources/assets/js/components/album/AlbumInfo.vue
index 2700c122..05943a01 100644
--- a/resources/assets/js/components/album/AlbumInfo.vue
+++ b/resources/assets/js/components/album/AlbumInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <article :class="mode" class="album-info" data-testid="album-info">
+  <article :class="mode" class="album-info artist-album-info" data-testid="album-info">
     <h1 v-if="mode === 'aside'" class="name">
       <span>{{ album.name }}</span>
       <button :title="`Play all songs in ${album.name}`" class="control" type="button" @click.prevent="play">
@@ -68,17 +68,3 @@ const play = async () => {
   go('queue')
 }
 </script>
-
-<style lang="scss" scoped>
-.album-info {
-  @include artist-album-info();
-
-  .track-listing {
-    margin-top: 2rem;
-
-    :deep(h1) {
-      margin-bottom: 1.2rem;
-    }
-  }
-}
-</style>
diff --git a/resources/assets/js/components/album/AlbumTrackList.vue b/resources/assets/js/components/album/AlbumTrackList.vue
index f4e60415..194d22cc 100644
--- a/resources/assets/js/components/album/AlbumTrackList.vue
+++ b/resources/assets/js/components/album/AlbumTrackList.vue
@@ -1,13 +1,13 @@
 <template>
-  <section class="track-listing">
-    <h1>Track Listing</h1>
+  <article class="track-listing">
+    <h3>Track Listing</h3>
 
     <ul class="tracks">
       <li v-for="(track, index) in tracks" :key="index" data-testid="album-track-item">
         <TrackListItem :album="album" :track="track" />
       </li>
     </ul>
-  </section>
+  </article>
 </template>
 
 <script lang="ts" setup>
@@ -28,12 +28,11 @@ provide(SongsKey, songs)
 onMounted(async () => songs.value = await songStore.fetchForAlbum(album.value))
 </script>
 
-<style lang="scss" scoped>
-section {
-  h1 {
+<style lang="postcss" scoped>
+article {
+  h3 {
     font-size: 1.4rem;
-    margin-bottom: 0;
-    display: block;
+    margin-bottom: 1rem;
   }
 
   ul {
diff --git a/resources/assets/js/components/album/AlbumTrackListItem.vue b/resources/assets/js/components/album/AlbumTrackListItem.vue
index d6ac5987..809768b7 100644
--- a/resources/assets/js/components/album/AlbumTrackListItem.vue
+++ b/resources/assets/js/components/album/AlbumTrackListItem.vue
@@ -47,7 +47,7 @@ const play = () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .track-list-item {
   display: flex;
   flex: 1;
diff --git a/resources/assets/js/components/artist/ArtistInfo.vue b/resources/assets/js/components/artist/ArtistInfo.vue
index 170f66aa..cedffbf7 100644
--- a/resources/assets/js/components/artist/ArtistInfo.vue
+++ b/resources/assets/js/components/artist/ArtistInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <article :class="mode" class="artist-info" data-testid="artist-info">
+  <article :class="mode" class="artist-info artist-album-info" data-testid="artist-info">
     <h1 v-if="mode === 'aside'" class="name">
       <span>{{ artist.name }}</span>
       <button :title="`Play all songs by ${artist.name}`" class="control" type="button" @click.prevent="play">
@@ -65,10 +65,8 @@ const play = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .artist-info {
-  @include artist-album-info();
-
   .none {
     margin-top: 1rem;
   }
diff --git a/resources/assets/js/components/auth/ForgotPasswordForm.vue b/resources/assets/js/components/auth/ForgotPasswordForm.vue
index f8e13646..4e2a8dcb 100644
--- a/resources/assets/js/components/auth/ForgotPasswordForm.vue
+++ b/resources/assets/js/components/auth/ForgotPasswordForm.vue
@@ -45,7 +45,7 @@ const requestResetPasswordLink = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 form {
   min-width: 480px;
 
diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index 15b73d37..0e23e988 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -86,7 +86,7 @@ const onSSOSuccess = (token: CompositeToken) => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 /**
  * I like to move it move it
  * I like to move it move it
diff --git a/resources/assets/js/components/auth/ResetPasswordForm.vue b/resources/assets/js/components/auth/ResetPasswordForm.vue
index 79e819e9..5537a175 100644
--- a/resources/assets/js/components/auth/ResetPasswordForm.vue
+++ b/resources/assets/js/components/auth/ResetPasswordForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="reset-password-wrapper">
+  <div class="reset-password-wrapper vertical-center">
     <form v-if="validPayload" @submit.prevent="submit">
       <h1 class="font-size-1.5">Set New Password</h1>
       <div>
@@ -55,10 +55,8 @@ const submit = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .reset-password-wrapper {
-  @include vertical-center;
-
   height: 100vh;
 }
 
diff --git a/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap b/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
index 77c4b479..411d0060 100644
--- a/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
+++ b/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`renders 1`] = `
 <div data-v-0b0f87ea="" class="login-wrapper">
   <form data-v-0b0f87ea="" class="" data-testid="login-form">
     <div data-v-0b0f87ea="" class="logo"><img data-v-0b0f87ea="" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156"></div><input data-v-0b0f87ea="" autofocus="" placeholder="Email Address" required="" type="email">
-    <div data-v-a2893005="" data-v-0b0f87ea=""><input data-v-a2893005="" type="password" placeholder="Password" required=""><button data-v-a2893005="" type="button"><br data-v-a2893005="" data-testid="Icon" icon="[object Object]"></button></div><button data-v-e368fe26="" data-v-0b0f87ea="" type="submit">Log In</button><a data-v-0b0f87ea="" class="reset-password" role="button"> Forgot password? </a>
+    <div data-v-a2893005="" data-v-0b0f87ea=""><input data-v-a2893005="" type="password" placeholder="Password" required=""><button data-v-a2893005="" type="button"><br data-v-a2893005="" data-testid="Icon" icon="[object Object]"></button></div><button data-v-e368fe26="" data-v-0b0f87ea="" class="inset-when-pressed" type="submit">Log In</button><a data-v-0b0f87ea="" class="reset-password" role="button"> Forgot password? </a>
   </form>
   <!--v-if-->
   <!--v-if-->
@@ -15,7 +15,7 @@ exports[`shows Google login button 1`] = `
 <div data-v-0b0f87ea="" class="login-wrapper">
   <form data-v-0b0f87ea="" class="" data-testid="login-form">
     <div data-v-0b0f87ea="" class="logo"><img data-v-0b0f87ea="" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156"></div><input data-v-0b0f87ea="" autofocus="" placeholder="Email Address" required="" type="email">
-    <div data-v-a2893005="" data-v-0b0f87ea=""><input data-v-a2893005="" type="password" placeholder="Password" required=""><button data-v-a2893005="" type="button"><br data-v-a2893005="" data-testid="Icon" icon="[object Object]"></button></div><button data-v-e368fe26="" data-v-0b0f87ea="" type="submit">Log In</button><a data-v-0b0f87ea="" class="reset-password" role="button"> Forgot password? </a>
+    <div data-v-a2893005="" data-v-0b0f87ea=""><input data-v-a2893005="" type="password" placeholder="Password" required=""><button data-v-a2893005="" type="button"><br data-v-a2893005="" data-testid="Icon" icon="[object Object]"></button></div><button data-v-e368fe26="" data-v-0b0f87ea="" class="inset-when-pressed" type="submit">Log In</button><a data-v-0b0f87ea="" class="reset-password" role="button"> Forgot password? </a>
   </form>
   <div data-v-0b0f87ea="" class="sso"><br data-v-0b0f87ea="" data-testid="google-login-button"></div>
   <!--v-if-->
diff --git a/resources/assets/js/components/auth/sso/GoogleLoginButton.vue b/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
index 8159d0b5..b5d157df 100644
--- a/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
+++ b/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
@@ -23,7 +23,7 @@ const loginWithGoogle = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 button {
   opacity: .5;
 
diff --git a/resources/assets/js/components/invitation/AcceptInvitation.vue b/resources/assets/js/components/invitation/AcceptInvitation.vue
index 1cc5b467..17569e21 100644
--- a/resources/assets/js/components/invitation/AcceptInvitation.vue
+++ b/resources/assets/js/components/invitation/AcceptInvitation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="invitation-wrapper">
+  <div class="invitation-wrapper vertical-center">
     <form v-if="userProspect" autocomplete="off" @submit.prevent="submit">
       <header>
         Welcome to Koel! To accept the invitation, fill in the form below and click that button.
@@ -92,10 +92,8 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .invitation-wrapper {
-  @include vertical-center();
-
   display: flex;
   height: 100vh;
   flex-direction: column;
diff --git a/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue b/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
index 5ce376a3..18d244ba 100644
--- a/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
+++ b/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
@@ -40,7 +40,7 @@ const validateLicenseKey = async () => {
 </script>
 
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 form {
   display: flex;
   align-items: stretch;
diff --git a/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue b/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
index 95517b68..a93498fb 100644
--- a/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
+++ b/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
@@ -1,5 +1,5 @@
 <template>
-  <a href class="upgrade-to-plus-btn" @click.prevent="openModal">
+  <a href class="upgrade-to-plus-btn inset-when-pressed" @click.prevent="openModal">
     <Icon :icon="faPlus" fixed-width />
     Upgrade to Plus
   </a>
@@ -12,10 +12,8 @@ import { eventBus } from '@/utils'
 const openModal = () => eventBus.emit('MODAL_SHOW_KOEL_PLUS')
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 a.upgrade-to-plus-btn {
-  @include inset-when-pressed();
-
   background: linear-gradient(97.78deg, #671ce4 17.5%, #c62be8 113.39%);
   border-radius: 5px;
   border-style: solid;
@@ -26,7 +24,7 @@ a.upgrade-to-plus-btn {
   }
 
   &:active {
-    padding: .65rem 1rem; // prevent layout jump in sidebar
+    padding: .65rem 1rem; /* prevent layout jump in sidebar */
   }
 }
 </style>
diff --git a/resources/assets/js/components/koel-plus/KoelPlusModal.vue b/resources/assets/js/components/koel-plus/KoelPlusModal.vue
index f184d536..c89d5970 100644
--- a/resources/assets/js/components/koel-plus/KoelPlusModal.vue
+++ b/resources/assets/js/components/koel-plus/KoelPlusModal.vue
@@ -55,7 +55,7 @@ const hideActivateLicenseForm = () => (showingActivateLicenseForm.value = false)
 onMounted(() => window.createLemonSqueezy?.())
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .plus {
   max-width: 480px;
   display: flex;
diff --git a/resources/assets/js/components/layout/ModalWrapper.vue b/resources/assets/js/components/layout/ModalWrapper.vue
index f49a6802..79e3e464 100644
--- a/resources/assets/js/components/layout/ModalWrapper.vue
+++ b/resources/assets/js/components/layout/ModalWrapper.vue
@@ -85,7 +85,7 @@ eventBus.on('MODAL_SHOW_ABOUT_KOEL', () => (activeModalName.value = 'about-koel'
   .on('MODAL_SHOW_EQUALIZER', () => (activeModalName.value = 'equalizer'))
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 dialog {
   border: 0;
   padding: 0;
diff --git a/resources/assets/js/components/layout/app-footer/AudioPlayer.vue b/resources/assets/js/components/layout/app-footer/AudioPlayer.vue
index c8f99f86..db3e87bc 100644
--- a/resources/assets/js/components/layout/app-footer/AudioPlayer.vue
+++ b/resources/assets/js/components/layout/app-footer/AudioPlayer.vue
@@ -10,8 +10,8 @@
 <script lang="ts" setup>
 </script>
 
-<style lang="scss">
-// can't be scoped as it would be overridden by the plyr css
+<style lang="postcss">
+/* can't be scoped as it would be overridden by the plyr css */
 .plyr {
   width: 100%;
   height: 4px;
diff --git a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
index ef89e7de..0a181dec 100644
--- a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
@@ -62,7 +62,7 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .extra-controls {
   display: flex;
   justify-content: flex-end;
diff --git a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
index 2b48f4e1..5cf44615 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
@@ -36,7 +36,7 @@ const playPrev = async () => await playbackService.playPrev()
 const playNext = async () => await playbackService.playNext()
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .playback-controls {
   flex: 1;
   display: flex;
diff --git a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
index 1b21fea4..d3f7080d 100644
--- a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
@@ -33,7 +33,7 @@ const onDragStart = (event: DragEvent) => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .song-info {
   padding: 0 1.5rem;
   display: flex;
diff --git a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap
index c555c69a..0e3f29ca 100644
--- a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap
+++ b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders 1`] = `
 <div data-v-8bf5fe81="" class="extra-controls" data-testid="other-controls">
   <div data-v-8bf5fe81="" class="wrapper"><button data-v-8bf5fe81="" class="visualizer-btn" data-testid="toggle-visualizer-btn" title="Toggle visualizer"><br data-v-8bf5fe81="" data-testid="Icon" icon="[object Object]"></button>
-    <!--v-if--><span data-v-8bf5fe81="" id="volume" class="volume muted"><span role="button" tabindex="0" title="Unmute"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><span role="button" tabindex="0" title="Mute" style="display: none;"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><input class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>
+    <!--v-if--><span data-v-c7afcfc4="" data-v-8bf5fe81="" id="volume" class="volume muted"><span data-v-c7afcfc4="" role="button" tabindex="0" title="Unmute"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><span data-v-c7afcfc4="" role="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><input data-v-c7afcfc4="" class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>
     <!--v-if-->
   </div>
 </div>
diff --git a/resources/assets/js/components/layout/app-footer/index.vue b/resources/assets/js/components/layout/app-footer/index.vue
index 1dd119c6..37d1631a 100644
--- a/resources/assets/js/components/layout/app-footer/index.vue
+++ b/resources/assets/js/components/layout/app-footer/index.vue
@@ -99,7 +99,7 @@ watch(isFullscreen, fullscreen => {
 eventBus.on('FULLSCREEN_TOGGLE', () => toggleFullscreen())
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 footer {
   background-color: var(--color-bg-secondary);
   background-size: 0;
diff --git a/resources/assets/js/components/layout/main-wrapper/ExtraDrawer.vue b/resources/assets/js/components/layout/main-wrapper/ExtraDrawer.vue
index f928e59e..60e840bc 100644
--- a/resources/assets/js/components/layout/main-wrapper/ExtraDrawer.vue
+++ b/resources/assets/js/components/layout/main-wrapper/ExtraDrawer.vue
@@ -123,7 +123,7 @@ const logout = () => eventBus.emit('LOG_OUT')
 onMounted(() => isMobile.any || (activeTab.value = preferenceStore.active_extra_panel_tab))
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 aside {
   display: flex;
   flex-direction: row-reverse;
@@ -132,7 +132,12 @@ aside {
   z-index: 2;
 
   @media screen and (max-width: 768px) {
-    @include themed-background();
+    background-color: var(--color-bg-primary);
+    background-image: var(--bg-image);
+    background-attachment: var(--bg-attachment);
+    background-size: var(--bg-size);
+    background-position: var(--bg-position);
+
     flex-direction: column;
     position: fixed;
     top: 0;
@@ -152,7 +157,7 @@ aside {
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
 
   @media (hover: none) {
-    // Enable scroll with momentum on touch devices
+    /* Enable scroll with momentum on touch devices */
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
   }
@@ -219,6 +224,7 @@ aside {
     &:hover, &.active {
       opacity: 1;
       color: var(--color-text-primary);
+      background: rgba(255, 255, 255, .1);
     }
 
     &:active {
diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.vue b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
index 53c44d61..b28cc265 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.vue
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
@@ -78,7 +78,7 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #mainContent {
   flex: 1;
   position: relative;
@@ -113,7 +113,7 @@ onMounted(async () => {
       place-content: start;
 
       @media (hover: none) {
-        // Enable scroll with momentum on touch devices
+        /* Enable scroll with momentum on touch devices */
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
       }
@@ -122,7 +122,7 @@ onMounted(async () => {
 
   @media screen and (max-width: 768px) {
     > section {
-      // Leave some space for the "Back to top" button
+      /* Leave some space for the "Back to top" button */
       .main-scroll-wrap {
         padding-bottom: 64px;
       }
diff --git a/resources/assets/js/components/layout/main-wrapper/index.vue b/resources/assets/js/components/layout/main-wrapper/index.vue
index 208ecffb..1228a4b6 100644
--- a/resources/assets/js/components/layout/main-wrapper/index.vue
+++ b/resources/assets/js/components/layout/main-wrapper/index.vue
@@ -17,12 +17,12 @@ import ExtraDrawer from '@/components/layout/main-wrapper/ExtraDrawer.vue'
 const ModalWrapper = defineAsyncComponent(() => import('@/components/layout/ModalWrapper.vue'))
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #mainWrapper {
   position: relative;
   display: flex;
   flex: 1;
-  height: 0; // fix a flex-box bug https://github.com/philipwalton/flexbugs/issues/197#issuecomment-378908438
+  height: 0; /* fix a flex-box bug https://github.com/philipwalton/flexbugs/issues/197#issuecomment-378908438 */
   overflow: hidden;
 }
 </style>
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue
index 89a47663..f4e59884 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue
@@ -107,7 +107,7 @@ const onContextMenu = (event: MouseEvent) => eventBus.emit(
 )
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 li.playlist-folder {
   position: relative;
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
index f13adedc..8ec4be9b 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
@@ -127,7 +127,7 @@ onRouteChanged(route => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .playlist {
   user-select: none;
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarList.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarList.vue
index 8b6ac7d2..bde6c37b 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarList.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarList.vue
@@ -53,7 +53,7 @@ const requestContextMenu = () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #playlists {
   h1 {
     display: flex;
@@ -67,7 +67,7 @@ const requestContextMenu = () => {
       position: relative;
 
       &::before {
-        // increase clickable area
+        /* increase clickable area */
         content: '';
         position: absolute;
         width: 28px;
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
index 0320923f..4c41b850 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
@@ -130,7 +130,7 @@ eventBus.on('TOGGLE_SIDEBAR', () => (mobileShowing.value = !mobileShowing.value)
   .on('PLAY_YOUTUBE_VIDEO', _ => (youTubePlaying.value = true))
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 nav {
   position: relative;
   width: var(--sidebar-width);
@@ -176,7 +176,7 @@ nav {
     overflow-y: auto;
 
     @media (hover: none) {
-      // Enable scroll with momentum on touch devices
+      /* Enable scroll with momentum on touch devices */
       overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
     }
@@ -256,7 +256,7 @@ nav {
     }
   }
 
-  :deep(li li a) { // submenu items
+  :deep(li li a) { /* submenu items */
     padding-left: 11px;
 
     &:active {
@@ -287,7 +287,12 @@ nav {
   }
 
   @media screen and (max-width: 768px) {
-    @include themed-background();
+    background-color: var(--color-bg-primary);
+    background-image: var(--bg-image);
+    background-attachment: var(--bg-attachment);
+    background-size: var(--bg-size);
+    background-position: var(--bg-position);
+
     transform: translateX(-100vw);
     transition: transform .2s ease-in-out;
 
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 382ee84f..80fa19b1 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -105,7 +105,7 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .about {
   text-align: center;
   max-width: 480px;
diff --git a/resources/assets/js/components/meta/SponsorList.vue b/resources/assets/js/components/meta/SponsorList.vue
index 4604bc06..7dfbc7d6 100644
--- a/resources/assets/js/components/meta/SponsorList.vue
+++ b/resources/assets/js/components/meta/SponsorList.vue
@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import sponsors from '@/sponsors'</script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .sponsors {
   display: flex;
   align-items: center;
diff --git a/resources/assets/js/components/meta/SupportKoel.vue b/resources/assets/js/components/meta/SupportKoel.vue
index 2d1ff64b..e3b9a7c1 100644
--- a/resources/assets/js/components/meta/SupportKoel.vue
+++ b/resources/assets/js/components/meta/SupportKoel.vue
@@ -42,7 +42,7 @@ watch(preferenceStore.initialized, initialized => {
 }, { immediate: true })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .support-bar {
   background: var(--color-bg-primary);
   font-size: .9rem;
diff --git a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
index 61ab1227..bbb8caa8 100644
--- a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
+++ b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
@@ -12,6 +12,6 @@ exports[`renders 1`] = `
     <!--v-if--><br data-v-6b5b01a9="" data-testid="sponsor-list">
     <p data-v-6b5b01a9=""> Loving Koel? Please consider supporting its development via <a data-v-6b5b01a9="" href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank">GitHub Sponsors</a> and/or <a data-v-6b5b01a9="" href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>. </p>
   </main>
-  <footer data-v-6b5b01a9=""><button data-v-e368fe26="" data-v-6b5b01a9="" data-testid="close-modal-btn" red="" rounded="">Close</button></footer>
+  <footer data-v-6b5b01a9=""><button data-v-e368fe26="" data-v-6b5b01a9="" class="inset-when-pressed" data-testid="close-modal-btn" red="" rounded="">Close</button></footer>
 </div>
 `;
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.vue b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
index 4bdc1353..d2783b76 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
@@ -98,7 +98,7 @@ const maybeClose = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 form {
   min-width: 100%;
 }
diff --git a/resources/assets/js/components/playlist/EditPlaylistForm.vue b/resources/assets/js/components/playlist/EditPlaylistForm.vue
index b390629d..2628e96b 100644
--- a/resources/assets/js/components/playlist/EditPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/EditPlaylistForm.vue
@@ -86,7 +86,7 @@ const maybeClose = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 form {
   min-width: 100%;
 }
diff --git a/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
index e1ffab78..a0af9662 100644
--- a/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
+++ b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
@@ -37,7 +37,7 @@ const inviteCollaborators = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .copied {
   font-size: .95rem;
 }
diff --git a/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue b/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
index 795047dc..0ad1cdc3 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
@@ -48,7 +48,7 @@ const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .collaboration-modal {
   max-width: 640px;
 }
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
index 4c0cfe3f..27eaa4ce 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
@@ -70,7 +70,7 @@ const removeCollaborator = async (collaborator: PlaylistCollaborator) => {
 onMounted(async () => await fetchCollaborators())
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 ul {
   display: flex;
   width: 100%;
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
index 3e54254a..1722597a 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
@@ -43,7 +43,7 @@ const { currentUser } = useAuthorization()
 const emit = defineEmits<{ (e: 'remove'): void }>()
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 li {
   display: flex;
   align-items: center;
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue
index 08847326..e00d3643 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue
@@ -23,7 +23,7 @@ const displayedCollaborators = computed(() => collaborators.value.slice(0, 3))
 const remainderCount = computed(() => collaborators.value.length - displayedCollaborators.value.length)
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 div {
   display: inline-block;
   vertical-align: middle;
diff --git a/resources/assets/js/components/playlist/__snapshots__/PlaylistCollaborationModal.spec.ts.snap b/resources/assets/js/components/playlist/__snapshots__/PlaylistCollaborationModal.spec.ts.snap
index 78fc5aa4..70064e51 100644
--- a/resources/assets/js/components/playlist/__snapshots__/PlaylistCollaborationModal.spec.ts.snap
+++ b/resources/assets/js/components/playlist/__snapshots__/PlaylistCollaborationModal.spec.ts.snap
@@ -14,6 +14,6 @@ exports[`renders the modal 1`] = `
       <div data-v-886145d2="" class="collaborators-wrapper"><br data-v-886145d2="" data-testid="CollaboratorList" playlist="[object Object]"></div>
     </section>
   </main>
-  <footer data-v-886145d2=""><button data-v-e368fe26="" data-v-886145d2="">Close</button></footer>
+  <footer data-v-886145d2=""><button data-v-e368fe26="" data-v-886145d2="" class="inset-when-pressed">Close</button></footer>
 </div>
 `;
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
index 7701b8bc..58cc15b6 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .smart-playlist-form {
   width: 560px;
   max-height: calc(100vh - 4rem);
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
index ec6a9a06..c7ae8445 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
@@ -113,7 +113,7 @@ const onInput = () => {
 const removeRule = () => emit('remove')
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .row {
   display: flex;
   gap: .5rem;
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
index 026ec055..dc2ad3ec 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
@@ -54,7 +54,7 @@ const removeRule = (rule: SmartPlaylistRule) => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .rule-group {
   margin-bottom: 1rem;
   padding-bottom: .5rem;
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
index 310cd703..67d491be 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
@@ -17,7 +17,7 @@ const value = computed({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 input {
   width: 140px !important;
 }
diff --git a/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue b/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
index 006f3e4c..a09ef58d 100644
--- a/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
+++ b/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
@@ -77,7 +77,7 @@ const onCancel = () => (cropperSource.value = null)
 </script>
 
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .avatar {
   --w: 105px;
   outline: rgba(255, 255, 255, .1) solid 3px;
diff --git a/resources/assets/js/components/profile-preferences/Integrations.vue b/resources/assets/js/components/profile-preferences/Integrations.vue
index f5b9588f..822d688c 100644
--- a/resources/assets/js/components/profile-preferences/Integrations.vue
+++ b/resources/assets/js/components/profile-preferences/Integrations.vue
@@ -15,7 +15,7 @@ import LastfmIntegration from '@/components/profile-preferences/LastfmIntegratio
 import SpotifyIntegration from '@/components/profile-preferences/SpotifyIntegration.vue'
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .integrations {
   > article + article {
     margin-top: 2rem;
diff --git a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
index 24617723..4d142024 100644
--- a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
+++ b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
@@ -77,9 +77,9 @@ const disconnect = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .lastfm-icon {
-  color: #d31f27; // Last.fm red
+  color: #d31f27; /* Last.fm red */
   margin-right: .4rem;
 }
 
diff --git a/resources/assets/js/components/profile-preferences/PreferencesForm.vue b/resources/assets/js/components/profile-preferences/PreferencesForm.vue
index 9d87ba3a..c961eae6 100644
--- a/resources/assets/js/components/profile-preferences/PreferencesForm.vue
+++ b/resources/assets/js/components/profile-preferences/PreferencesForm.vue
@@ -50,7 +50,7 @@ const isPhone = isMobile.phone
 const { isPlus } = useKoelPlus()
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 label {
   font-size: 1rem;
 }
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index b6f608c4..d3004dea 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -129,7 +129,7 @@ const update = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 form {
   input {
     width: 100%;
diff --git a/resources/assets/js/components/profile-preferences/QRLogin.vue b/resources/assets/js/components/profile-preferences/QRLogin.vue
index 3f2b4a44..d6b4fdd8 100644
--- a/resources/assets/js/components/profile-preferences/QRLogin.vue
+++ b/resources/assets/js/components/profile-preferences/QRLogin.vue
@@ -37,7 +37,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 img {
   margin-top: 1.5rem;
   display: block;
diff --git a/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue b/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue
index eceefd6c..5a16bd26 100644
--- a/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue
+++ b/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue
@@ -36,9 +36,9 @@ const { currentUser, isAdmin } = useAuthorization();
 const { useSpotify } = useThirdPartyServices();
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .spotify-icon {
   margin-right: .4rem;
-  color: #1db954; // Spotify green
+  color: #1db954; /* Spotify green */
 }
 </style>
diff --git a/resources/assets/js/components/profile-preferences/ThemeCard.vue b/resources/assets/js/components/profile-preferences/ThemeCard.vue
index 846f9916..80179c3a 100644
--- a/resources/assets/js/components/profile-preferences/ThemeCard.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeCard.vue
@@ -31,7 +31,7 @@ if (theme.value.thumbnailUrl) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .theme {
   height: 100%;
   background-position: center;
diff --git a/resources/assets/js/components/profile-preferences/ThemeList.vue b/resources/assets/js/components/profile-preferences/ThemeList.vue
index e9a847b4..d59ca2be 100644
--- a/resources/assets/js/components/profile-preferences/ThemeList.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeList.vue
@@ -19,7 +19,7 @@ const themes = toRef(themeStore.state, 'themes')
 const setTheme = (theme: Theme) => themeStore.setTheme(theme)
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .themes {
   display: grid;
   grid-auto-rows: 8rem;
diff --git a/resources/assets/js/components/screens/AlbumListScreen.vue b/resources/assets/js/components/screens/AlbumListScreen.vue
index c6d42adf..fae425f6 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.vue
+++ b/resources/assets/js/components/screens/AlbumListScreen.vue
@@ -22,7 +22,7 @@
       ref="listEl"
       v-koel-overflow-fade
       :class="`as-${viewMode}`"
-      class="albums main-scroll-wrap"
+      class="albums main-scroll-wrap artist-album-wrapper"
       data-testid="album-list"
     >
       <template v-if="showSkeletons">
@@ -96,12 +96,3 @@ useRouter().onScreenActivated('Albums', async () => {
   }
 })
 </script>
-
-<style lang="scss">
-#albumsWrapper {
-  .albums {
-    @include artist-album-wrapper();
-  }
-}
-</style>
-`
diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index 841c384e..b299b4b2 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="album" id="albumWrapper">
+  <section v-if="album" id="albumWrapper" class="artist-album-info-wrapper">
     <ScreenHeaderSkeleton v-if="loading" />
 
     <ScreenHeader v-if="!loading && album" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
@@ -67,14 +67,14 @@
 
       <div v-show="activeTab === 'OtherAlbums'" class="albums-pane" data-testid="albums-pane">
         <template v-if="otherAlbums">
-          <ul v-if="otherAlbums.length" v-koel-overflow-fade class="as-list">
+          <ul v-if="otherAlbums.length" v-koel-overflow-fade class="as-list artist-album-wrapper">
             <li v-for="a in otherAlbums" :key="a.id">
               <AlbumCard :album="a" layout="compact" />
             </li>
           </ul>
           <p v-else class="none text-secondary">No other albums by {{ album.artist_name }} found in the library.</p>
         </template>
-        <ul v-else class="as-list">
+        <ul v-else class="as-list artist-album-wrapper">
           <li v-for="i in 12" :key="i">
             <AlbumCardSkeleton layout="compact" />
           </li>
@@ -186,9 +186,3 @@ onScreenActivated('Album', () => (albumId.value = parseInt(getRouteParam('id')!)
 // if the current album has been deleted, go back to the list
 eventBus.on('SONGS_UPDATED', () => albumStore.byId(albumId.value!) || go('albums'))
 </script>
-
-<style lang="scss" scoped>
-#albumWrapper {
-  @include artist-album-info-wrapper();
-}
-</style>
diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index 20a7e1ad..8357bbdc 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/resources/assets/js/components/screens/AllSongsScreen.vue
@@ -168,10 +168,10 @@ onScreenActivated('Songs', async () => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .controls {
   width: 100%;
-  min-height: 32px; // prevent shrinking causing the jumping effect
+  min-height: 32px; /* prevent shrinking causing the jumping effect */
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/resources/assets/js/components/screens/ArtistListScreen.vue b/resources/assets/js/components/screens/ArtistListScreen.vue
index d9eee4f1..214e8105 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.vue
+++ b/resources/assets/js/components/screens/ArtistListScreen.vue
@@ -22,7 +22,7 @@
       ref="listEl"
       v-koel-overflow-fade
       :class="`as-${viewMode}`"
-      class="artists main-scroll-wrap"
+      class="artists main-scroll-wrap artist-album-wrapper"
       data-testid="artist-list"
     >
       <template v-if="showSkeletons">
@@ -95,11 +95,3 @@ useRouter().onScreenActivated('Artists', async () => {
   }
 })
 </script>
-
-<style lang="scss">
-#artistsWrapper {
-  .artists {
-    @include artist-album-wrapper();
-  }
-}
-</style>
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index 233db53b..76ce281a 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="artist" id="artistWrapper">
+  <section v-if="artist" id="artistWrapper" class="artist-album-info-wrapper">
     <ScreenHeaderSkeleton v-if="loading" />
 
     <ScreenHeader v-if="!loading && artist" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
@@ -65,12 +65,12 @@
       </div>
 
       <div v-show="activeTab === 'Albums'" class="albums-pane">
-        <ul v-if="albums" v-koel-overflow-fade class="as-list">
+        <ul v-if="albums" v-koel-overflow-fade class="as-list artist-album-wrapper">
           <li v-for="album in albums" :key="album.id">
             <AlbumCard :album="album" layout="compact" />
           </li>
         </ul>
-        <ul v-else class="as-list">
+        <ul v-else class="as-list artist-album-wrapper">
           <li v-for="i in 12" :key="i">
             <AlbumCardSkeleton layout="compact" />
           </li>
@@ -175,11 +175,3 @@ onScreenActivated('Artist', () => (artistId.value = parseInt(getRouteParam('id')
 // if the current artist has been deleted, go back to the list
 eventBus.on('SONGS_UPDATED', () => artistStore.byId(artist.value!.id) || go('artists'))
 </script>
-
-<style lang="scss" scoped>
-@import "#/partials/_mixins.scss";
-
-#artistWrapper {
-  @include artist-album-info-wrapper();
-}
-</style>
diff --git a/resources/assets/js/components/screens/GenreListScreen.vue b/resources/assets/js/components/screens/GenreListScreen.vue
index ec646f94..4e51bd76 100644
--- a/resources/assets/js/components/screens/GenreListScreen.vue
+++ b/resources/assets/js/components/screens/GenreListScreen.vue
@@ -73,7 +73,7 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .genres {
   text-align: center;
 
@@ -120,12 +120,34 @@ onMounted(async () => {
     }
   }
 
-  @for $i from 0 through 5 {
-    .level-#{$i} {
-      $zoom: 1 + $i * .4;
-      --unit: #{$zoom}rem;
-      opacity: .8 + $i * .04;
-    }
+  .level-0 {
+    --unit: 1rem;
+    opacity: .8;
+  }
+
+  .level-1 {
+    --unit: 1.4rem;
+    opacity: .84;
+  }
+
+  .level-2 {
+    --unit: 1.8rem;
+    opacity: .88;
+  }
+
+  .level-3 {
+    --unit: 2.2rem;
+    opacity: .92;
+  }
+
+  .level-4 {
+    --unit: 2.6rem;
+    opacity: .96;
+  }
+
+  .level-5 {
+    --unit: 3rem;
+    opacity: 1;
   }
 }
 </style>
diff --git a/resources/assets/js/components/screens/HomeScreen.vue b/resources/assets/js/components/screens/HomeScreen.vue
index 65ffe204..51f783d6 100644
--- a/resources/assets/js/components/screens/HomeScreen.vue
+++ b/resources/assets/js/components/screens/HomeScreen.vue
@@ -91,7 +91,7 @@ useRouter().onScreenActivated('Home', async () => {
 })
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #homeWrapper {
   .two-cols {
     display: grid;
@@ -127,7 +127,7 @@ useRouter().onScreenActivated('Home', async () => {
 
   li {
     overflow: hidden;
-    padding: 1px; // make space for focus outline
+    padding: 1px; /* make space for focus outline */
   }
 
   @media only screen and (max-width: 768px) {
diff --git a/resources/assets/js/components/screens/SettingsScreen.vue b/resources/assets/js/components/screens/SettingsScreen.vue
index 3096d334..e55b4fdb 100644
--- a/resources/assets/js/components/screens/SettingsScreen.vue
+++ b/resources/assets/js/components/screens/SettingsScreen.vue
@@ -91,7 +91,7 @@ const confirmThenSave = async () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #settingsWrapper {
   input[type="text"] {
     width: 50%;
diff --git a/resources/assets/js/components/screens/UploadScreen.vue b/resources/assets/js/components/screens/UploadScreen.vue
index 378480b4..f274481a 100644
--- a/resources/assets/js/components/screens/UploadScreen.vue
+++ b/resources/assets/js/components/screens/UploadScreen.vue
@@ -102,7 +102,7 @@ const retryAll = () => uploadService.retryAll()
 const removeFailedEntries = () => uploadService.removeFailed()
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #uploadWrapper {
   .upload-panel {
     position: relative;
diff --git a/resources/assets/js/components/screens/UserListScreen.vue b/resources/assets/js/components/screens/UserListScreen.vue
index 8eac2336..5b21bdef 100644
--- a/resources/assets/js/components/screens/UserListScreen.vue
+++ b/resources/assets/js/components/screens/UserListScreen.vue
@@ -76,7 +76,7 @@ const showInviteUserForm = () => eventBus.emit('MODAL_SHOW_INVITE_USER_FORM')
 onMounted(async () => await userStore.fetch())
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .users {
   display: flex;
   flex-direction: column;
diff --git a/resources/assets/js/components/screens/VisualizerScreen.vue b/resources/assets/js/components/screens/VisualizerScreen.vue
index ca166278..00982ff2 100644
--- a/resources/assets/js/components/screens/VisualizerScreen.vue
+++ b/resources/assets/js/components/screens/VisualizerScreen.vue
@@ -76,7 +76,7 @@ const freeUp = () => {
 onBeforeUnmount(() => freeUp())
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #vizContainer {
   .viz {
     height: 100%;
diff --git a/resources/assets/js/components/screens/YouTubeScreen.vue b/resources/assets/js/components/screens/YouTubeScreen.vue
index 8fdf3391..7f300bf8 100644
--- a/resources/assets/js/components/screens/YouTubeScreen.vue
+++ b/resources/assets/js/components/screens/YouTubeScreen.vue
@@ -60,7 +60,7 @@ eventBus.on('PLAY_YOUTUBE_VIDEO', payload => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 :deep(#player) {
   height: 100%;
   flex: 1;
diff --git a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
index a0479b69..c8d24234 100644
--- a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
@@ -14,11 +14,11 @@ exports[`renders 1`] = `
       </div>
       <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="controls">
         <div data-v-d396e0d2="" data-v-8ea4eaa5="" data-v-5691beb5-s="" class="song-list-controls" data-testid="song-list-controls">
-          <div data-v-d396e0d2="" class="wrapper"><span data-v-e884c19a="" data-v-d396e0d2="" class="btn-group" uppercased=""><button data-v-e368fe26="" data-v-d396e0d2="" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-v-d396e0d2="" data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
+          <div data-v-d396e0d2="" class="wrapper"><span data-v-e884c19a="" data-v-d396e0d2="" class="btn-group" uppercased=""><button data-v-e368fe26="" data-v-d396e0d2="" class="inset-when-pressed btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-v-d396e0d2="" data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div data-v-d396e0d2="" class="menu-wrapper">
+          <div data-v-d396e0d2="" class="menu-wrapper context-menu">
             <div data-v-42061e3e="" data-v-d396e0d2="" class="add-to" data-testid="add-to-menu" tabindex="0">
               <section data-v-42061e3e="" class="existing-playlists">
                 <p data-v-42061e3e="">Add 0 songs to</p>
@@ -26,7 +26,7 @@ exports[`renders 1`] = `
                   <li data-v-42061e3e="" data-testid="queue" tabindex="0">Queue</li>
                   <li data-v-42061e3e="" class="favorites" data-testid="add-to-favorites" tabindex="0"> Favorites </li>
                 </ul>
-              </section><button data-v-e368fe26="" data-v-42061e3e="" transparent="">New Playlist…</button>
+              </section><button data-v-e368fe26="" data-v-42061e3e="" class="inset-when-pressed" transparent="">New Playlist…</button>
             </div>
           </div>
         </div>
@@ -51,11 +51,11 @@ exports[`renders in Plus edition 1`] = `
       </div>
       <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="controls">
         <div data-v-d396e0d2="" data-v-8ea4eaa5="" data-v-5691beb5-s="" class="song-list-controls" data-testid="song-list-controls">
-          <div data-v-d396e0d2="" class="wrapper"><span data-v-e884c19a="" data-v-d396e0d2="" class="btn-group" uppercased=""><button data-v-e368fe26="" data-v-d396e0d2="" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-v-d396e0d2="" data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
+          <div data-v-d396e0d2="" class="wrapper"><span data-v-e884c19a="" data-v-d396e0d2="" class="btn-group" uppercased=""><button data-v-e368fe26="" data-v-d396e0d2="" class="inset-when-pressed btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-v-d396e0d2="" data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div data-v-d396e0d2="" class="menu-wrapper">
+          <div data-v-d396e0d2="" class="menu-wrapper context-menu">
             <div data-v-42061e3e="" data-v-d396e0d2="" class="add-to" data-testid="add-to-menu" tabindex="0">
               <section data-v-42061e3e="" class="existing-playlists">
                 <p data-v-42061e3e="">Add 0 songs to</p>
@@ -63,7 +63,7 @@ exports[`renders in Plus edition 1`] = `
                   <li data-v-42061e3e="" data-testid="queue" tabindex="0">Queue</li>
                   <li data-v-42061e3e="" class="favorites" data-testid="add-to-favorites" tabindex="0"> Favorites </li>
                 </ul>
-              </section><button data-v-e368fe26="" data-v-42061e3e="" transparent="">New Playlist…</button>
+              </section><button data-v-e368fe26="" data-v-42061e3e="" class="inset-when-pressed" transparent="">New Playlist…</button>
             </div>
           </div>
         </div><label data-v-8ea4eaa5="" data-v-5691beb5-s="" class="own-songs-toggle text-secondary"><span data-v-b5259680="" data-v-8ea4eaa5="" data-v-5691beb5-s="" class=""><input data-v-b5259680="" type="checkbox"></span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">Own songs only</span></label>
diff --git a/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
index 1884849a..747ca7a5 100644
--- a/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
@@ -14,7 +14,7 @@ exports[`renders 1`] = `
     <div class="form-row"><label for="inputSettingsPath">Media Path</label>
       <p id="mediaPathHelp" class="help"> The <em>absolute</em> path to the server directory containing your media. Koel will scan this directory for songs and extract any available information.<br> Scanning may take a while, especially if you have a lot of songs, so be patient. </p><input id="inputSettingsPath" aria-describedby="mediaPathHelp" name="media_path" type="text">
     </div>
-    <div class="form-row"><button data-v-e368fe26="" type="submit">Scan</button></div>
+    <div class="form-row"><button data-v-e368fe26="" class="inset-when-pressed" type="submit">Scan</button></div>
   </form>
 </section>
 `;
diff --git a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
index dfa90d45..46b125c4 100644
--- a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
@@ -123,7 +123,7 @@ eventBus.on('SEARCH_KEYWORDS_CHANGED', async _q => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .results > section {
   margin-bottom: 3em;
 }
diff --git a/resources/assets/js/components/song/AddToMenu.vue b/resources/assets/js/components/song/AddToMenu.vue
index 382ff017..1ae2f165 100644
--- a/resources/assets/js/components/song/AddToMenu.vue
+++ b/resources/assets/js/components/song/AddToMenu.vue
@@ -82,7 +82,7 @@ const {
 watch(songs, () => songs.value.length || close())
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .add-to {
   width: 100%;
   max-width: 256px;
diff --git a/resources/assets/js/components/song/EditSongForm.vue b/resources/assets/js/components/song/EditSongForm.vue
index 243ff1d9..ad415177 100644
--- a/resources/assets/js/components/song/EditSongForm.vue
+++ b/resources/assets/js/components/song/EditSongForm.vue
@@ -282,7 +282,7 @@ const submit = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 form {
   max-width: 540px;
 
diff --git a/resources/assets/js/components/song/SongCard.vue b/resources/assets/js/components/song/SongCard.vue
index b1c9ec5f..93f2e702 100644
--- a/resources/assets/js/components/song/SongCard.vue
+++ b/resources/assets/js/components/song/SongCard.vue
@@ -55,7 +55,7 @@ const play = () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 article {
   display: flex;
   gap: 12px;
@@ -103,7 +103,7 @@ article {
     }
   }
 
-  // show the thumbnail's playback control on the whole card focus and hover
+  /* show the thumbnail's playback control on the whole card focus and hover */
   &:hover :deep(.cover), &:focus :deep(.cover) {
     .control {
       display: flex;
diff --git a/resources/assets/js/components/song/SongContextMenu.vue b/resources/assets/js/components/song/SongContextMenu.vue
index 3ed1436c..706249b4 100644
--- a/resources/assets/js/components/song/SongContextMenu.vue
+++ b/resources/assets/js/components/song/SongContextMenu.vue
@@ -10,7 +10,7 @@
     </template>
     <li class="has-sub">
       Add To
-      <ul class="menu submenu menu-add-to">
+      <ul class="menu submenu menu-add-to context-menu">
         <template v-if="queue.length">
           <li v-if="currentSong" @click="queueSongsAfterCurrent">After Current Song</li>
           <li @click="queueSongsToBottom">Bottom of Queue</li>
@@ -224,7 +224,7 @@ eventBus.on('SONG_CONTEXT_MENU_REQUESTED', async ({ pageX, pageY }, _songs) => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 ul.playlists {
   position: relative;
   max-height: 192px;
diff --git a/resources/assets/js/components/song/SongList.vue b/resources/assets/js/components/song/SongList.vue
index 8834a8a5..9509f051 100644
--- a/resources/assets/js/components/song/SongList.vue
+++ b/resources/assets/js/components/song/SongList.vue
@@ -380,7 +380,7 @@ defineExpose({
 onMounted(() => render())
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 .song-list-wrap {
   position: relative;
   display: flex;
@@ -395,7 +395,7 @@ onMounted(() => render())
   .song-list-header {
     background: var(--color-bg-secondary);
     display: flex;
-    z-index: 2; // fix stack-context related issue when e.g., footer would cover the sort context menu
+    z-index: 2; /* fix stack-context related issue when e.g., footer would cover the sort context menu */
   }
 
   &.dragging .song-item * {
diff --git a/resources/assets/js/components/song/SongListControls.vue b/resources/assets/js/components/song/SongListControls.vue
index a68acd04..ad6ea5f6 100644
--- a/resources/assets/js/components/song/SongListControls.vue
+++ b/resources/assets/js/components/song/SongListControls.vue
@@ -89,7 +89,7 @@
       </BtnGroup>
     </div>
 
-    <div ref="addToMenu" v-koel-clickaway="closeAddToMenu" class="menu-wrapper">
+    <div ref="addToMenu" v-koel-clickaway="closeAddToMenu" class="menu-wrapper context-menu">
       <AddToMenu :config="config.addTo" :songs="selectedSongs" @closing="closeAddToMenu" />
     </div>
   </div>
@@ -175,7 +175,7 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .song-list-controls {
   position: relative;
 
@@ -186,8 +186,6 @@ onBeforeUnmount(() => {
   }
 
   .menu-wrapper {
-    @include context-menu();
-
     padding: 0;
     display: none;
   }
diff --git a/resources/assets/js/components/song/SongListFilter.vue b/resources/assets/js/components/song/SongListFilter.vue
index d7c8eb00..621553d3 100644
--- a/resources/assets/js/components/song/SongListFilter.vue
+++ b/resources/assets/js/components/song/SongListFilter.vue
@@ -51,7 +51,7 @@ const maybeClose = () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 form {
   display: flex;
   border: 1px solid rgba(255, 255, 255, .1);
diff --git a/resources/assets/js/components/song/SongListItem.vue b/resources/assets/js/components/song/SongListItem.vue
index 3fd16a8e..8aeaed28 100644
--- a/resources/assets/js/components/song/SongListItem.vue
+++ b/resources/assets/js/components/song/SongListItem.vue
@@ -70,11 +70,11 @@ const collaborator = computed<Pick<User, 'name' | 'avatar'>>(() => (song.value a
 const play = () => emit('play', song.value)
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 .song-item {
   color: var(--color-text-secondary);
   border-bottom: 1px solid var(--color-bg-secondary);
-  max-width: 100% !important; // overriding .item
+  max-width: 100% !important; /* overriding .item */
   height: 64px;
   display: flex;
   align-items: center;
diff --git a/resources/assets/js/components/song/SongListSorter.vue b/resources/assets/js/components/song/SongListSorter.vue
index 2c973ddb..6c20071c 100644
--- a/resources/assets/js/components/song/SongListSorter.vue
+++ b/resources/assets/js/components/song/SongListSorter.vue
@@ -3,7 +3,7 @@
     <button ref="button" title="Sort" @click.stop="trigger">
       <Icon :icon="faSort" />
     </button>
-    <menu ref="menu" v-koel-clickaway="hide">
+    <menu ref="menu" v-koel-clickaway="hide" class="context-menu">
       <li
         v-for="item in menuItems"
         :key="item.label"
@@ -91,7 +91,7 @@ onMounted(() => menu.value && setup())
 onBeforeUnmount(() => teardown())
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 button {
   width: 100%;
 
diff --git a/resources/assets/js/components/song/SongThumbnail.vue b/resources/assets/js/components/song/SongThumbnail.vue
index 3b57810a..cf032836 100644
--- a/resources/assets/js/components/song/SongThumbnail.vue
+++ b/resources/assets/js/components/song/SongThumbnail.vue
@@ -51,7 +51,7 @@ const changeSongState = () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .cover {
   width: 48px;
   min-width: 48px;
diff --git a/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap b/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap
index def8ca5c..10a35f3e 100644
--- a/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap
+++ b/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap
@@ -11,6 +11,6 @@ exports[`renders 1`] = `
       <li data-v-42061e3e="" class="playlist" data-testid="add-to-playlist" tabindex="0">Bar</li>
       <li data-v-42061e3e="" class="playlist" data-testid="add-to-playlist" tabindex="0">Baz</li>
     </ul>
-  </section><button data-v-e368fe26="" data-v-42061e3e="" transparent="">New Playlist…</button>
+  </section><button data-v-e368fe26="" data-v-42061e3e="" class="inset-when-pressed" transparent="">New Playlist…</button>
 </div>
 `;
diff --git a/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap b/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap
index 55959333..a7bc47a8 100644
--- a/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap
+++ b/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap
@@ -216,7 +216,7 @@ exports[`edits a single song 1`] = `
       </div>
     </div>
   </main>
-  <footer data-v-d70eb300=""><button data-v-e368fe26="" data-v-d70eb300="" type="submit">Update</button><button data-v-e368fe26="" data-v-d70eb300="" class="btn-cancel" white="">Cancel</button></footer>
+  <footer data-v-d70eb300=""><button data-v-e368fe26="" data-v-d70eb300="" class="inset-when-pressed" type="submit">Update</button><button data-v-e368fe26="" data-v-d70eb300="" class="inset-when-pressed btn-cancel" white="">Cancel</button></footer>
 </form>
 `;
 
@@ -436,6 +436,6 @@ exports[`edits multiple songs 1`] = `
       <!--v-if-->
     </div>
   </main>
-  <footer data-v-d70eb300=""><button data-v-e368fe26="" data-v-d70eb300="" type="submit">Update</button><button data-v-e368fe26="" data-v-d70eb300="" class="btn-cancel" white="">Cancel</button></footer>
+  <footer data-v-d70eb300=""><button data-v-e368fe26="" data-v-d70eb300="" class="inset-when-pressed" type="submit">Update</button><button data-v-e368fe26="" data-v-d70eb300="" class="inset-when-pressed btn-cancel" white="">Cancel</button></footer>
 </form>
 `;
diff --git a/resources/assets/js/components/ui/AlertBox.vue b/resources/assets/js/components/ui/AlertBox.vue
index 987291f0..8e732ccf 100644
--- a/resources/assets/js/components/ui/AlertBox.vue
+++ b/resources/assets/js/components/ui/AlertBox.vue
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{ type?: 'default' | 'info' | 'danger' |
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .alert-box {
   padding: 1rem;
   border-radius: 5px;
@@ -34,8 +34,10 @@ const props = withDefaults(defineProps<{ type?: 'default' | 'info' | 'danger' |
   gap: 1rem;
   background-color: rgba(255, 255, 255, .1);
 
-  // though setting margins in components is not recommended, it's safe to assume that an alert box will be used
-  // in a context where this margin is desired
+  /*
+    though setting margins in components is not recommended, it's safe to assume that an alert box will be used
+    in a context where this margin is desired
+   */
   margin-bottom: 1.5rem;
 
   .text {
diff --git a/resources/assets/js/components/ui/AppleMusicButton.vue b/resources/assets/js/components/ui/AppleMusicButton.vue
index 1c6fe96c..9b025f87 100644
--- a/resources/assets/js/components/ui/AppleMusicButton.vue
+++ b/resources/assets/js/components/ui/AppleMusicButton.vue
@@ -24,7 +24,7 @@ const props = defineProps<{ url: string }>()
 const { url } = toRefs(props)
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 a {
   display: inline-block;
   border-radius: 3px;
diff --git a/resources/assets/js/components/ui/ArtistAlbumCard.vue b/resources/assets/js/components/ui/ArtistAlbumCard.vue
index 89b75711..f303e5ac 100644
--- a/resources/assets/js/components/ui/ArtistAlbumCard.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumCard.vue
@@ -39,7 +39,7 @@ const onDragStart = (e: DragEvent) => emit('dragstart', e)
 const onContextMenu = (e: MouseEvent) => emit('contextmenu', e)
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .item {
   position: relative;
   max-width: 256px;
diff --git a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
index 7035016e..1c8f622f 100644
--- a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 :deep(.tabs) {
   display: flex;
   flex-direction: column;
@@ -69,8 +69,6 @@
 
 :deep(.albums-pane) {
   > ul {
-    @include artist-album-wrapper();
-
     padding: 1.8rem;
     overflow: auto;
   }
diff --git a/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue b/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue
index 549458c1..08aacf39 100644
--- a/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue
@@ -133,7 +133,7 @@ const onDrop = async (event: DragEvent) => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .cover {
   position: relative;
   width: 100%;
@@ -189,7 +189,7 @@ const onDrop = async (event: DragEvent) => {
       display: flex;
       justify-content: center;
       align-items: center;
-      padding-left: 4%; // to balance the play icon
+      padding-left: 4%; /* to balance the play icon */
       pointer-events: none;
 
       @media (hover: none) {
@@ -242,6 +242,6 @@ const onDrop = async (event: DragEvent) => {
 }
 
 .compact .icon {
-  font-size: .3rem; // to control the size of the icon
+  font-size: .3rem; /* to control the size of the icon */
 }
 </style>
diff --git a/resources/assets/js/components/ui/Btn.vue b/resources/assets/js/components/ui/Btn.vue
index 2fc8d187..24f7aa8d 100644
--- a/resources/assets/js/components/ui/Btn.vue
+++ b/resources/assets/js/components/ui/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-  <button ref="button">
+  <button ref="button" class="inset-when-pressed">
     <slot>Click me</slot>
   </button>
 </template>
@@ -14,7 +14,7 @@ defineExpose({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 button {
   background: var(--color-blue);
   color: var(--color-text-primary);
@@ -39,8 +39,6 @@ button {
     padding: .4rem .7rem;
   }
 
-  @include inset-when-pressed();
-
   &[green] {
     background-color: var(--color-green);
   }
diff --git a/resources/assets/js/components/ui/BtnCloseModal.vue b/resources/assets/js/components/ui/BtnCloseModal.vue
index 09347486..5a404ce0 100644
--- a/resources/assets/js/components/ui/BtnCloseModal.vue
+++ b/resources/assets/js/components/ui/BtnCloseModal.vue
@@ -10,7 +10,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons'
 defineEmits<{ (e: 'click'): void }>()
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 button {
   display: flex;
   place-content: center;
diff --git a/resources/assets/js/components/ui/BtnGroup.vue b/resources/assets/js/components/ui/BtnGroup.vue
index 000d5db8..c259ff25 100644
--- a/resources/assets/js/components/ui/BtnGroup.vue
+++ b/resources/assets/js/components/ui/BtnGroup.vue
@@ -4,7 +4,7 @@
   </span>
 </template>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .btn-group {
   --radius: 5px;
 
diff --git a/resources/assets/js/components/ui/BtnScrollToTop.vue b/resources/assets/js/components/ui/BtnScrollToTop.vue
index 808d196c..54225309 100644
--- a/resources/assets/js/components/ui/BtnScrollToTop.vue
+++ b/resources/assets/js/components/ui/BtnScrollToTop.vue
@@ -24,7 +24,7 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 button {
   &.fade-enter, &.fade-leave-to {
     opacity: 0;
diff --git a/resources/assets/js/components/ui/CheckBox.vue b/resources/assets/js/components/ui/CheckBox.vue
index 189349a4..7b97aaa2 100644
--- a/resources/assets/js/components/ui/CheckBox.vue
+++ b/resources/assets/js/components/ui/CheckBox.vue
@@ -17,7 +17,7 @@ const value = computed({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 span {
   position: relative;
   vertical-align: bottom;
diff --git a/resources/assets/js/components/ui/ContextMenuBase.vue b/resources/assets/js/components/ui/ContextMenuBase.vue
index e7af3d22..85761d34 100644
--- a/resources/assets/js/components/ui/ContextMenuBase.vue
+++ b/resources/assets/js/components/ui/ContextMenuBase.vue
@@ -114,7 +114,7 @@ eventBus.on('CONTEXT_MENU_OPENED', target => target === el.value || close())
 defineExpose({ open, close, shown })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 nav {
   user-select: none;
 
diff --git a/resources/assets/js/components/ui/DialogBox.vue b/resources/assets/js/components/ui/DialogBox.vue
index d398cef6..21a8ef58 100644
--- a/resources/assets/js/components/ui/DialogBox.vue
+++ b/resources/assets/js/components/ui/DialogBox.vue
@@ -72,7 +72,7 @@ const confirm = async (message: string, title: string = '') => show('confirm', m
 defineExpose({ success, info, warning, error, confirm })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .dialog {
   --dialog-bg-color: #fff;
   --dialog-fg-color: #333;
diff --git a/resources/assets/js/components/ui/Equalizer.vue b/resources/assets/js/components/ui/Equalizer.vue
index 4c2ec57f..06638429 100644
--- a/resources/assets/js/components/ui/Equalizer.vue
+++ b/resources/assets/js/components/ui/Equalizer.vue
@@ -125,7 +125,7 @@ const close = () => emit('close')
 onMounted(() => createSliders())
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #equalizer {
   user-select: none;
   width: 100%;
diff --git a/resources/assets/js/components/ui/FooterPlayButton.vue b/resources/assets/js/components/ui/FooterPlayButton.vue
index 70736da3..dfa00e91 100644
--- a/resources/assets/js/components/ui/FooterPlayButton.vue
+++ b/resources/assets/js/components/ui/FooterPlayButton.vue
@@ -53,7 +53,7 @@ const initiatePlayback = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 button {
   width: 3rem !important;
   border-radius: 50%;
diff --git a/resources/assets/js/components/ui/LyricsPane.vue b/resources/assets/js/components/ui/LyricsPane.vue
index 343cc17e..a84b6c94 100644
--- a/resources/assets/js/components/ui/LyricsPane.vue
+++ b/resources/assets/js/components/ui/LyricsPane.vue
@@ -60,7 +60,7 @@ watch(zoomLevel, level => {
 onMounted(() => setFontSize())
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .content {
   position: relative;
 
diff --git a/resources/assets/js/components/ui/Magnifier.vue b/resources/assets/js/components/ui/Magnifier.vue
index 6df7d22f..20041da2 100644
--- a/resources/assets/js/components/ui/Magnifier.vue
+++ b/resources/assets/js/components/ui/Magnifier.vue
@@ -1,9 +1,9 @@
 <template>
   <span>
-    <button title="Zoom out" type="button" @click.prevent="$emit('out')">
+    <button class="inset-when-pressed" title="Zoom out" type="button" @click.prevent="$emit('out')">
       <Icon :icon="faSearchMinus" />
     </button>
-    <button title="Zoom in" type="button" @click.prevent="$emit('in')">
+    <button class="inset-when-pressed" title="Zoom in" type="button" @click.prevent="$emit('in')">
       <Icon :icon="faSearchPlus" />
     </button>
   </span>
@@ -15,14 +15,12 @@ import { faSearchMinus, faSearchPlus } from '@fortawesome/free-solid-svg-icons'
 const emit = defineEmits<{ (e: 'in' | 'out'): void }>()
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 span {
   display: flex;
   transition: .2s;
 
   button {
-    @include inset-when-pressed();
-
     background: var(--color-bg-primary);
     border: 1px solid rgba(255, 255, 255, .2);
     opacity: .8;
diff --git a/resources/assets/js/components/ui/MessageToast.vue b/resources/assets/js/components/ui/MessageToast.vue
index c7359684..e7230326 100644
--- a/resources/assets/js/components/ui/MessageToast.vue
+++ b/resources/assets/js/components/ui/MessageToast.vue
@@ -48,7 +48,7 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .message {
   border-radius: 4px 0 0 4px;
   cursor: pointer;
diff --git a/resources/assets/js/components/ui/MessageToaster.vue b/resources/assets/js/components/ui/MessageToaster.vue
index 6765e61d..22c5effd 100644
--- a/resources/assets/js/components/ui/MessageToaster.vue
+++ b/resources/assets/js/components/ui/MessageToaster.vue
@@ -32,7 +32,7 @@ const error = (content: string, timeout?: number) => addMessage('danger', conten
 defineExpose({ info, success, warning, error })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 ul {
   position: fixed;
   z-index: 9999;
diff --git a/resources/assets/js/components/ui/OfflineNotification.vue b/resources/assets/js/components/ui/OfflineNotification.vue
index 0cac999c..154b965a 100644
--- a/resources/assets/js/components/ui/OfflineNotification.vue
+++ b/resources/assets/js/components/ui/OfflineNotification.vue
@@ -12,7 +12,7 @@
 import { faSlash, faWifi } from '@fortawesome/free-solid-svg-icons'
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .offline {
   color: #ed5135;
   width: 144px;
diff --git a/resources/assets/js/components/ui/Overlay.vue b/resources/assets/js/components/ui/Overlay.vue
index a4b84200..859ac534 100644
--- a/resources/assets/js/components/ui/Overlay.vue
+++ b/resources/assets/js/components/ui/Overlay.vue
@@ -37,7 +37,7 @@ const onCancel = () => state.dismissible && hide()
 defineExpose({ show, hide })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 dialog {
   border: 0;
   padding: 0;
diff --git a/resources/assets/js/components/ui/PasswordField.vue b/resources/assets/js/components/ui/PasswordField.vue
index fa5dc54e..2c1150ab 100644
--- a/resources/assets/js/components/ui/PasswordField.vue
+++ b/resources/assets/js/components/ui/PasswordField.vue
@@ -28,7 +28,7 @@ const value = computed({
 const toggleReveal = () => (type.value = type.value === 'password' ? 'text' : 'password')
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 div {
   position: relative;
 }
diff --git a/resources/assets/js/components/ui/PlaylistThumbnail.vue b/resources/assets/js/components/ui/PlaylistThumbnail.vue
index b8767a78..6a3ee2f7 100644
--- a/resources/assets/js/components/ui/PlaylistThumbnail.vue
+++ b/resources/assets/js/components/ui/PlaylistThumbnail.vue
@@ -83,7 +83,7 @@ const onDrop = async (event: DragEvent) => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .cover {
   position: relative;
   width: 100%;
diff --git a/resources/assets/js/components/ui/ProfileAvatar.vue b/resources/assets/js/components/ui/ProfileAvatar.vue
index 44abb59a..1004d20f 100644
--- a/resources/assets/js/components/ui/ProfileAvatar.vue
+++ b/resources/assets/js/components/ui/ProfileAvatar.vue
@@ -18,7 +18,7 @@ import UserAvatar from '@/components/user/UserAvatar.vue'
 const { currentUser } = useAuthorization()
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 img {
   padding: 2px;
   border: 1px solid rgba(255, 255, 255, .1);
diff --git a/resources/assets/js/components/ui/RepeatModeSwitch.vue b/resources/assets/js/components/ui/RepeatModeSwitch.vue
index 4d8c13fc..188aa9a5 100644
--- a/resources/assets/js/components/ui/RepeatModeSwitch.vue
+++ b/resources/assets/js/components/ui/RepeatModeSwitch.vue
@@ -29,7 +29,7 @@ const readableMode = computed(() => mode.value
 const changeMode = () => playbackService.rotateRepeatMode()
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .fa-layers-counter {
   transform: none;
   font-size: .45rem;
diff --git a/resources/assets/js/components/ui/ScreenControlsToggle.vue b/resources/assets/js/components/ui/ScreenControlsToggle.vue
index d75f1d07..31ad1bce 100644
--- a/resources/assets/js/components/ui/ScreenControlsToggle.vue
+++ b/resources/assets/js/components/ui/ScreenControlsToggle.vue
@@ -21,7 +21,7 @@ const value = computed({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 label {
   font-size: 1rem;
   display: inline-block;
diff --git a/resources/assets/js/components/ui/ScreenEmptyState.vue b/resources/assets/js/components/ui/ScreenEmptyState.vue
index 0ac6da3a..1b8b5e42 100644
--- a/resources/assets/js/components/ui/ScreenEmptyState.vue
+++ b/resources/assets/js/components/ui/ScreenEmptyState.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<style lang="scss">
+<style lang="postcss">
 .screen-empty-state {
   display: flex;
   place-content: center;
@@ -23,7 +23,7 @@
 
   > div {
     max-width: 75%;
-    padding: 0 2rem var(--header-height); // visually more balanced
+    padding: 0 2rem var(--header-height); /* visually more balanced */
     margin: auto 0;
 
     @media only screen and (max-width: 768px) {
diff --git a/resources/assets/js/components/ui/ScreenHeader.vue b/resources/assets/js/components/ui/ScreenHeader.vue
index cc0a046e..87652915 100644
--- a/resources/assets/js/components/ui/ScreenHeader.vue
+++ b/resources/assets/js/components/ui/ScreenHeader.vue
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<{
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 header.screen-header {
   --transition-duration: .3s;
 
diff --git a/resources/assets/js/components/ui/SearchForm.vue b/resources/assets/js/components/ui/SearchForm.vue
index ac0661fd..fd8d01a3 100644
--- a/resources/assets/js/components/ui/SearchForm.vue
+++ b/resources/assets/js/components/ui/SearchForm.vue
@@ -61,7 +61,7 @@ eventBus.on('FOCUS_SEARCH_FIELD', () => {
 })
 </script>
 
-<style lang="scss">
+<style lang="postcss">
 #searchForm {
   display: flex;
   align-items: stretch;
diff --git a/resources/assets/js/components/ui/SoundBars.vue b/resources/assets/js/components/ui/SoundBars.vue
index a444fac4..ee56a6e9 100644
--- a/resources/assets/js/components/ui/SoundBars.vue
+++ b/resources/assets/js/components/ui/SoundBars.vue
@@ -6,7 +6,7 @@
   </i>
 </template>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 i {
   position: relative;
   display: flex;
diff --git a/resources/assets/js/components/ui/ThumbnailStack.vue b/resources/assets/js/components/ui/ThumbnailStack.vue
index d11c29c0..2a42e4dc 100644
--- a/resources/assets/js/components/ui/ThumbnailStack.vue
+++ b/resources/assets/js/components/ui/ThumbnailStack.vue
@@ -25,7 +25,7 @@ const displayedThumbnails = computed(() => {
 const layout = computed<'single' | 'tiles'>(() => displayedThumbnails.value.length < 4 ? 'single' : 'tiles')
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .thumbnail-stack {
   aspect-ratio: 1/1;
   display: grid;
@@ -39,7 +39,7 @@ const layout = computed<'single' | 'tiles'>(() => displayedThumbnails.value.leng
 
   span {
     display: block;
-    will-change: transform; // fix anti-aliasing problem with background images
+    will-change: transform; /* fix anti-aliasing problem with background images */
     width: 100%;
     height: 100%;
     background-size: cover;
diff --git a/resources/assets/js/components/ui/ViewModeSwitch.vue b/resources/assets/js/components/ui/ViewModeSwitch.vue
index e735c836..5d17dd93 100644
--- a/resources/assets/js/components/ui/ViewModeSwitch.vue
+++ b/resources/assets/js/components/ui/ViewModeSwitch.vue
@@ -41,7 +41,7 @@ const value = computed({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .view-modes {
   display: flex;
   width: 64px;
diff --git a/resources/assets/js/components/ui/VirtualScroller.vue b/resources/assets/js/components/ui/VirtualScroller.vue
index d090c966..ebb25998 100644
--- a/resources/assets/js/components/ui/VirtualScroller.vue
+++ b/resources/assets/js/components/ui/VirtualScroller.vue
@@ -56,7 +56,7 @@ onMounted(() => {
 onBeforeUnmount(() => observer.unobserve(scroller.value!))
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .virtual-scroller {
   will-change: transform;
   overflow: scroll;
diff --git a/resources/assets/js/components/ui/VolumeSlider.vue b/resources/assets/js/components/ui/VolumeSlider.vue
index 89d48491..1d03584e 100644
--- a/resources/assets/js/components/ui/VolumeSlider.vue
+++ b/resources/assets/js/components/ui/VolumeSlider.vue
@@ -64,7 +64,7 @@ watchThrottled(volumeManager.volume, volume => {
 onMounted(() => volumeManager.init(inputEl.value!, preferenceStore.volume))
 </script>
 
-<style lang="scss">
+<style lang="postcss" scoped>
 #volume {
   position: relative;
   display: flex;
@@ -77,7 +77,7 @@ onMounted(() => volumeManager.init(inputEl.value!, preferenceStore.volume))
     border-radius: 4px;
     position: relative;
 
-    // increase click area
+    /* increase click area */
     &::before {
       position: absolute;
       content: ' ';
diff --git a/resources/assets/js/components/ui/YouTubeVideoItem.vue b/resources/assets/js/components/ui/YouTubeVideoItem.vue
index 7b460b4d..d24b5c24 100644
--- a/resources/assets/js/components/ui/YouTubeVideoItem.vue
+++ b/resources/assets/js/components/ui/YouTubeVideoItem.vue
@@ -26,7 +26,7 @@ const play = () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 a {
   display: flex;
   gap: 10px;
diff --git a/resources/assets/js/components/ui/YouTubeVideoList.vue b/resources/assets/js/components/ui/YouTubeVideoList.vue
index 27050f21..e6e9d740 100644
--- a/resources/assets/js/components/ui/YouTubeVideoList.vue
+++ b/resources/assets/js/components/ui/YouTubeVideoList.vue
@@ -50,7 +50,7 @@ watch(song, () => {
 }, { immediate: true })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .youtube-extra-wrapper {
   overflow-x: hidden;
 
diff --git a/resources/assets/js/components/ui/__snapshots__/AlbumArtOverlay.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/AlbumArtOverlay.spec.ts.snap
index 9c56011b..7a590fc1 100644
--- a/resources/assets/js/components/ui/__snapshots__/AlbumArtOverlay.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/AlbumArtOverlay.spec.ts.snap
@@ -1,13 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`displays nothing if fetching fails 1`] = `<div style="background-image: none;" data-testid="album-art-overlay" data-v-e7775cad=""></div>`;
+exports[`displays nothing if fetching fails 1`] = `<div data-v-e7775cad="" style="background-image: none;" class="pointer-events-none" data-testid="album-art-overlay"></div>`;
 
-exports[`displays nothing if fetching fails 2`] = `<div data-v-e7775cad="" style="background-image: none;" data-testid="album-art-overlay"></div>`;
-
-exports[`displays nothing if fetching fails 3`] = `<div data-v-e7775cad="" style="background-image: none;" class="pointer-events-none" data-testid="album-art-overlay"></div>`;
-
-exports[`fetches and displays the album thumbnail 1`] = `<div style="background-image: url(http://test/thumb.jpg);" data-testid="album-art-overlay" data-v-e7775cad=""></div>`;
-
-exports[`fetches and displays the album thumbnail 2`] = `<div data-v-e7775cad="" style="background-image: url(http://test/thumb.jpg);" data-testid="album-art-overlay"></div>`;
-
-exports[`fetches and displays the album thumbnail 3`] = `<div data-v-e7775cad="" style="background-image: url(http://test/thumb.jpg);" class="pointer-events-none" data-testid="album-art-overlay"></div>`;
+exports[`fetches and displays the album thumbnail 1`] = `<div data-v-e7775cad="" style="background-image: url(http://test/thumb.jpg);" class="pointer-events-none" data-testid="album-art-overlay"></div>`;
diff --git a/resources/assets/js/components/ui/__snapshots__/Btn.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/Btn.spec.ts.snap
index 73564cee..ee823137 100644
--- a/resources/assets/js/components/ui/__snapshots__/Btn.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/Btn.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<button data-v-e368fe26="">Click Me Nao</button>`;
+exports[`renders 1`] = `<button data-v-e368fe26="" class="inset-when-pressed">Click Me Nao</button>`;
diff --git a/resources/assets/js/components/ui/__snapshots__/BtnGroup.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/BtnGroup.spec.ts.snap
index b98e6e63..e57a9ec4 100644
--- a/resources/assets/js/components/ui/__snapshots__/BtnGroup.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/BtnGroup.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<span data-v-e884c19a="" class="btn-group"><button data-v-e368fe26="">Green</button><button data-v-e368fe26="">Orange</button><button data-v-e368fe26="">Blue</button></span>`;
+exports[`renders 1`] = `<span data-v-e884c19a="" class="btn-group"><button data-v-e368fe26="" class="inset-when-pressed">Green</button><button data-v-e368fe26="" class="inset-when-pressed">Orange</button><button data-v-e368fe26="" class="inset-when-pressed">Blue</button></span>`;
diff --git a/resources/assets/js/components/ui/__snapshots__/LyricsPane.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/LyricsPane.spec.ts.snap
index 0fe364d8..80383a6a 100644
--- a/resources/assets/js/components/ui/__snapshots__/LyricsPane.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/LyricsPane.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders 1`] = `
 <article data-v-22adf296="" id="lyrics">
   <div data-v-22adf296="" class="content">
-    <div data-v-22adf296=""><pre data-v-22adf296="" style="font-size: 1rem;">Foo bar baz qux</pre><span data-v-fcc3eddd="" data-v-22adf296="" class="magnifier"><button data-v-fcc3eddd="" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span></div>
+    <div data-v-22adf296=""><pre data-v-22adf296="" style="font-size: 1rem;">Foo bar baz qux</pre><span data-v-fcc3eddd="" data-v-22adf296="" class="magnifier"><button data-v-fcc3eddd="" class="inset-when-pressed" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" class="inset-when-pressed" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span></div>
     <!--v-if-->
   </div>
 </article>
diff --git a/resources/assets/js/components/ui/__snapshots__/Magnifier.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/Magnifier.spec.ts.snap
index bec0bbe9..342a92fd 100644
--- a/resources/assets/js/components/ui/__snapshots__/Magnifier.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/Magnifier.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders and functions 1`] = `<span data-v-fcc3eddd=""><button data-v-fcc3eddd="" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span>`;
+exports[`renders and functions 1`] = `<span data-v-fcc3eddd=""><button data-v-fcc3eddd="" class="inset-when-pressed" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" class="inset-when-pressed" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span>`;
diff --git a/resources/assets/js/components/ui/__snapshots__/VolumeSlider.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/VolumeSlider.spec.ts.snap
index 58fc912f..775ebc83 100644
--- a/resources/assets/js/components/ui/__snapshots__/VolumeSlider.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/VolumeSlider.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
-exports[`mutes and unmutes 1`] = `<span id="volume" class="volume muted"><span role="button" tabindex="0" title="Unmute"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><span role="button" tabindex="0" title="Mute" style="display: none;"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><input class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
+exports[`mutes and unmutes 1`] = `<span data-v-c7afcfc4="" id="volume" class="volume muted"><span data-v-c7afcfc4="" role="button" tabindex="0" title="Unmute"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><span data-v-c7afcfc4="" role="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><input data-v-c7afcfc4="" class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
 
-exports[`mutes and unmutes 2`] = `<span id="volume" class="volume muted"><span role="button" tabindex="0" title="Unmute" style=""><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><span role="button" tabindex="0" title="Mute" style="display: none;"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><input class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
+exports[`mutes and unmutes 2`] = `<span data-v-c7afcfc4="" id="volume" class="volume muted"><span data-v-c7afcfc4="" role="button" tabindex="0" title="Unmute" style=""><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><span data-v-c7afcfc4="" role="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><input data-v-c7afcfc4="" class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
 
-exports[`mutes and unmutes 3`] = `<span id="volume" class="volume loud"><span role="button" tabindex="0" title="Unmute" style="display: none;"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><span role="button" tabindex="0" title="Mute" style=""><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><input class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
+exports[`mutes and unmutes 3`] = `<span data-v-c7afcfc4="" id="volume" class="volume loud"><span data-v-c7afcfc4="" role="button" tabindex="0" title="Unmute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><span data-v-c7afcfc4="" role="button" tabindex="0" title="Mute" style=""><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></span><input data-v-c7afcfc4="" class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
diff --git a/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue b/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
index 29ceeff3..65a85b34 100644
--- a/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
@@ -14,7 +14,7 @@
 const props = withDefaults(defineProps<{ layout?: ArtistAlbumCardLayout }>(), { layout: 'full' })
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .skeleton {
   display: flex;
   flex-direction: column;
diff --git a/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue b/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
index 650d2b94..ba710d7e 100644
--- a/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
@@ -9,7 +9,7 @@
 const width = Math.random() * 100 + 80
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .skeleton {
   display: flex;
   border-radius: 999rem;
diff --git a/resources/assets/js/components/ui/skeletons/PlaylistCollaboratorListSkeleton.vue b/resources/assets/js/components/ui/skeletons/PlaylistCollaboratorListSkeleton.vue
index 3f36641f..62dd717f 100644
--- a/resources/assets/js/components/ui/skeletons/PlaylistCollaboratorListSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/PlaylistCollaboratorListSkeleton.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .wrapper {
   display: flex;
   flex-direction: column;
diff --git a/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue b/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue
index e8fe306f..dfb016e2 100644
--- a/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue
@@ -10,7 +10,7 @@
   </header>
 </template>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .skeleton {
   display: flex;
   align-items: flex-end;
diff --git a/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue b/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue
index 38c6658e..d98b73dc 100644
--- a/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue
@@ -10,7 +10,7 @@
   </article>
 </template>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .skeleton {
   display: flex;
   gap: 12px;
diff --git a/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue b/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
index df48b768..1d9e5dff 100644
--- a/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .skeleton {
   .song-list-header {
     background: var(--color-bg-secondary);
diff --git a/resources/assets/js/components/ui/upload/DropZone.vue b/resources/assets/js/components/ui/upload/DropZone.vue
index 6b349847..d38558cd 100644
--- a/resources/assets/js/components/ui/upload/DropZone.vue
+++ b/resources/assets/js/components/ui/upload/DropZone.vue
@@ -40,7 +40,7 @@ const onDrop = async (event: DragEvent) => {
 const close = () => emit('close')
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .drop-zone {
   height: 256px;
   max-height: 66vh;
diff --git a/resources/assets/js/components/ui/upload/UploadItem.vue b/resources/assets/js/components/ui/upload/UploadItem.vue
index 39b1996c..1dc100dd 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.vue
+++ b/resources/assets/js/components/ui/upload/UploadItem.vue
@@ -37,7 +37,7 @@ const remove = () => uploadService.remove(file.value)
 const retry = () => uploadService.retry(file.value)
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .upload-item {
   position: relative;
   margin-bottom: 5px;
diff --git a/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap b/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap
index a678504f..a2371911 100644
--- a/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap
+++ b/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<div data-v-c7c7e2e2="" class="canceled upload-item" title=""><span data-v-c7c7e2e2="" style="width: 42%;" class="progress"></span><span data-v-c7c7e2e2="" class="details"><span data-v-c7c7e2e2="" class="name">Sample Track</span><span data-v-c7c7e2e2="" class="controls"><!--v-if--><button data-v-e368fe26="" data-v-c7c7e2e2="" icon-only="" title="Retry" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button><button data-v-e368fe26="" data-v-c7c7e2e2="" icon-only="" title="Remove" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button></span></span></div>`;
+exports[`renders 1`] = `<div data-v-c7c7e2e2="" class="canceled upload-item" title=""><span data-v-c7c7e2e2="" style="width: 42%;" class="progress"></span><span data-v-c7c7e2e2="" class="details"><span data-v-c7c7e2e2="" class="name">Sample Track</span><span data-v-c7c7e2e2="" class="controls"><!--v-if--><button data-v-e368fe26="" data-v-c7c7e2e2="" class="inset-when-pressed" icon-only="" title="Retry" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button><button data-v-e368fe26="" data-v-c7c7e2e2="" class="inset-when-pressed" icon-only="" title="Remove" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button></span></span></div>`;
diff --git a/resources/assets/js/components/user/AddUserForm.vue b/resources/assets/js/components/user/AddUserForm.vue
index 2e0a4660..c9310be7 100644
--- a/resources/assets/js/components/user/AddUserForm.vue
+++ b/resources/assets/js/components/user/AddUserForm.vue
@@ -99,7 +99,7 @@ const maybeClose = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .help {
   margin-top: .75rem;
 }
diff --git a/resources/assets/js/components/user/EditUserForm.vue b/resources/assets/js/components/user/EditUserForm.vue
index 74411d5d..1e85834e 100644
--- a/resources/assets/js/components/user/EditUserForm.vue
+++ b/resources/assets/js/components/user/EditUserForm.vue
@@ -116,7 +116,7 @@ const maybeClose = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .help {
   margin-top: .75rem;
 }
diff --git a/resources/assets/js/components/user/InviteUserForm.vue b/resources/assets/js/components/user/InviteUserForm.vue
index 140220ef..2da3beb9 100644
--- a/resources/assets/js/components/user/InviteUserForm.vue
+++ b/resources/assets/js/components/user/InviteUserForm.vue
@@ -102,7 +102,7 @@ const maybeClose = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 textarea {
   min-height: 8rem !important;
 }
diff --git a/resources/assets/js/components/user/UserAvatar.vue b/resources/assets/js/components/user/UserAvatar.vue
index 59711867..96780bf5 100644
--- a/resources/assets/js/components/user/UserAvatar.vue
+++ b/resources/assets/js/components/user/UserAvatar.vue
@@ -9,7 +9,7 @@ const props = defineProps<{ user: Pick<User, 'name' | 'avatar'> }>()
 const { user } = toRefs(props)
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 img {
   border-radius: 50%;
   aspect-ratio: 1/1;
diff --git a/resources/assets/js/components/user/UserBadge.spec.ts b/resources/assets/js/components/user/UserBadge.spec.ts
deleted file mode 100644
index 6163f7c9..00000000
--- a/resources/assets/js/components/user/UserBadge.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import factory from '@/__tests__/factory'
-import { expect, it } from 'vitest'
-import { eventBus } from '@/utils'
-import { screen } from '@testing-library/vue'
-import UserBadge from './UserBadge.vue'
-
-new class extends UnitTestCase {
-  private renderComponent () {
-    return this.be(factory<User>('user', {
-      name: 'John Doe'
-    })).render(UserBadge)
-  }
-
-  protected test () {
-    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
-
-    it('logs out', async () => {
-      const emitMock = this.mock(eventBus, 'emit')
-      this.renderComponent()
-
-      await this.user.click(screen.getByRole('button', { name: 'Log out' }))
-
-      expect(emitMock).toHaveBeenCalledWith('LOG_OUT')
-    })
-  }
-}
diff --git a/resources/assets/js/components/user/UserBadge.vue b/resources/assets/js/components/user/UserBadge.vue
deleted file mode 100644
index d4579c90..00000000
--- a/resources/assets/js/components/user/UserBadge.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <span v-if="currentUser" id="userBadge" class="profile">
-    <a class="view-profile" href="/#/profile" title="View/edit user profile">
-      <img :alt="`Avatar of ${currentUser.name}`" :src="currentUser.avatar" class="avatar">
-      <span class="name">{{ currentUser.name }}</span>
-    </a>
-
-    <a
-      class="logout control"
-      role="button"
-      title="Log out"
-      @click.prevent="logout"
-    >
-      <Icon :icon="faSignOutAlt" />
-    </a>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
-import { eventBus } from '@/utils'
-import { useAuthorization } from '@/composables'
-
-const { currentUser } = useAuthorization()
-
-const logout = () => eventBus.emit('LOG_OUT')
-</script>
-
-<style lang="scss">
-#userBadge {
-  @include vertical-center();
-
-  justify-content: flex-end;
-  position: relative;
-
-  .avatar {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    margin-right: .5rem;
-  }
-
-  .view-profile {
-    height: 100%;
-    @include vertical-center();
-  }
-
-  .logout {
-    height: 100%;
-    padding: 0 1.25rem;
-    @include vertical-center();
-  }
-
-  @media only screen and (max-width: 667px) {
-    flex: 0 0 96px;
-    margin-right: 0;
-    padding-right: 0;
-    align-content: stretch;
-
-    .name {
-      display: none;
-    }
-
-    .view-profile, .logout {
-      flex: 0 0 40px;
-      font-size: 1.4rem;
-      margin-right: 0;
-
-      @include vertical-center();
-    }
-  }
-}
-</style>
diff --git a/resources/assets/js/components/user/UserCard.vue b/resources/assets/js/components/user/UserCard.vue
index a83ade26..ba7cf81f 100644
--- a/resources/assets/js/components/user/UserCard.vue
+++ b/resources/assets/js/components/user/UserCard.vue
@@ -90,7 +90,7 @@ const revokeInvite = async () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .user-card {
   padding: 10px;
   display: flex;
diff --git a/resources/assets/js/components/utils/ImageCropper.vue b/resources/assets/js/components/utils/ImageCropper.vue
index 58e690be..355b3f71 100644
--- a/resources/assets/js/components/utils/ImageCropper.vue
+++ b/resources/assets/js/components/utils/ImageCropper.vue
@@ -49,7 +49,7 @@ const cancel = () => emits('cancel')
 </script>
 
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .cropper-wrapper {
   width: 100%;
   height: 100%;
diff --git a/resources/assets/js/remote/App.vue b/resources/assets/js/remote/App.vue
index 1c3d6d7b..f8da5988 100644
--- a/resources/assets/js/remote/App.vue
+++ b/resources/assets/js/remote/App.vue
@@ -55,7 +55,7 @@
       </main>
     </template>
 
-    <div v-else class="login-wrapper">
+    <div v-else class="login-wrapper vertical-center">
       <LoginForm @loggedin="onUserLoggedIn" />
     </div>
   </div>
@@ -206,9 +206,7 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss">
-@import "#/remote.scss";
-
+<style lang="postcss">
 body, html {
   height: 100vh;
   position: relative;
@@ -222,8 +220,6 @@ body, html {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
-
-    @include vertical-center();
   }
 
   .loader {
diff --git a/resources/assets/js/remote/app.ts b/resources/assets/js/remote/app.ts
index 778c2a62..8fcb5107 100644
--- a/resources/assets/js/remote/app.ts
+++ b/resources/assets/js/remote/app.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { clickaway } from '@/directives'
+import '@/../css/remote.pcss'
 import App from './App.vue'
 
 createApp(App)
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
deleted file mode 100644
index dea3430f..00000000
--- a/resources/assets/sass/app.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "utf-8";
-
-@import '#/vendor/_reset.scss';
-
-@import '@modules/nouislider/distribute/nouislider.min.css';
-
-@import "#/partials/_vars.scss";
-@import "#/partials/_hacks.scss";
-
-@import "#/vendor/_plyr.scss";
-@import "#/vendor/_nprogress.scss";
-
-@import "#/partials/_skeleton.scss";
-@import '#/partials/_tooltip.scss';
-@import "#/partials/_shared.scss";
diff --git a/resources/assets/sass/remote.scss b/resources/assets/sass/remote.scss
deleted file mode 100644
index 49f81591..00000000
--- a/resources/assets/sass/remote.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@charset "utf-8";
-
-@import '#/vendor/_reset.scss';
-
-@import '@modules/nouislider/distribute/nouislider.min.css';
-
-@import "#/partials/_vars.scss";
-@import "#/partials/_shared.scss";
diff --git a/resources/assets/sass/vendor/_plyr.scss b/resources/assets/sass/vendor/_plyr.scss
deleted file mode 100644
index 367b2187..00000000
--- a/resources/assets/sass/vendor/_plyr.scss
+++ /dev/null
@@ -1,736 +0,0 @@
-@use "sass:math";
-
-// ==========================================================================
-// Plyr styles
-// https://github.com/selz/plyr
-// ==========================================================================
-
-// Variables
-// -------------------------------
-
-// Colors
-$plyr-blue: #3498DB !default;
-$plyr-gray-dark: #343F4A !default;
-$plyr-gray: #565D64 !default;
-$plyr-gray-light: #6B7D86 !default;
-$plyr-gray-lighter: #CBD0D3 !default;
-$plyr-off-white: #313131 !default;
-
-// Font sizes
-$plyr-font-size-small: 14px !default;
-$plyr-font-size-base: 16px !default;
-
-// Captions
-$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
-$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
-$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
-
-// Controls
-$plyr-control-spacing: 10px !default;
-$plyr-controls-bg: #fff !default;
-$plyr-control-bg-hover: $plyr-blue !default;
-
-// Tooltips
-$plyr-tooltip-bg: $plyr-controls-bg !default;
-$plyr-tooltip-border-color: transparentize($plyr-gray-dark, .1) !default;
-$plyr-tooltip-border-width: 1px;
-$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
-$plyr-tooltip-padding: $plyr-control-spacing !default;
-$plyr-tooltip-arrow-size: 6px !default;
-$plyr-tooltip-radius: 3px !default;
-
-// Progress
-$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
-$plyr-progress-playing-bg: $plyr-blue !default;
-$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
-$plyr-progress-loading-size: 40px !default;
-$plyr-progress-loading-bg: transparentize(#000, .15) !default;
-
-// Volume
-$plyr-volume-track-height: 6px !default;
-$plyr-volume-track-bg: rgba(255, 255, 255, .2) !default;
-$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-bg: var(--color-highlight) !default;
-$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
-
-// Breakpoints
-$plyr-bp-control-split: 560px !default; // When controls split into left/right
-$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
-
-// Animation
-// ---------------------------------------
-@keyframes plyr-progress {
-  to {
-    background-position: $plyr-progress-loading-size 0;
-  }
-}
-
-// Font smoothing
-@mixin font-smoothing($mode: on) {
-  @if ($mode == 'on') {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-  } @else if ($mode == 'off') {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
-  }
-}
-
-// <input type="range"> styling
-@mixin volume-thumb() {
-  height: $plyr-volume-thumb-height;
-  width: $plyr-volume-thumb-width;
-  background: $plyr-volume-thumb-bg;
-  border: 0;
-  border-radius: 100%;
-  transition: background .3s ease;
-}
-
-@mixin volume-track() {
-  height: $plyr-volume-track-height;
-  background: $plyr-volume-track-bg;
-  border: 0;
-  border-radius: math.div($plyr-volume-track-height, 2);
-}
-
-@mixin seek-thumb() {
-  background: transparent;
-  border: 0;
-  width: 1px;
-  height: $plyr-control-spacing;
-}
-
-@mixin seek-thumb-touch() {
-  width: ($plyr-control-spacing * 4);
-  transform: translateX(-50%);
-}
-
-@mixin seek-track() {
-  background: none;
-  border: 0;
-}
-
-// Styles
-// -------------------------------
-// Base
-.plyr {
-  position: relative;
-  max-width: 100%;
-  min-width: 290px;
-
-  // border-box everything
-  // http://paulirish.com/2012/box-sizing-border-box-ftw/
-  &,
-  *,
-  *::after,
-  *::before {
-    box-sizing: border-box;
-  }
-
-  // Fix 300ms delay
-  a, button, input, label {
-    touch-action: manipulation;
-  }
-
-  // Screen reader only
-  &__sr-only {
-    position: absolute !important;
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0 !important;
-    border: 0 !important;
-    height: 1px !important;
-    width: 1px !important;
-    overflow: hidden;
-  }
-
-  // For video
-  &__video-wrapper {
-    position: relative;
-  }
-
-  video,
-  audio {
-    width: 100%;
-    height: auto;
-    vertical-align: middle;
-  }
-
-  // For embeds
-  &__video-embed {
-    padding-bottom: 56.25%; /* 16:9 */
-    height: 0;
-    overflow: hidden;
-    background: #000;
-
-    iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      user-select: none;
-    }
-
-    // Vimeo hack
-    > div {
-      position: relative;
-      padding-bottom: 200%;
-      transform: translateY(-35.95%);
-    }
-
-    // To allow mouse events to be captured if full support
-    &.plyr iframe {
-      pointer-events: none;
-    }
-  }
-
-  // Captions
-  &__captions {
-    display: none;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 3);
-    color: var(--color-text-primary);
-    font-size: $plyr-font-size-captions-base;
-    text-align: center;
-    @include font-smoothing();
-
-    span {
-      border-radius: 2px;
-      padding: 3px 10px;
-      background: transparentize(#000, .9);
-    }
-
-    span:empty {
-      display: none;
-    }
-
-    @media (min-width: $plyr-bp-captions-large) {
-      font-size: $plyr-font-size-captions-medium;
-    }
-  }
-
-  &--captions-active &__captions {
-    display: block;
-  }
-
-  &--fullscreen-active &__captions {
-    font-size: $plyr-font-size-captions-large;
-  }
-
-  // Playback controls
-  &__controls {
-    @include font-smoothing();
-    position: relative;
-    padding: $plyr-control-spacing;
-    background: $plyr-controls-bg;
-    line-height: 1;
-    text-align: center;
-    box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);
-
-    // Clear floats
-    &::after {
-      content: '';
-      display: table;
-      clear: both;
-    }
-
-    // Layout
-    &--right {
-      display: block;
-      margin: $plyr-control-spacing auto 0;
-    }
-
-    @media (min-width: $plyr-bp-control-split) {
-      &--left {
-        float: left;
-      }
-      &--right {
-        float: right;
-        margin-top: 0;
-      }
-    }
-
-    // Buttons
-    button {
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 2px;
-      padding: math.div($plyr-control-spacing, 2) $plyr-control-spacing;
-      overflow: hidden;
-      border: 0;
-      background: transparent;
-      border-radius: 3px;
-      cursor: pointer;
-      color: var(--color-highlight);
-      transition: background .3s ease, color .3s ease, opacity .3s ease;
-
-      svg {
-        width: 18px;
-        height: 18px;
-        display: block;
-        fill: currentColor;
-        transition: fill .3s ease;
-      }
-
-      // Hover and tab focus
-      &.tab-focus:hover,
-      &:hover {
-        background: $plyr-control-bg-hover;
-        color: var(--color-highlight) -hover;
-      }
-
-      // Default focus
-      &:focus {
-        outline: 0;
-      }
-    }
-
-    // Hide toggle icons by default
-    .icon--exit-fullscreen,
-    .icon--muted,
-    .icon--captions-on {
-      display: none;
-    }
-
-    // Time display
-    .plyr__time {
-      display: inline-block;
-      vertical-align: middle;
-      margin-left: $plyr-control-spacing;
-      color: var(--color-highlight);
-      font-weight: 600;
-      font-size: $plyr-font-size-small;
-    }
-
-    // Media duration hidden on small screens
-    .plyr__time + .plyr__time {
-      display: none;
-
-      @media (min-width: $plyr-bp-control-split) {
-        display: inline-block;
-      }
-
-      // Add a slash in before
-      &::before {
-        content: '\2044';
-        margin-right: $plyr-control-spacing;
-      }
-    }
-  }
-
-  // Tooltips
-  &__tooltip {
-    visibility: hidden;
-    position: absolute;
-    z-index: 2;
-    bottom: 100%;
-    margin-bottom: $plyr-tooltip-padding;
-    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
-
-    opacity: 0;
-    background: $plyr-tooltip-bg;
-    box-shadow: $plyr-tooltip-shadow;
-    border-radius: $plyr-tooltip-radius;
-    color: var(--color-highlight);
-    font-size: $plyr-font-size-small;
-    line-height: 1.5;
-    font-weight: 600;
-
-    transform: translate(-50%, 10px) scale(.8);
-    transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
-
-    // Arrows
-    &::after,
-    &::before {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    // The border triangle
-    &::after {
-      $plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
-      bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
-      border-right: $plyr-border-arrow-size solid transparent;
-      border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
-      border-left: $plyr-border-arrow-size solid transparent;
-      z-index: 1;
-    }
-
-    // The background triangle
-    &::before {
-      bottom: -$plyr-tooltip-arrow-size;
-      border-right: $plyr-tooltip-arrow-size solid transparent;
-      border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
-      border-left: $plyr-tooltip-arrow-size solid transparent;
-      z-index: 2;
-    }
-  }
-
-  button:hover .plyr__tooltip,
-  button.tab-focus:focus .plyr__tooltip,
-  &__tooltip--visible {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(-50%, 0) scale(1);
-  }
-
-  button:hover .plyr__tooltip {
-    z-index: 3;
-  }
-
-  // Common range styles
-  input[type='range'].tab-focus:focus {
-    outline: thin dotted transparentize($plyr-gray-dark, .8);
-    outline-offset: 3px;
-  }
-
-  // Playback progress
-  // <progress> element
-  &__progress {
-    position: relative;
-    width: 100%;
-    height: $plyr-control-spacing;
-    background: $plyr-progress-bg;
-
-    &--buffer[value],
-    &--played[value],
-    &--seek[type='range'] {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-      overflow: hidden;
-
-      @media (hover: none) {
-        height: 12px;
-      }
-
-      margin: 0;
-      vertical-align: top;
-
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      border: none;
-      background: transparent;
-    }
-
-    &--buffer[value],
-    &--played[value] {
-      &::-webkit-progress-bar {
-        background: transparent;
-        transition: width .2s ease;
-      }
-
-      // Inherit from currentColor;
-      &::-webkit-progress-value {
-        background: currentColor;
-        transition: width .2s ease;
-      }
-
-      &::-moz-progress-bar {
-        background: currentColor;
-        transition: width .2s ease;
-      }
-    }
-
-    &--played[value] {
-      z-index: 2;
-      color: var(--color-highlight);
-    }
-
-    &--buffer[value] {
-      color: var(--color-bg-secondary);
-    }
-
-    // Seek control
-    // <input[type='range']> element
-    // Specificity is for bootstrap compatibility
-    &--seek[type='range'] {
-      z-index: 4;
-      cursor: pointer;
-      outline: 0;
-
-      // Webkit
-      &::-webkit-slider-runnable-track {
-        @include seek-track();
-      }
-
-      &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        @include seek-thumb();
-      }
-
-      // Mozilla
-      &::-moz-range-track {
-        @include seek-track();
-      }
-
-      &::-moz-range-thumb {
-        -moz-appearance: none;
-        @include seek-thumb();
-      }
-
-      // Microsoft
-      &::-ms-track {
-        color: transparent;
-        @include seek-track();
-      }
-
-      &::-ms-fill-lower,
-      &::-ms-fill-upper {
-        @include seek-track();
-      }
-
-      &::-ms-thumb {
-        @include seek-thumb();
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      &::-moz-focus-outer {
-        border: 0;
-      }
-    }
-
-    // Seek tooltip to show time
-    .plyr__tooltip {
-      left: 0;
-      pointer-events: none;
-    }
-  }
-
-  // Touch seek wider handle
-  &--is-touch &--seek[type='range'] {
-    &::-webkit-slider-thumb {
-      @include seek-thumb-touch();
-    }
-
-    // Mozilla
-    &::-moz-range-thumb {
-      @include seek-thumb-touch();
-    }
-
-    // Microsoft
-    &::-ms-thumb {
-      @include seek-thumb-touch();
-    }
-  }
-
-  // Loading state
-  &--loading .plyr__progress--buffer {
-    animation: plyr-progress 1s linear infinite;
-    background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
-    background-repeat: repeat-x;
-    background-color: $plyr-progress-buffered-bg;
-    background-image: linear-gradient(
-        -45deg,
-        $plyr-progress-loading-bg 25%,
-        transparent 25%,
-        transparent 50%,
-        $plyr-progress-loading-bg 50%,
-        $plyr-progress-loading-bg 75%,
-        transparent 75%,
-        transparent);
-    color: transparent;
-  }
-
-  // States
-  &__controls [data-plyr='pause'],
-  &--playing .plyr__controls [data-plyr='play'] {
-    display: none;
-  }
-
-  &--playing .plyr__controls [data-plyr='pause'] {
-    display: inline-block;
-  }
-
-  // Volume control
-  // <input[type='range']> element
-  // Specificity is for bootstrap compatibility
-  &__volume[type='range'] {
-    display: inline-block;
-    vertical-align: middle;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 100px;
-    margin: 0 $plyr-control-spacing 0 0;
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-
-    // Webkit
-    &::-webkit-slider-runnable-track {
-      @include volume-track();
-    }
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      margin-top: -(math.div($plyr-volume-thumb-height - $plyr-volume-track-height, 2));
-      @include volume-thumb();
-    }
-
-    // Mozilla
-    &::-moz-range-track {
-      @include volume-track();
-    }
-
-    &::-moz-range-thumb {
-      @include volume-thumb();
-    }
-
-    // Microsoft
-    &::-ms-track {
-      height: $plyr-volume-track-height;
-      background: transparent;
-      border-color: transparent;
-      border-width: math.div($plyr-volume-thumb-height - $plyr-volume-track-height, 2) 0;
-      color: transparent;
-    }
-
-    &::-ms-fill-lower,
-    &::-ms-fill-upper {
-      @include volume-track();
-    }
-
-    &::-ms-thumb {
-      @include volume-thumb();
-    }
-
-    &:focus {
-      outline: 0;
-
-      &::-webkit-slider-thumb {
-        background: $plyr-volume-thumb-bg-focus;
-      }
-
-      &::-moz-range-thumb {
-        background: $plyr-volume-thumb-bg-focus;
-      }
-
-      &::-ms-thumb {
-        background: $plyr-volume-thumb-bg-focus;
-      }
-    }
-  }
-
-  // Hide sound controls on iOS
-  // It's not supported to change volume using JavaScript:
-  // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-  &--is-ios &__volume,
-  &--is-ios [data-plyr='mute'],
-  &--is-ios.plyr--audio &__controls--right {
-    display: none;
-  }
-
-  // Center buttons so it looks less odd
-  &--is-ios.plyr--audio &__controls--left {
-    float: none;
-  }
-
-  // Audio specific styles
-  // Position the progress within the container
-  &--audio .plyr__controls {
-    padding-top: ($plyr-control-spacing * 2);
-  }
-
-  &--audio .plyr__progress {
-    background: transparent;
-  }
-
-  // Full screen mode
-  &--fullscreen,
-  &--fullscreen-active {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-    z-index: 10000000;
-    background: #000;
-
-    video {
-      height: 100%;
-    }
-
-    .plyr__video-wrapper {
-      height: 100%;
-      width: 100%;
-    }
-
-    .plyr__controls {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  // Hide controls when playing in full screen
-  &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-  &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-    .plyr__controls {
-      transform: translateY(100%) translateY(math.div($plyr-control-spacing, 2));
-      transition: transform .3s .2s ease;
-    }
-
-    .plyr__captions {
-      bottom: math.div($plyr-control-spacing, 2);
-      transition: bottom .3s .2s ease;
-    }
-
-    &.plyr--hover .plyr__controls {
-      transform: translateY(0);
-    }
-  }
-
-  // Captions
-  &.plyr--fullscreen .plyr__captions,
-  &--fullscreen-active .plyr__captions,
-  &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-    top: auto;
-    bottom: 90px;
-
-    @media (min-width: $plyr-bp-control-split) {
-      bottom: 60px;
-    }
-  }
-
-  // Change icons on state change
-  &--fullscreen-active .icon--exit-fullscreen,
-  &--muted .plyr__controls .icon--muted,
-  &--captions-active .plyr__controls .icon--captions-on {
-    display: block;
-
-    & + svg {
-      display: none;
-    }
-  }
-
-  // Some options are hidden by default
-  [data-plyr='captions'],
-  [data-plyr='fullscreen'] {
-    display: none;
-  }
-
-  &--captions-enabled [data-plyr='captions'],
-  &--fullscreen-enabled [data-plyr='fullscreen'] {
-    display: inline-block;
-  }
-}
diff --git a/resources/assets/sass/vendor/_reset.scss b/resources/assets/sass/vendor/_reset.scss
deleted file mode 100644
index 3b2627d6..00000000
--- a/resources/assets/sass/vendor/_reset.scss
+++ /dev/null
@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
diff --git a/vite.config.js b/vite.config.js
index c6686175..55d11105 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,17 +18,9 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './resources/assets/js'),
-      '#': path.resolve(__dirname, './resources/assets/sass'),
       '@modules': path.resolve(__dirname, './node_modules')
     }
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: '@import "#/partials/_mixins.scss";'
-      }
-    }
-  },
   test: {
     environment: 'jsdom',
     setupFiles: path.resolve(__dirname, './resources/assets/js/__tests__/setup.ts')
diff --git a/yarn.lock b/yarn.lock
index e9783bc9..8a25417e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1214,14 +1214,6 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-anymatch@~3.1.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
-  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
 arch@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
@@ -1307,6 +1299,18 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
+autoprefixer@^10.4.19:
+  version "10.4.19"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
+  integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-lite "^1.0.30001599"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -1364,11 +1368,6 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-binary-extensions@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
-  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
-
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -1399,7 +1398,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -1411,6 +1410,16 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
+browserslist@^4.23.0:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+  dependencies:
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -1447,6 +1456,11 @@ camelcase@^5.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
+  version "1.0.30001605"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz#ca12d7330dd8bcb784557eb9aa64f0037870d9d6"
+  integrity sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1492,21 +1506,6 @@ check-more-types@2.24.0, check-more-types@^2.24.0:
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
-"chokidar@>=3.0.0 <4.0.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
-  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -1929,6 +1928,11 @@ editorconfig@^0.15.3:
     semver "^5.6.0"
     sigmund "^1.0.1"
 
+electron-to-chromium@^1.4.668:
+  version "1.4.726"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.726.tgz#9ca95f19e9a0d63675e838b24681182203e40a30"
+  integrity sha512-xtjfBXn53RORwkbyKvDfTajtnTp0OJoPOIBzXvkNbb7+YYvCHJflba3L7Txyx/6Fov3ov2bGPr/n5MTixmPhdQ==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2182,6 +2186,11 @@ esbuild@^0.19.3:
     "@esbuild/win32-ia32" "0.19.12"
     "@esbuild/win32-x64" "0.19.12"
 
+escalade@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -2666,6 +2675,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
 from@~0:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
@@ -2779,7 +2793,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -2986,11 +3000,6 @@ ignore@^5.1.1, ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
-immutable@^4.0.0:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
-  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
-
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3061,13 +3070,6 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -3122,7 +3124,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -3724,6 +3726,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+
 nopt@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
@@ -3731,11 +3738,16 @@ nopt@^6.0.0:
   dependencies:
     abbrev "^1.0.0"
 
-normalize-path@^3.0.0, normalize-path@~3.0.0:
+normalize-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
 nouislider@^14.0.2:
   version "14.7.0"
   resolved "https://registry.yarnpkg.com/nouislider/-/nouislider-14.7.0.tgz#a71db0587c92567b6da1df57d251d3696d942362"
@@ -3969,7 +3981,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -4003,6 +4015,21 @@ pngjs@^5.0.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
   integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
 
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+
+postcss-selector-parser@^6.0.11:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
@@ -4011,6 +4038,11 @@ postcss-selector-parser@^6.0.9:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@^8.1.10, postcss@^8.4.16:
   version "8.4.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.17.tgz#f87863ec7cd353f81f7ab2dec5d67d861bbb1be5"
@@ -4029,6 +4061,15 @@ postcss@^8.4.35:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.38:
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.2.0"
+
 preact@^10.0.0:
   version "10.19.6"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.6.tgz#66007b67aad4d11899f583df1b0116d94a89b8f5"
@@ -4152,13 +4193,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-readdirp@~3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
-  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
-  dependencies:
-    picomatch "^2.2.1"
-
 regenerator-runtime@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
@@ -4313,15 +4347,6 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.72.0:
-  version "1.72.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c"
-  integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
 saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
@@ -4447,16 +4472,16 @@ slugify@^1.0.2:
   resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.5.tgz#c8f5c072bf2135b80703589b39a3d41451fbe8c8"
   integrity sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==
 
-"source-map-js@>=0.6.2 <2.0.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
-
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -4803,6 +4828,14 @@ untildify@^4.0.0:
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"