clean up styles

src/components/ThemeToggle.astro

@@ -14,18 +14,20 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
 </div>
 
 <style lang="scss">
+  @use "../styles/variables.scss" as *;
+
   .toggles {
     padding: 1rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 12px;
-  }
 
-  .toggles > div {
-    display: flex;
-    align-items: center;
-    gap: 4px;
+    div {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
   }
 
   input {
@@ -36,26 +38,26 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
     padding: 10px;
     background-color: var(--orange);
     border-radius: 120px;
-  }
 
-  input:checked {
-    background-color: var(--sky);
-  }
+    &:checked {
+      background-color: var(--sky);
+    }
 
-  input::after {
-    content: "";
-    position: absolute;
-    height: 22px;
-    width: 22px;
-    border-radius: 100%;
-    background-color: var(--background);
-    left: 1px;
-    top: 1px;
-    transition: all 0.1s ease-in-out;
-  }
+    &:after {
+      content: "";
+      position: absolute;
+      height: 22px;
+      width: 22px;
+      border-radius: 100%;
+      background-color: var(--background);
+      left: 1px;
+      top: 1px;
+      transition: $quick-transition;
+    }
 
-  input:checked:after {
-    left: 15px;
+    &:checked:after {
+      left: 15px;
+    }
   }
 
   @media (max-width: 516px) {