From a43c679e214b24c7f547e182aea6e2fbf826228f Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sun, 10 Dec 2023 15:37:37 +0330
Subject: [PATCH] refactor: change ordering config

---
 .stylelintrc.json                             |  2 +-
 .vscode/settings.json                         |  4 +-
 package-lock.json                             | 61 +++++++++----------
 package.json                                  |  2 +-
 src/components/buttons/buttons.module.css     |  6 +-
 src/components/buttons/play/play.module.css   | 18 +++---
 .../buttons/unselect/unselect.module.css      | 26 ++++----
 src/components/category/category.module.css   |  8 +--
 src/components/footer.astro                   |  6 +-
 src/components/hero.astro                     | 16 ++---
 .../scroll-to-top/scroll-to-top.module.css    | 14 ++---
 src/components/sections/about.astro           |  6 +-
 src/components/sections/ready.astro           | 34 +++++------
 src/components/sections/why.astro             | 24 ++++----
 src/components/shuffle/shuffle.module.css     | 14 ++---
 src/components/snackbar/snackbar.module.css   |  8 +--
 .../sound/favorite/favorite.module.css        | 14 ++---
 src/components/sound/range/range.module.css   | 16 ++---
 src/components/sound/sound.module.css         | 32 +++++-----
 src/components/sounds/sounds.module.css       | 22 +++----
 src/components/tooltip/tooltip.module.css     |  4 +-
 src/styles/base/base.css                      |  6 +-
 src/styles/fonts.css                          |  8 +--
 23 files changed, 174 insertions(+), 177 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 6c15b62..aa8289e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,7 +1,7 @@
 {
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-idiomatic-order",
+    "stylelint-config-recess-order",
     "stylelint-config-html",
     "stylelint-prettier/recommended"
   ],
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b4ddd59..0bb6145 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,8 +11,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[javascript][javascriptreact][typescript][typescriptreact][astro]": {
     "editor.formatOnSave": false
diff --git a/package-lock.json b/package-lock.json
index 4d899ac..d11be1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,7 +54,7 @@
         "standard-version": "9.5.0",
         "stylelint": "15.10.3",
         "stylelint-config-html": "1.1.0",
-        "stylelint-config-idiomatic-order": "9.0.0",
+        "stylelint-config-recess-order": "4.4.0",
         "stylelint-config-standard": "34.0.0",
         "stylelint-prettier": "4.0.2"
       }
@@ -12590,15 +12590,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-sorting": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
-      "integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
-      "dev": true,
-      "peerDependencies": {
-        "postcss": "^8.3.9"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -14922,32 +14913,16 @@
         "stylelint": ">=14.0.0"
       }
     },
-    "node_modules/stylelint-config-idiomatic-order": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-idiomatic-order/-/stylelint-config-idiomatic-order-9.0.0.tgz",
-      "integrity": "sha512-+LtfPycY1Paayf1MaERyh6BzVPnZxemX5NtzdUPqi4u8hyAR7859f/4EL02+Kr9va76iX7mbYC4HendocXKJZQ==",
+    "node_modules/stylelint-config-recess-order": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.4.0.tgz",
+      "integrity": "sha512-Q99kvZyIM/aoPEV4dRDkzD3fZLzH0LXi+pawCf1r700uUeF/PHQ5PZXjwFUuGrWhOzd1N+cuVm+OUGsY2fRN5A==",
       "dev": true,
       "dependencies": {
-        "stylelint-order": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "stylelint-order": "6.x"
       },
       "peerDependencies": {
-        "stylelint": ">=11"
-      }
-    },
-    "node_modules/stylelint-config-idiomatic-order/node_modules/stylelint-order": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
-      "integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^8.3.11",
-        "postcss-sorting": "^7.0.1"
-      },
-      "peerDependencies": {
-        "stylelint": "^14.0.0"
+        "stylelint": ">=15"
       }
     },
     "node_modules/stylelint-config-recommended": {
@@ -14977,6 +14952,28 @@
         "stylelint": "^15.10.0"
       }
     },
+    "node_modules/stylelint-order": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz",
+      "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^8.4.32",
+        "postcss-sorting": "^8.0.2"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1"
+      }
+    },
+    "node_modules/stylelint-order/node_modules/postcss-sorting": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
+      "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.4.20"
+      }
+    },
     "node_modules/stylelint-prettier": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-4.0.2.tgz",
