web: convert global state classes to data attributes

also cleaned up unnecessary dupe in sidebar component

web/src/components/settings/SettingsCategory.svelte

@@ -35,7 +35,7 @@
         animation: highlight 2s;
     }
 
-    :global(.reduce-motion) .settings-content.animate {
+    :global([data-reduce-motion="true"]) .settings-content.animate {
         animation: highlight-lite 2s !important;
     }
 

web/src/components/sidebar/Sidebar.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
-    import { device } from "$lib/device";
-
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
@@ -22,7 +20,7 @@
 
 <svelte:window bind:innerWidth={screenWidth} />
 
-<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")} class:on-iPhone={device.is.iPhone}>
+<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")}>
     <CobaltLogo />
     <div id="sidebar-tabs">
         <div id="sidebar-actions" class="sidebar-inner-container">
@@ -114,7 +112,7 @@
 
     /* add padding for notch / dynamic island in landscape */
     @media screen and (orientation: landscape) {
-        #sidebar.on-iPhone {
+        :global([data-iphone="true"]) #sidebar {
             padding-left: env(safe-area-inset-left);
         }
     }

web/src/components/sidebar/SidebarTab.svelte

@@ -70,7 +70,7 @@
         width: 21px;
     }
 
-    :global(.on-iPhone .sidebar-tab svg) {
+    :global([data-iphone="true"] .sidebar-tab svg) {
         will-change: transform;
     }