fix: improve scss imports and legacy compiler

src/lib/animations/Products/Products.svelte

@@ -158,7 +158,6 @@
     import { postController } from './post';
     import Post from './post/post.svelte';
     import { anyify } from '$lib/utils/anyify';
-    import Badge from '$lib/components/ui/Badge.svelte';
 
     /* Basic Animation setup */
     let scrollInfo = {
@@ -508,10 +507,6 @@
                     display: flex;
                     align-items: center;
                     gap: 0.75rem;
-
-                    .web-label {
-                        margin-block-start: 0.25rem;
-                    }
                 }
 
                 h4 {

src/lib/animations/Products/ProductsMobile.svelte

@@ -108,10 +108,6 @@
                 display: flex;
                 align-items: center;
                 gap: 0.75rem;
-
-                .web-label {
-                    margin-block-start: 0.25rem;
-                }
             }
 
             h4 {

src/lib/animations/Products/functions/phone.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { flip } from '$lib/utils/flip';
-    import { crossfade, scale, slide } from 'svelte/transition';
+    import { scale, slide } from 'svelte/transition';
     import { functionsController } from '.';
 
     const { state } = functionsController;

src/lib/animations/Products/post/index.ts

@@ -1,4 +1,4 @@
-import { safeAnimate, sleep } from '$lib/animations';
+import { safeAnimate } from '$lib/animations';
 import { createResettable } from '$lib/utils/resettable';
 import { animate } from 'motion';
 import { getElSelector } from '../Products.svelte';

src/lib/components/IsLoggedIn.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import Button from './ui/Button.svelte';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { classNames } from '$lib/utils/classnames';
     import { trackEvent } from '$lib/actions/analytics';

src/lib/components/LogoList.svelte

@@ -87,7 +87,7 @@
         <ul
             class="web-u-padding-block-start-80 grid grid-cols-3 text-center md:grid-cols-6 md:gap-10"
         >
-            {#each logos as { src, alt, width, height }, i}
+            {#each logos as { src, alt, width, height }}
                 <li class="grid place-content-center">
                     <img {src} {alt} {width} {height} />
                 </li>

src/lib/components/carousel/CarouselSlide.svelte

@@ -5,21 +5,19 @@
 </li>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .slide {
         cursor: grab;
-
+        flex: 0 0 50%;
-        &:active {
+        min-width: 0;
-            cursor: grabbing;
+        margin-right: f.pxToRem(16);
-        }
 
         @media (max-width: 768px) {
             flex: 0 0 100%;
         }
-
+        &:active {
-        flex: 0 0 50%;
+            cursor: grabbing;
-        min-width: 0;
+        }
-        margin-right: pxToRem(16);
     }
 </style>

src/lib/layouts/Main.svelte

@@ -25,7 +25,6 @@
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
     import InitBanner from '$lib/components/InitBanner.svelte';
-    import Button from '$lib/components/ui/Button.svelte';
     import { trackEvent } from '$lib/actions/analytics';
 
     export let omitMainId = false;

src/markdoc/layouts/Integration.svelte

@@ -2,7 +2,6 @@
     import { Root, Slide } from '$lib/components/carousel';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
-    import ProductsGrid from '$lib/components/ProductsGrid.svelte';
     import { Main } from '$lib/layouts';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
     import type { Integration } from '$routes/integrations/+page';
@@ -181,13 +180,8 @@
 </Main>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
-
+    @use '$scss/abstract/variables/devices';
-    .cta {
-        min-height: pxToRem(560);
-        display: flex;
-        align-items: center;
-    }
 
     .web-pre-footer-bg {
         position: absolute;
@@ -199,24 +193,15 @@
         max-inline-size: unset;
         max-block-size: unset;
     }
-    /* more tha 9 items */
-
-    .l-side-column {
-        display: flex;
-        gap: pxToRem(16);
-        @media #{$break1} {
-            flex-direction: column;
-        }
-    }
 
     .l-grid-2-1 {
-        @media #{$break1} {
+        @media #{devices.$break1} {
             display: flex;
             flex-direction: column;
         }
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
             display: grid;
-            gap: pxToRem(64);
+            gap: f.pxToRem(64);
             grid-template-columns: repeat(12, 1fr);
         }
 

src/routes/+page.svelte

@@ -129,9 +129,7 @@
                         <span class="web-icon-star shrink-0" aria-hidden="true" />
                         <span class="text-caption shrink-0 font-medium">New</span>
                         <div class="web-hero-banner-button-sep" />
-                        <span class="text-caption web-u-trim-1"
+                        <span class="text-caption web-u-trim-1">Introducing Database Backups</span>
-                            >Introducing Database Backups</span
-                        >
 
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>

src/routes/contact-us/enterprise/+page.svelte

@@ -77,15 +77,11 @@
 <Main>
     <div class="web-big-padding-section">
         <div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
-            <div
+            <div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
-                class="web-big-padding-section-level-2 is-margin-replace-padding relative"
-            >
                 <div class="relative">
                     <div class="web-container relative">
                         <!-- before submit -->
-                        <div
+                        <div class="u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0 relative">
-                            class="relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
-                        >
                             <div>
                                 <div
                                     class="web-u-max-inline-size-none-mobile"

src/routes/docs/+page.svelte

@@ -385,10 +385,6 @@
         }
     }
 