diff --git a/package.json b/package.json
index ef2bcfb..31d983c 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "standard-version": "9.5.0",
     "stylelint": "15.10.3",
     "stylelint-config-html": "1.1.0",
-    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-prettier": "4.0.2"
   }
diff --git a/src/components/buttons/buttons.module.css b/src/components/buttons/buttons.module.css
index a52e6ec..0f845f8 100644
--- a/src/components/buttons/buttons.module.css
+++ b/src/components/buttons/buttons.module.css
@@ -1,11 +1,11 @@
 .buttons {
   position: sticky;
-  z-index: 10;
   top: 30px;
+  z-index: 10;
   display: flex;
-  width: max-content;
+  column-gap: 10px;
   align-items: center;
   justify-content: center;
+  width: max-content;
   margin: 0 auto;
-  column-gap: 10px;
 }
diff --git a/src/components/buttons/play/play.module.css b/src/components/buttons/play/play.module.css
index b94978d..69edff8 100644
--- a/src/components/buttons/play/play.module.css
+++ b/src/components/buttons/play/play.module.css
@@ -1,19 +1,19 @@
 .playButton {
   display: flex;
-  width: 150px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 100px;
-  border-top: 2px solid #34d399;
-  border-bottom: 3px solid #059669;
-  background-color: #10b981;
-  color: #022c22;
-  cursor: pointer;
+  width: 150px;
+  height: 45px;
   font-family: var(--font-heading);
   font-size: var(--font-base);
   line-height: 0;
+  color: #022c22;
+  cursor: pointer;
+  background-color: #10b981;
+  border: none;
+  border-top: 2px solid #34d399;
+  border-bottom: 3px solid #059669;
+  border-radius: 100px;
   outline: none;
 
   &:disabled,
diff --git a/src/components/buttons/unselect/unselect.module.css b/src/components/buttons/unselect/unselect.module.css
index c9ba445..5316ed9 100644
--- a/src/components/buttons/unselect/unselect.module.css
+++ b/src/components/buttons/unselect/unselect.module.css
@@ -1,19 +1,19 @@
 .unselectButton {
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 100px;
-  border-top: 2px solid #fb7185;
-  border-bottom: 3px solid #be123c;
-  background-color: #f43f5e;
-  color: var(--color-foreground);
-  cursor: pointer;
+  width: 45px;
+  height: 45px;
   font-family: var(--font-heading);
   font-size: var(--font-md);
   line-height: 0;
+  color: var(--color-foreground);
+  cursor: pointer;
+  background-color: #f43f5e;
+  border: none;
+  border-top: 2px solid #fb7185;
+  border-bottom: 3px solid #be123c;
+  border-radius: 100px;
   outline: none;
   transition: 0.2s;
 
@@ -23,17 +23,17 @@
   }
 
   &.restore {
+    color: var(--color-neutral-200);
+    background-color: var(--color-neutral-700);
     border-top-color: var(--color-neutral-950);
     border-bottom-color: var(--color-neutral-600);
-    background-color: var(--color-neutral-700);
-    color: var(--color-neutral-200);
   }
 }
 
 .tooltip {
   padding: 6px 12px;
+  font-size: var(--font-xsm);
+  background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-200);
   border-radius: 100px;
-  background-color: var(--color-neutral-100);
-  font-size: var(--font-xsm);
 }
diff --git a/src/components/category/category.module.css b/src/components/category/category.module.css
index d46fed3..127e5cc 100644
--- a/src/components/category/category.module.css
+++ b/src/components/category/category.module.css
@@ -17,14 +17,14 @@
 
     & .icon {
       display: flex;
-      width: 45px;
-      height: 45px;
       align-items: center;
       justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
-      background-color: var(--color-neutral-100);
-      font-size: var(--font-md);
     }
   }
 
