restruct: updated sass version and rules

src/components/StationsView/FilterOption.vue

@@ -66,8 +66,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 label {
   position: relative;
   user-select: none;
@@ -98,7 +96,7 @@ label {
     }
 
     &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
     }
   }
 }

src/components/StationsView/StationFilterCard.vue

@@ -379,10 +379,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/card';
-@import '../../styles/animations';
-@import '../../styles/variables';
+@use '../../styles/responsive';
+@use '../../styles/card';
+@use '../../styles/animations';
 
 h3.section-header {
   text-align: center;
@@ -432,7 +431,7 @@ h3.section-header {
 .card_title {
   font-size: 2em;
   font-weight: 700;
-  color: $accentCol;
+  color: var(--clr-primary);
 
   text-align: center;
 }
@@ -453,7 +452,7 @@ h3.section-header {
     span {
       min-width: 120px;
       font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
     }
 
     button {
@@ -527,7 +526,7 @@ h3.section-header {
     }
 
     &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
     }
   }
 }
@@ -575,7 +574,7 @@ h3.section-header {
   margin-bottom: 1em;
 
   &-value {
-    color: $accentCol;
+    color: var(--clr-primary);
     padding: 0.1em 0.2em;
     text-align: center;
   }
@@ -604,14 +603,14 @@ h3.section-header {
       border-radius: 50%;
 
       background: white;
-      border: 3px solid $accentCol;
+      border: 3px solid var(--clr-primary);
       background-color: #333;
 
-      @include smallScreen() {
+      @include responsive.smallScreen{
         width: 15px;
         height: 15px;
         margin-top: -5px;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
       }
     }
 
@@ -622,14 +621,14 @@ h3.section-header {
       border-radius: 50%;
 
       background: white;
-      border: 4px solid $accentCol;
+      border: 4px solid var(--clr-primary);
 
       cursor: pointer;
 
-      @include smallScreen() {
+      @include responsive.smallScreen{
         width: 1em;
         height: 1em;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
       }
     }
 
@@ -659,7 +658,7 @@ h3.section-header {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .slider {
     display: flex;
     flex-wrap: wrap;

src/components/StationsView/StationStats.vue

@@ -190,8 +190,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/dropdown';
+@use '../../styles/badge';
+@use '../../styles/responsive';
 
 h1 img {
   vertical-align: text-bottom;
@@ -229,7 +230,7 @@ ul.stats-list {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .filter-button span {
     display: none;
   }

src/components/StationsView/StationTable.vue

@@ -400,9 +400,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/icons.scss';
+@use '../../styles/responsive';
+@use '../../styles/icons';
 
 $rowCol: #424242;
 
@@ -435,7 +434,7 @@ table {
   }
 
   thead tr {
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
   }
 
   thead th {
@@ -477,7 +476,7 @@ table {
     }
 
     padding: 0.5em 0.25em;
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
     white-space: pre-wrap;
 
     cursor: pointer;
@@ -524,7 +523,7 @@ tr,
       opacity: 0.2;
     }
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       margin: 0;
       padding: 0.3em 0.5em;
       font-size: 1em;
@@ -537,7 +536,7 @@ tr,
   max-width: 200px;
 
   &.default {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 
   &.nonPublic {