-    .bg-blur {
-        inset-block-start: -100px;
-    }
-
     .tech-hero {
         @include gradients.border-block-gradient;
 

src/routes/heroes/+page.svelte

@@ -355,6 +355,7 @@
 </Main>
 
 <style lang="scss">
+    @use '$scss/abstract/functions' as f;
     @use '$scss/abstract/mixins/border-gradient' as gradients;
 
     .hero {
@@ -456,7 +457,7 @@
             padding-inline: 4rem;
 
             display: flex;
-            gap: pxToRem(32);
+            gap: f.pxToRem(32);
             flex-shrink: 0;
 
             > * {

src/routes/init-0/(components)/CountdownCard.svelte

@@ -34,12 +34,4 @@
         justify-content: center;
         align-items: center;
     }
-
-    .text-title font-aeonik-pro {
-        margin-block-start: 0.75rem;
-    }
-
-    .text-sub-body font-medium {
-        margin-block-start: 0.5rem;
-    }
 </style>

src/routes/init-0/(components)/Ticket.svelte

@@ -413,12 +413,6 @@
         z-index: -1;
     }
 
-    .text-title font-aeonik-pro {
-        font-size: adjusted(2.5);
-        line-height: #{math.div(44, 40)}em;
-        overflow-wrap: break-word;
-    }
-
     .text-label {
         font-size: adjusted(1.5);
         line-height: #{math.div(28, 24)}em;

src/routes/init/(components)/CountdownCard.svelte

@@ -33,12 +33,4 @@
         align-items: center;
         background-color: hsl(var(--web-color-subtle));
     }
-
-    .text-title font-aeonik-pro {
-        margin-block-start: 0.75rem;
-    }
-
-    .text-sub-body font-medium {
-        margin-block-start: 0.5rem;
-    }
 </style>

src/routes/init/(components)/TicketScroll.svelte

@@ -58,12 +58,12 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .col {
         display: flex;
         flex-direction: column;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
 
         @keyframes scroll {
             0% {

src/routes/init/(components)/VideoDialog.svelte

@@ -56,7 +56,7 @@
         pointer-events: none;
         transition: 200ms ease;
 
-        &[data-state='open'] {
+        :global(&[data-state='open']) {
             opacity: 1;
             pointer-events: all;
         }
@@ -82,7 +82,7 @@
         pointer-events: none;
         transition: 200ms ease;
 
-        &[data-state='open'] {
+        :global(&[data-state='open']) {
             opacity: 1;
             transform: scale(1);
             pointer-events: all;

src/routes/init/(components)/grid/Cell.svelte

@@ -8,12 +8,12 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .cell {
         display: flex;
         flex-direction: column;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
         height: 100%;
 
         @media screen and (min-width: 768px) {

src/routes/init/(components)/grid/Root.svelte

@@ -8,11 +8,11 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .grid {
         display: flex;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
         flex-direction: column;
 
         @media screen and (min-width: 768px) {

src/routes/init/(components)/ticket/Ticket.svelte

@@ -178,7 +178,7 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
     $base-width: 22;
 
     .wrapper {
@@ -231,7 +231,7 @@
         grid-template-columns: repeat(12, minmax(0, 1fr));
         gap: 4px;
         overflow: hidden;
-        border-radius: pxToRem(16);
+        border-radius: f.pxToRem(16);
         aspect-ratio: 2 / 1;
         animation: fade 1s ease-out;
         transition: transform 100ms;
@@ -245,7 +245,7 @@
             display: flex;
             flex-direction: column;
             justify-content: center;
-            border-radius: pxToRem(8);
+            border-radius: f.pxToRem(8);
             line-height: 1;
             position: relative;
             overflow: hidden;
@@ -270,7 +270,7 @@
                 justify-content: space-between;
                 width: fit-content;
                 gap: 4px;
-                padding: pxToRem(24) 0;
+                padding: f.pxToRem(24) 0;
                 left: 80%;
 
                 span {
@@ -288,17 +288,17 @@
                 --delay: 700ms;
                 display: flex;
                 flex-direction: column;
-                gap: pxToRem(4);
+                gap: f.pxToRem(4);
                 width: 60%;
-                margin: pxToRem(16);
+                margin: f.pxToRem(16);
-                border-radius: pxToRem(16);
+                border-radius: f.pxToRem(16);
 
                 &[data-remove-delay] {
                     --delay: 0ms;
                 }
 
                 .row {
-                    gap: pxToRem(4);
+                    gap: f.pxToRem(4);
                     display: flex;
 
                     div {
@@ -307,14 +307,14 @@
                         height: var(--size);
                         flex-shrink: 0;
 
-                        @media screen and (min-width: 768px) {
-                            --size: 8px;
-                        }
-
                         border-radius: calc(var(--size) / 4);
                         animation: fade-in 500ms ease calc(calc(75ms * var(--index)) + var(--delay))
                             forwards;
 
+                        @media screen and (min-width: 768px) {
+                            --size: 8px;
+                        }
+
                         &[data-level] {
                             --bg-color: var(--web-color-accent);
                         }
@@ -358,9 +358,9 @@
             grid-column: span 9 / span 9;
             height: 100%;
             background: #000;
-            padding: pxToRem(20);
+            padding: f.pxToRem(20);
             position: relative;
-            border-radius: pxToRem(16);
+            border-radius: f.pxToRem(16);
             overflow: hidden;
 
             .text-label {
@@ -385,8 +385,4 @@
             }
         }
     }
-    .text-title font-aeonik-pro {
-        font-size: clamp(20px, 1vw, 24px);
-        line-height: 1;
-    }
 </style>

src/routes/init/tickets/customize/+page.svelte

@@ -131,14 +131,4 @@
             margin-block-start: 0;
         }
     }
-
-    .text-display font-aeonik-pro {
-        margin-bottom: -48px;
-    }
-
-    @media screen and (min-width: 768px) {
-        .text-display font-aeonik-pro {
-            margin-bottom: 0;
-        }
-    }
 </style>

src/routes/integrations/+page.svelte

@@ -447,16 +447,18 @@
 </Main>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
+    @use '$scss/abstract/variables/devices';
+
     :global([data-scroll-smooth]) {
         scroll-behavior: smooth;
     }
     .hero {
-        min-height: pxToRem(620);
+        min-height: f.pxToRem(620);
         @media (min-width: 768px) {
             display: grid;
             grid-template-columns: 60% minmax(0, 1fr);
-            gap: pxToRem(32);
+            gap: f.pxToRem(32);
             justify-content: space-between;
             align-items: center;
             position: relative;
@@ -465,7 +467,7 @@
                 transform-origin: left center;
                 scale: 1.25;
                 position: relative;
-                left: pxToRem(-30);
+                left: f.pxToRem(-30);
             }
         }
 
@@ -525,7 +527,7 @@
     /* more tha 9 items */
     .l-max-size-list-cards-section {
         scroll-snap-align: start;
-        scroll-margin-top: pxToRem(120);
+        scroll-margin-top: f.pxToRem(120);
     }
     .l-max-size-list-cards {
         &:where(:has(> ul > li:nth-child(10))) {
@@ -536,7 +538,7 @@
                 bottom: 0;
                 height: 100%;
                 width: 100%;
-                max-height: pxToRem(350);
+                max-height: f.pxToRem(350);
                 content: '';
                 display: block;
                 background: linear-gradient(
@@ -550,7 +552,7 @@
             .l-float-button {
                 position: absolute;
                 inset-inline: 0;
-                inset-block-end: pxToRem(20);
+                inset-block-end: f.pxToRem(20);
                 margin-inline: auto;
                 display: flex;
             }
@@ -576,16 +578,16 @@
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
         gap: 1rem;
-        @media #{$break1} {
+        @media #{devices.$break1} {
             gap: 1.25rem;
         }
     }
     .l-integrations-grid {
         position: relative;
 
-        @media #{$break1} {
+        @media #{devices.$break1} {
             gap: 0;
-            padding-block-start: pxToRem(80);
+            padding-block-start: f.pxToRem(80);
         }
 
         .disabled {
@@ -596,8 +598,8 @@
         }
 
         .sidebar {
-            margin-bottom: pxToRem(60);
+            margin-bottom: f.pxToRem(60);
-            @media #{$break2open} {
+            @media #{devices.$break2open} {
                 position: sticky;
                 top: 50px;
                 height: 500px;
@@ -609,7 +611,7 @@
             }
 
             .tag {
-                min-width: pxToRem(42) !important;
+                min-width: f.pxToRem(42) !important;
 
                 &.active-tag {
                     background-color: #fff;
@@ -618,17 +620,17 @@
             }
         }
 
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
             display: grid;
-            gap: pxToRem(68);
+            gap: f.pxToRem(68);
-            grid-template-columns: pxToRem(240) 1fr;
+            grid-template-columns: f.pxToRem(240) 1fr;
-            padding-block-start: pxToRem(40);
+            padding-block-start: f.pxToRem(40);
         }
     }
     .l-integrations-hero {
-        @media #{$break1} {
+        @media #{devices.$break1} {
         }
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
         }
     }
     .l-bg-1 {
@@ -645,12 +647,12 @@
     }
 
     .web-feature-grid {
-        @media #{$break1} {
+        @media #{devices.$break1} {
             gap: 1rem;
         }
     }
     .web-feature-grid {
-        @media #{$break1} {
+        @media #{devices.$break1} {
             gap: 1rem;
         }
     }

src/routes/pricing/+page.svelte

@@ -359,10 +359,4 @@
         gap: 1rem;
         grid-template-columns: repeat(4, 1fr);
     }
-
-    .web-pricing-cards-list .web-main-body-500 {
-        height: 78px;
-        --p-font-size: unset !important;
-        --p-line-height: var(--web-line-height-sm);
-    }
 </style>

src/routes/products/messaging/(components)/Target.svelte

@@ -2,7 +2,6 @@
     import { clamp } from '$lib/utils/clamp';
     import { withPrevious } from '$lib/utils/withPrevious';
     import { withRaf } from '$lib/utils/withRaf';
-    import { get } from 'svelte/store';
     import Accordion from './Accordion/Accordion.svelte';
     import AccordionItem from './Accordion/AccordionItem.svelte';
     import Checkbox from './Checkbox.svelte';

src/routes/startups/+page.svelte

@@ -187,8 +187,8 @@
                             class="text-description web-u-max-width-640 e-u-padding-inline-32-desktop mx-auto"
                         >
                             The Appwrite Startups Program supports your startup with a complete
-                            backend for you to build your products. You will receive
+                            backend for you to build your products. You will receive $20,000 Cloud
-                            $20,000 Cloud credits for Appwrite Scale for 12 months.
+                            credits for Appwrite Scale for 12 months.
                         </p>
                         <button on:click={scrollToForm} class="web-button mt-3 mx-auto">
                             Apply now

src/routes/startups/faq.svelte

@@ -25,7 +25,7 @@
         },
         {
             question: 'Who is eligible to apply?',
-            answer: "We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join."
+            answer: 'We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join.'
         },
         {
             question: 'What are the limits of the Scale plan?',

src/routes/students/(components)/CallToAction.svelte

@@ -21,8 +21,7 @@
                 Develop your developer skills with Appwrite Pro, join a vibrant community of
                 open-source contributors, and start building with a vast array of frameworks.
             </p>
-            <a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a
+            <a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a>
-            >
         </div>
     </div>
 </div>

src/routes/students/(components)/GetStarted.svelte

@@ -2,14 +2,18 @@
     import Badge from '$lib/components/ui/Badge.svelte';
     import { classNames } from '$lib/utils/classnames';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
-    
+
     const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`;
 
     const items = [
         {
             label: 'Enroll to the GitHub Student Developer Pack',
             description: 'Sign up for the Student Developer pack and explore the benefits.',
-            cta: { url: 'https://github.com/education', label: 'Enroll on GitHub Education', icon: 'github' }
+            cta: {
+                url: 'https://github.com/education',
+                label: 'Enroll on GitHub Education',
+                icon: 'github'
+            }
         },
         {
             label: 'Redeem your Cloud credits',

src/routes/threads/[id]/MessageCard.svelte

@@ -53,10 +53,6 @@
         overflow: hidden;
     }
 
-    .text-sub-body font-medium {
-        font-size: 1rem !important;
-    }
-
     .header {
         display: flex;
         justify-content: space-between;

src/scss/7-components/_main-header.scss

@@ -1,75 +1,110 @@
 @use '../abstract' as *;
 
 .#{$p}-main-header {
-  --p-main-header-padding-block: #{pxToRem(15)};
+    --p-main-header-padding-block: #{pxToRem(15)};
-  
-  --p-main-header-link-color: var(--web-color-greyscale-900);
-  --p-main-header-border-color: rgb(0,0,0, 0.1);
 
-
-  position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
-  padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
-  min-block-size:pxToRem(73);
-
-  &.is-special-padding {
-    padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */
-  }
-  &.is-docs {
-    .#{$p}-main-header-wrapper { max-inline-size:86.875rem;  }
-  }
-  &.is-reference {
-    .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); }
-  }
-  
-  &-wrapper { 
-    display:flex; flex-wrap:wrap; justify-content:center; gap:pxToRem(16); margin-inline:auto;
-    max-inline-size:pxToRem(1728); padding-block:var(--p-main-header-padding-block);
-  }
-  &-start { display:flex; align-items:center; }
-  &-end { display:flex; margin-inline-start:auto; align-items:center; gap:pxToRem(8) }
-
-  .#{$p}-input-text { padding-block:pxToRem(7); padding-inline-end:pxToRem(8); }
-
-  .web-logo { margin-inline-end:pxToRem(32); }
-  
-
-  &-nav {
-    align-self:center; font-size:pxToRem(16); user-select:none;
-    &-list { display:flex; gap:pxToRem(32); }
-    &-link {
-      color:hsl(var(--web-color-primary)); transition:var(--transition);
-      &.is-selected { color:hsl(var(--p-main-header-link-color)); }
-    }
-  }
-  &-more {
-    &-link { color:hsl(var(--color-neutral-0) / 0.64); }
-  }
-
-  &.is-transparent { 
-    [data-js-enabled] & {
-      background-color: transparent; -webkit-backdrop-filter:blur(pxToRem(10)); backdrop-filter:blur(pxToRem(10)); 
-    }
-  }
-
-  #{$theme-dark} &,
-  &#{$theme-dark} {
-    --p-main-header-link-color: var(--web-color-greyscale-100);
-    --p-main-header-border-color: rgb(255,255,255, 0.1);
-  }
-
-  #{$theme-light} &,
-  &#{$theme-light} {
     --p-main-header-link-color: var(--web-color-greyscale-900);
-    --p-main-header-border-color: rgb(0,0,0, 0.1);
+    --p-main-header-border-color: rgb(0, 0, 0, 0.1);
-  }
 
-  @media #{$break1}, #{$break2}{
+    position: sticky;
-    display:none;
+    z-index: 999;
-  }
+    inset-block-start: 0;
-  
+    background-color: hsl(var(--p-body-bg-color));
+    padding-inline: pxToRem(32);
+    border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
+    min-block-size: pxToRem(73);
+    transition: transform 0.3s ease;
 
-  transition: transform 0.3s ease;
+    &.is-special-padding {
-  &.is-hidden {
+        padding-inline: clamp(1.25rem, 4vw, 120rem); /* Thomas calculation */
-    transform: translateY(-100%);
+    }
-  }
+    &.is-docs {
-}
+        .#{$p}-main-header-wrapper {
+            max-inline-size: 86.875rem;
+        }
+    }
+    &.is-reference {
+        .#{$p}-main-header-wrapper {
+            max-inline-size: var(--container-size-huge);
+        }
+    }
+
+    &-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: pxToRem(16);
+        margin-inline: auto;
+        max-inline-size: pxToRem(1728);
+        padding-block: var(--p-main-header-padding-block);
+    }
+    &-start {
+        display: flex;
+        align-items: center;
+    }
+    &-end {
+        display: flex;
+        margin-inline-start: auto;
+        align-items: center;
+        gap: pxToRem(8);
+    }
+
+    .#{$p}-input-text {
+        padding-block: pxToRem(7);
+        padding-inline-end: pxToRem(8);
+    }
+
+    .web-logo {
+        margin-inline-end: pxToRem(32);
+    }
+
+    &-nav {
+        align-self: center;
+        font-size: pxToRem(16);
+        user-select: none;
+        &-list {
+            display: flex;
+            gap: pxToRem(32);
+        }
+        &-link {
+            color: hsl(var(--web-color-primary));
+            transition: var(--transition);
+            &.is-selected {
+                color: hsl(var(--p-main-header-link-color));
+            }
+        }
+    }
+    &-more {
+        &-link {
+            color: hsl(var(--color-neutral-0) / 0.64);
+        }
+    }
+
+    &.is-transparent {
+        [data-js-enabled] & {
+            background-color: transparent;
+            -webkit-backdrop-filter: blur(pxToRem(10));
+            backdrop-filter: blur(pxToRem(10));
+        }
+    }
+
+    #{$theme-dark} &,
+    &#{$theme-dark} {
+        --p-main-header-link-color: var(--web-color-greyscale-100);
+        --p-main-header-border-color: rgb(255, 255, 255, 0.1);
+    }
+
+    #{$theme-light} &,
+    &#{$theme-light} {
+        --p-main-header-link-color: var(--web-color-greyscale-900);
+        --p-main-header-border-color: rgb(0, 0, 0, 0.1);
+    }
+
+    @media #{$break1}, #{$break2} {
+        display: none;
+    }
+
+    &.is-hidden {
+        transform: translateY(-100%);
+    }
+}

src/scss/7-components/_mobile-header.scss

@@ -1,30 +1,49 @@
 @use '../abstract' as *;
 
 .#{$p}-mobile-header {
-  --p-mobile-header-border-color: rgb(0,0,0, 0.1);
+    --p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
 
+    position: sticky;
+    z-index: 120;
+    inset-block-start: 0;
+    background-color: hsl(var(--p-body-bg-color));
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: pxToRem(16);
+    border-block-end: solid 1px var(--p-mobile-header-border-color);
+    padding-inline: pxToRem(20);
+    padding-block: pxToRem(16);
+    transition: transform 0.3s ease;
+    &-start {
+        display: flex;
+        align-items: center;
+    }
+    &-end {
+        display: flex;
+        align-items: center;
+        gap: pxToRem(8);
+    }
+    &.is-transparent {
+        background-color: transparent;
+        -webkit-backdrop-filter: blur(pxToRem(8));
+        backdrop-filter: blur(pxToRem(8));
+    }
+    @media #{$break3open} {
+        display: none;
+    }
 
-  position:sticky; z-index:120; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
+    #{$theme-dark} &,
-  display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
+    &#{$theme-dark} {
-  border-block-end: solid 1px var(--p-mobile-header-border-color);
+        --p-mobile-header-border-color: rgb(255, 255, 255, 0.1);
-  padding-inline:pxToRem(20); padding-block:pxToRem(16);
+    }
-  &-start { display:flex; align-items: center; }
-  &-end   { display:flex; align-items: center; gap: pxToRem(8) }
-  &.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(8)); backdrop-filter:blur(pxToRem(8)); }
-  @media #{$break3open} { display:none; }
 
-  #{$theme-dark} &,
+    #{$theme-light} &,
-  &#{$theme-dark} {
+    &#{$theme-light} {
-    --p-mobile-header-border-color: rgb(255,255,255, 0.1);
+        --p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
-  }
+    }
 
-  #{$theme-light} &,
+    &.is-hidden {
-  &#{$theme-light} {
+        transform: translateY(-100%);
-    --p-mobile-header-border-color: rgb(0,0,0, 0.1);
+    }
-  }
+}
-
-  transition: transform 0.3s ease;
-  &.is-hidden {
-    transform: translateY(-100%);
-  }
-}

vite.config.ts

@@ -27,6 +27,13 @@ export default defineConfig({
             includePublic: true
         })
     ],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern'
+            }
+        }
+    },
     build: {
         reportCompressedSize: false
     },