diff --git a/src/components/footer.astro b/src/components/footer.astro
index 1150977..b77c0a9 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -16,17 +16,17 @@ import { Container } from '@/components/container';
 <style>
   .footer {
     display: flex;
-    height: 100px;
     align-items: center;
+    height: 100px;
 
     & p {
-      color: var(--color-foreground-subtle);
       font-size: var(--font-sm);
+      color: var(--color-foreground-subtle);
       text-align: center;
 
       & a {
-        color: var(--color-foreground);
         font-weight: 500;
+        color: var(--color-foreground);
         text-decoration: none;
 
         & span {
diff --git a/src/components/hero.astro b/src/components/hero.astro
index 3dae288..3867d59 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -44,12 +44,12 @@ const count = soundCount();
 
     & .title {
       display: flex;
-      align-items: center;
       column-gap: 15px;
+      align-items: center;
 
       & div {
-        height: 1px;
         flex-grow: 1;
+        height: 1px;
 
         &.left {
           background: linear-gradient(
@@ -77,22 +77,22 @@ const count = soundCount();
 
     & .desc {
       margin-top: 5px;
-      color: var(--color-foreground-subtle);
       line-height: 1.6;
+      color: var(--color-foreground-subtle);
     }
 
     & .sounds {
       position: relative;
       display: flex;
-      width: max-content;
       align-items: center;
       justify-content: center;
+      width: max-content;
       padding: 6px 16px;
+      margin: 20px auto 0;
+      font-size: var(--font-xsm);
+      background-color: var(--color-neutral-100);
       border: 1px solid var(--color-neutral-200);
       border-radius: 100px;
-      margin: 20px auto 0;
-      background-color: var(--color-neutral-100);
-      font-size: var(--font-xsm);
 
       &::before {
         position: absolute;
@@ -100,13 +100,13 @@ const count = soundCount();
         left: 50%;
         width: 70%;
         height: 1px;
+        content: '';
         background: linear-gradient(
           90deg,
           transparent,
           var(--color-neutral-400),
           transparent
         );
-        content: '';
         transform: translateX(-50%);
       }
     }
diff --git a/src/components/scroll-to-top/scroll-to-top.module.css b/src/components/scroll-to-top/scroll-to-top.module.css
index c5ab172..0c4f13b 100644
--- a/src/components/scroll-to-top/scroll-to-top.module.css
+++ b/src/components/scroll-to-top/scroll-to-top.module.css
@@ -1,17 +1,17 @@
 .button {
   position: fixed;
-  z-index: 99;
   bottom: 20px;
   left: 20px;
+  z-index: 99;
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-300);
-  border-radius: 50%;
-  background-color: var(--color-neutral-100);
+  width: 45px;
+  height: 45px;
+  font-size: var(--font-md);
   color: var(--color-foreground);
   cursor: pointer;
-  font-size: var(--font-md);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 50%;
 }
diff --git a/src/components/sections/about.astro b/src/components/sections/about.astro
index 611dea1..b124125 100644
--- a/src/components/sections/about.astro
+++ b/src/components/sections/about.astro
@@ -28,8 +28,8 @@ const count = soundCount();
 
     & .titleWrapper {
       display: flex;
-      align-items: center;
       column-gap: 12px;
+      align-items: center;
 
       & .title {
         margin-bottom: 12px;
@@ -39,8 +39,8 @@ const count = soundCount();
       }
 
       & .line {
-        height: 1px;
         flex-grow: 1;
+        height: 1px;
         background: linear-gradient(
           90deg,
           var(--color-neutral-300),
@@ -51,8 +51,8 @@ const count = soundCount();
     }
 
     & .desc {
-      color: var(--color-foreground-subtle);
       line-height: 1.7;
+      color: var(--color-foreground-subtle);
 
       & span {
         color: var(--color-foreground);
diff --git a/src/components/sections/ready.astro b/src/components/sections/ready.astro
index cd1df21..0e5d59a 100644
--- a/src/components/sections/ready.astro
+++ b/src/components/sections/ready.astro
@@ -36,8 +36,8 @@ import { Container } from '@/components/container';
     & .wrapper {
       position: relative;
       padding: 0 20px 40px;
-      border-radius: 0 0 20px 20px;
       background: linear-gradient(transparent, var(--color-neutral-100));
+      border-radius: 0 0 20px 20px;
 
       &::after {
         position: absolute;
@@ -45,13 +45,13 @@ import { Container } from '@/components/container';
         left: 50%;
         width: 70%;
         height: 1px;
+        content: '';
         background: linear-gradient(
           90deg,
           transparent,
           var(--color-neutral-300),
           transparent
         );
-        content: '';
         transform: translateX(-50%);
       }
     }
@@ -70,15 +70,15 @@ import { Container } from '@/components/container';
 
       & .icon {
         display: flex;
-        width: 45px;
-        height: 45px;
         align-items: center;
         justify-content: center;
+        width: 45px;
+        height: 45px;
+        font-size: var(--font-md);
+        color: #fbbf24;
+        background-color: var(--color-neutral-100);
         border: 1px solid var(--color-neutral-300);
         border-radius: 50%;
-        background-color: var(--color-neutral-100);
-        color: #fbbf24;
-        font-size: var(--font-md);
       }
     }
 
@@ -97,23 +97,23 @@ import { Container } from '@/components/container';
 
     & .button {
       display: flex;
-      width: 120px;
-      height: 40px;
       align-items: center;
       justify-content: center;
-      border: none;
-      border-radius: 100px;
-      border-top: 2px solid var(--color-neutral-950);
-      border-bottom: 3px solid var(--color-neutral-600);
+      width: 120px;
+      height: 40px;
       margin: 24px auto 0;
-      background-color: var(--color-neutral-700);
-      color: var(--color-neutral-200);
-      cursor: pointer;
       font-family: var(--font-heading);
       font-size: var(--font-sm);
       line-height: 0;
-      outline: none;
+      color: var(--color-neutral-200);
       text-decoration: none;
+      cursor: pointer;
+      background-color: var(--color-neutral-700);
+      border: none;
+      border-top: 2px solid var(--color-neutral-950);
+      border-bottom: 3px solid var(--color-neutral-600);
+      border-radius: 100px;
+      outline: none;
     }
   }
 </style>
diff --git a/src/components/sections/why.astro b/src/components/sections/why.astro
index 758d7eb..b0f3dc0 100644
--- a/src/components/sections/why.astro
+++ b/src/components/sections/why.astro
@@ -90,8 +90,8 @@ const reasons = [
 
     & .titleWrapper {
       display: flex;
-      align-items: center;
       column-gap: 12px;
+      align-items: center;
 
       & .title {
         margin-bottom: 12px;
@@ -101,8 +101,8 @@ const reasons = [
       }
 
       & .line {
-        height: 1px;
         flex-grow: 1;
+        height: 1px;
         background: linear-gradient(
           90deg,
           var(--color-neutral-300),
@@ -114,23 +114,23 @@ const reasons = [
 
     & .reasons {
       display: grid;
-      margin-top: 24px;
-      column-gap: 20px;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       row-gap: 28px;
+      column-gap: 20px;
+      margin-top: 24px;
 
       & .icon {
         display: flex;
-        width: 40px;
-        height: 40px;
         align-items: center;
         justify-content: center;
+        width: 40px;
+        height: 40px;
+        margin-bottom: 12px;
+        font-size: var(--font-md);
+        color: #34d399;
+        background: linear-gradient(var(--color-neutral-100), transparent);
         border: 1px solid var(--color-neutral-200);
         border-radius: 12px;
-        margin-bottom: 12px;
-        background: linear-gradient(var(--color-neutral-100), transparent);
-        color: #34d399;
-        font-size: var(--font-md);
       }
 
       & .label {
@@ -140,16 +140,16 @@ const reasons = [
       }
 
       & .body {
-        color: var(--color-foreground-subtle);
         line-height: 1.6;
+        color: var(--color-foreground-subtle);
       }
 
       & .link {
         display: block;
         margin-top: 8px;
-        color: var(--color-foreground);
         font-size: var(--font-sm);
         font-weight: 500;
+        color: var(--color-foreground);
         text-decoration: none;
       }
     }
diff --git a/src/components/shuffle/shuffle.module.css b/src/components/shuffle/shuffle.module.css
index d96a653..160f303 100644
--- a/src/components/shuffle/shuffle.module.css
+++ b/src/components/shuffle/shuffle.module.css
@@ -1,17 +1,17 @@
 .button {
   position: fixed;
-  z-index: 99;
   right: 20px;
   bottom: 20px;
+  z-index: 99;
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-300);
-  border-radius: 50%;
-  background-color: var(--color-neutral-100);
+  width: 45px;
+  height: 45px;
+  font-size: var(--font-md);
   color: var(--color-foreground);
   cursor: pointer;
-  font-size: var(--font-md);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 50%;
 }
diff --git a/src/components/snackbar/snackbar.module.css b/src/components/snackbar/snackbar.module.css
index 58c49de..1003306 100644
--- a/src/components/snackbar/snackbar.module.css
+++ b/src/components/snackbar/snackbar.module.css
@@ -1,8 +1,8 @@
 .wrapper {
   position: fixed;
-  z-index: 100;
   bottom: 20px;
   left: 0;
+  z-index: 100;
   width: 100%;
   pointer-events: none;
 
@@ -10,11 +10,11 @@
     width: max-content;
     max-width: 90%;
     padding: 12px 16px;
-    border: 1px solid var(--color-neutral-300);
-    border-radius: 4px;
     margin: 0 auto;
-    background-color: var(--color-neutral-200);
     font-size: var(--font-sm);
     pointer-events: fill;
+    background-color: var(--color-neutral-200);
+    border: 1px solid var(--color-neutral-300);
+    border-radius: 4px;
   }
 }
diff --git a/src/components/sound/favorite/favorite.module.css b/src/components/sound/favorite/favorite.module.css
index edcd560..64ddddb 100644
--- a/src/components/sound/favorite/favorite.module.css
+++ b/src/components/sound/favorite/favorite.module.css
@@ -3,17 +3,17 @@
   top: 10px;
   right: 10px;
   display: flex;
-  width: 30px;
-  height: 30px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 50%;
-  background-color: black;
-  background-color: var(--color-neutral-100);
+  width: 30px;
+  height: 30px;
+  line-height: 0;
   color: var(--color-foreground-subtle);
   cursor: pointer;
-  line-height: 0;
+  background-color: black;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 50%;
   outline: none;
 
   &.isFavorite {
diff --git a/src/components/sound/range/range.module.css b/src/components/sound/range/range.module.css
index 44f3fab..d195001 100644
--- a/src/components/sound/range/range.module.css
+++ b/src/components/sound/range/range.module.css
@@ -7,8 +7,8 @@
 
   /* Range Reset */
   appearance: none;
-  background: transparent;
   cursor: pointer;
+  background: transparent;
 
   /* Removes default focus */
   &:focus {
@@ -16,27 +16,27 @@
   }
 
   &:disabled {
+    pointer-events: none;
     cursor: default;
     opacity: 0.5;
-    pointer-events: none;
   }
 
   /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 
   &::-webkit-slider-runnable-track {
     height: 0.5rem;
-    border-radius: 0.5rem;
     background-color: #27272a;
+    border-radius: 0.5rem;
   }
 
   &::-webkit-slider-thumb {
     width: 14px;
     height: 14px;
-    border: 1px solid #52525b;
-    border-radius: 50%;
     margin-top: -3px;
     appearance: none;
     background-color: #3f3f46;
+    border: 1px solid #52525b;
+    border-radius: 50%;
   }
 
   &:not(:disabled):focus::-webkit-slider-thumb {
@@ -49,19 +49,19 @@
 
   &::-moz-range-track {
     height: 0.5rem;
-    border-radius: 0.5rem;
     background-color: #27272a;
+    border-radius: 0.5rem;
   }
 
   &::-moz-range-thumb {
     width: 14px;
     height: 14px;
+    margin-top: -3px;
+    background-color: #3f3f46;
     border: none;
     border: 1px solid #52525b;
     border-radius: 0;
     border-radius: 50%;
-    margin-top: -3px;
-    background-color: #3f3f46;
   }
 
   &:not(:disabled):focus::-moz-range-thumb {
diff --git a/src/components/sound/sound.module.css b/src/components/sound/sound.module.css
index 7f3383e..17dcb75 100644
--- a/src/components/sound/sound.module.css
+++ b/src/components/sound/sound.module.css
@@ -5,10 +5,10 @@
   align-items: center;
   justify-content: center;
   padding: 25px 20px;
+  text-align: center;
+  background: linear-gradient(var(--color-neutral-100), transparent);
   border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
-  background: linear-gradient(var(--color-neutral-100), transparent);
-  text-align: center;
   transition: 0.2s;
 
   &.hidden {
@@ -21,59 +21,59 @@
     left: 0;
     width: 100%;
     height: 1px;
+    content: '';
     background: linear-gradient(
       90deg,
       transparent,
       var(--color-neutral-400),
       transparent
     );
-    content: '';
   }
 
   & .icon {
     position: relative;
     z-index: 2;
     display: flex;
-    width: 40px;
-    height: 40px;
     align-items: center;
     justify-content: center;
+    width: 40px;
+    height: 40px;
     font-size: var(--font-base);
     transition: 0.2s;
 
     &::after {
       position: absolute;
-      z-index: -1;
       top: 0;
       left: 0;
+      z-index: -1;
       width: 100%;
       height: 100%;
-      border-radius: 50%;
-      background-color: var(--color-neutral-50);
       content: '';
+      background-color: var(--color-neutral-50);
+      border-radius: 50%;
     }
 
     &::before {
       position: absolute;
-      z-index: -2;
       top: -1px;
       left: -1px;
+      z-index: -2;
       width: calc(100% + 2px);
       height: calc(100% + 2px);
-      border-radius: 50%;
+      content: '';
       background: linear-gradient(
         var(--color-neutral-300),
         var(--color-neutral-100)
       );
-      content: '';
+      border-radius: 50%;
     }
 
     & .spinner {
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-name: spinner;
-      animation-timing-function: linear;
       line-height: 0;
+      animation-name: spinner;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
     }
   }
 
@@ -90,11 +90,11 @@
 
   & h3 {
     margin-top: 8px;
-    cursor: default;
     font-family: var(--font-heading);
     font-size: var(--font-sm);
     font-weight: 600;
     line-height: 1.6;
+    cursor: default;
   }
 }
 
diff --git a/src/components/sounds/sounds.module.css b/src/components/sounds/sounds.module.css
index f22ee8f..430cb62 100644
--- a/src/components/sounds/sounds.module.css
+++ b/src/components/sounds/sounds.module.css
@@ -1,25 +1,25 @@
 .sounds {
   display: grid;
-  margin-top: 20px;
-  gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
 }
 
 .button {
   position: relative;
   display: flex;
-  width: max-content;
-  height: 35px;
   align-items: center;
   justify-content: center;
+  width: max-content;
+  height: 35px;
   padding: 0 15px;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 50px;
   margin: 25px auto 0;
-  background-color: var(--color-neutral-50);
+  font-size: var(--font-xsm);
   color: var(--color-neutral-subtle);
   cursor: pointer;
-  font-size: var(--font-xsm);
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 50px;
 
   &::before {
     position: absolute;
@@ -27,13 +27,13 @@
     left: 50%;
     width: 70%;
     height: 1px;
+    content: '';
     background: linear-gradient(
       90deg,
       transparent,
       var(--color-neutral-300),
       transparent
     );
-    content: '';
     transform: translateX(-50%);
   }
 
@@ -43,8 +43,8 @@
     right: 0;
     width: 8px;
     height: 8px;
-    border-radius: 50%;
-    background-color: #34d399;
     content: '';
+    background-color: #34d399;
+    border-radius: 50%;
   }
 }
diff --git a/src/components/tooltip/tooltip.module.css b/src/components/tooltip/tooltip.module.css
index e319e38..f48430d 100644
--- a/src/components/tooltip/tooltip.module.css
+++ b/src/components/tooltip/tooltip.module.css
@@ -1,8 +1,8 @@
 .tooltip {
   width: max-content;
   padding: 6px 12px;
+  font-size: var(--font-xsm);
+  background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-200);
   border-radius: 100px;
-  background-color: var(--color-neutral-100);
-  font-size: var(--font-xsm);
 }
diff --git a/src/styles/base/base.css b/src/styles/base/base.css
index 0bfb8db..5981cc2 100644
--- a/src/styles/base/base.css
+++ b/src/styles/base/base.css
@@ -12,13 +12,13 @@ html {
 }
 
 body {
-  background-color: var(--color-neutral-50);
-  color: var(--color-foreground);
   font-family: var(--font-body);
   font-size: var(--font-base);
+  color: var(--color-foreground);
+  background-color: var(--color-neutral-50);
 }
 
 ::selection {
-  background-color: var(--color-neutral-300);
   color: var(--color-foreground);
+  background-color: var(--color-neutral-300);
 }
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
index 283a44b..083d45a 100644
--- a/src/styles/fonts.css
+++ b/src/styles/fonts.css
@@ -1,35 +1,35 @@
 /* fraunces-600 - latin */
 @font-face {
-  font-display: swap;
   font-family: Fraunces;
   font-style: normal;
   font-weight: 600;
   src: url('/fonts/fraunces-v31-latin-600.woff2') format('woff2');
+  font-display: swap;
 }
 
 /* inter-regular - latin */
 @font-face {
-  font-display: swap;
   font-family: Inter;
   font-style: normal;
   font-weight: 400;
   src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
+  font-display: swap;
 }
 
 /* inter-500 - latin */
 @font-face {
-  font-display: swap;
   font-family: Inter;
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/inter-v13-latin-500.woff2') format('woff2');
+  font-display: swap;
 }
 
 /* inter-tight-600 - latin */
 @font-face {
-  font-display: swap;
   font-family: 'Inter Tight';
   font-style: normal;
   font-weight: 600;
   src: url('/fonts/inter-tight-v7-latin-600.woff2') format('woff2');
+  font-display: swap;
 }