Refactor Saas naming, structure and modules

- Add more documentation.
- Use `main.scss` instead of importing components individually. This
  improves productivity without compilation errors due to missing
  imports and allows for easier future file/folder changes and
  refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
  files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
  overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
  syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
  folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
  using `App.vue`.

src/presentation/assets/styles/third-party-extensions/_tooltip.scss

@@ -0,0 +1,45 @@
+// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
+@use "@/presentation/assets/styles/colors" as *;
+
+.tooltip {
+    display: block !important;
+    z-index: 10000;
+    .tooltip-inner {
+      background: $color-primary-darkest;
+      color: $color-on-primary;
+      border-radius: 16px;
+      padding: 5px 10px 4px;
+    }
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $color-primary-darkest;
+      z-index: 1;
+    }
+    &[x-placement^="top"] {
+      margin-bottom: 5px;
+      .tooltip-arrow {
+        border-width: 5px 5px 0 5px;
+        border-left-color: transparent !important;
+        border-right-color: transparent !important;
+        border-bottom-color: transparent !important;
+        bottom: -5px;
+        left: calc(50% - 5px);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+    &[aria-hidden='true'] {
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity .15s, visibility .15s;
+    }
+    &[aria-hidden='false'] {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity .15s;
+    }
+  }

src/presentation/assets/styles/third-party-extensions/_tree.scss

@@ -0,0 +1,58 @@
+// Overrides base styling for LiquorTree
+@use "@/presentation/assets/styles/colors" as *;
+
+$color-tree-bg                          : $color-primary-darker;
+$color-node-arrow                       : $color-on-primary;
+$color-node-fg                          : $color-on-primary;
+$color-node-hover-bg                    : $color-primary-dark;
+$color-node-keyboard-bg                 : $color-surface;
+$color-node-keyboard-fg                 : $color-on-surface;
+$color-node-checkbox-bg-checked         : $color-secondary;
+$color-node-checkbox-bg-unchecked       : $color-primary-darkest;
+$color-node-checkbox-border-checked     : $color-secondary;
+$color-node-checkbox-border-unchecked   : $color-on-primary;
+$color-node-checkbox-tick-checked       : $color-on-secondary;
+
+.tree {
+    background: $color-tree-bg;
+    &-node { 
+        white-space: normal !important;
+        > .tree-content {
+            > .tree-anchor > span {
+                color: $color-node-fg;
+                text-transform: uppercase;
+                font-size: 1.5em;
+            }
+            &:hover {
+                background: $color-node-hover-bg !important;
+            }
+        }
+        &.selected { // When using keyboard navigation it highlights current item and its child items
+            background: $color-node-keyboard-bg;
+            .tree-text {
+                color: $color-node-keyboard-fg !important; //  $block
+            }
+        }
+    }
+    &-checkbox {
+        border-color: $color-node-checkbox-border-unchecked !important;
+        &.checked {
+            background: $color-node-checkbox-bg-checked !important;
+            border-color: $color-node-checkbox-border-checked !important;
+            &:after {
+                border-color: $color-node-checkbox-tick-checked !important;
+            }
+        }
+        &.indeterminate {
+            border-color: $color-node-checkbox-border-unchecked !important;
+        }
+        background: $color-node-checkbox-bg-unchecked !important;
+    }
+    &-arrow {
+        &.has-child {
+            &.rtl:after, &:after {
+                border-color: $color-node-arrow !important;
+            }
+        }
+    }
+}