Refactor styles to match new CSS nesting behavior

This commit refactors SCSS to resolve deprecation warnings related to
mixed declaration after nested rules.

Sass is changing how it processes declarations that appear after nested
rules to align with CSS standards. Previously, Sass would hoist
declarations to avoid duplicating selectors, However, this behavior will
soon change to make declarations apply in the order they appear, as per
CSS standards.

src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue

@@ -110,8 +110,9 @@ export default defineComponent({
   @include apply-icon-color($color-danger);
 }
 .recommendation {
+  align-items: center;
+
   @include horizontal-stack;
   @include apply-icon-color($color-caution);
-  align-items: center;
 }
 </style>

src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue

@@ -68,9 +68,11 @@ export default defineComponent({
   @include horizontal-stack;
   @include apply-icon-color($color-caution);
 }
+
 .description {
+  align-items: center;
+
   @include horizontal-stack;
   @include apply-icon-color($color-success);
-  align-items: center;
 }
 </style>

src/presentation/components/Scripts/Slider/SliderHandle.vue

@@ -58,8 +58,19 @@ $color-hover    : $color-primary;
 $cursor         : v-bind(cursorCssValue);
 
 .handle {
+  cursor: $cursor;
+
   @include reset-button;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-right: $spacing-absolute-small;
+  margin-left: $spacing-absolute-small;
+
   @include clickable($cursor: $cursor);
+
   @include hover-or-touch {
     .line {
       background: $color-hover;
@@ -68,11 +79,7 @@ $cursor         : v-bind(cursorCssValue);
       color: $color-hover;
     }
   }
-  cursor: $cursor;
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   .line {
     flex: 1;
     background: $color;
@@ -81,7 +88,5 @@ $cursor         : v-bind(cursorCssValue);
   .icon {
     color: $color;
   }
-  margin-right: $spacing-absolute-small;
-  margin-left: $spacing-absolute-small;
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue

@@ -78,17 +78,20 @@ export default defineComponent({
     }
   }
   .docs {
+    color: $color-on-primary;
     background: $color-primary-darkest;
+
     margin-left: $spacing-absolute-small;
     margin-top: $spacing-relative-x-small;
-    color: $color-on-primary;
-    text-transform: none;
     padding: $spacing-absolute-medium;
+
+    text-transform: none;
+    cursor: auto;
+    user-select: text;
+
     &-collapsed {
       display: none;
     }
-    cursor: auto;
-    user-select: text;
   }
 }
 </style>

src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue

@@ -133,14 +133,14 @@ export default defineComponent({
 .expansible-node {
   display: flex;
   flex-direction: row;
+
+  align-items: center;
+
   .leaf-node {
     flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
     overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
   }
 
-  flex-direction: row;
-  align-items: center;
-
   .expand-collapse-caret {
     $caret-size: 24px;
     $padding-right: $spacing-absolute-small;