routie dev init since i didn't adhere to any proper guidance up until now

2026-04-29 22:27:29 -06:00
commit e1dabb71e2
15301 changed files with 3562618 additions and 0 deletions
@@ -0,0 +1 @@
+@use './generic/colors';
@@ -0,0 +1,618 @@
+@layer vuetify-core {
+  @layer reset, base;
+}
+@layer vuetify-components;
+@layer vuetify-overrides;
+@layer vuetify-utilities {
+  @layer theme-base;
+  @layer typography;
+  @layer helpers;
+  @layer theme-background;
+  @layer theme-foreground;
+}
+@layer vuetify-final {
+  @layer transitions, trumps;
+}
+@layer vuetify-final.transitions {
+  @keyframes v-shake {
+    59% {
+      margin-left: 0;
+    }
+    60%, 80% {
+      margin-left: 2px;
+    }
+    70%, 90% {
+      margin-left: -2px;
+    }
+  }
+}
+@layer vuetify-core.reset {
+  html {
+    box-sizing: border-box;
+    /* Prevent adjustments of font size after orientation changes in iOS */
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    margin: 0;
+  }
+  body {
+    margin: 0;
+  }
+  *,
+  ::before,
+  ::after {
+    background-repeat: no-repeat;
+    box-sizing: inherit;
+  }
+  ::before,
+  ::after {
+    text-decoration: inherit;
+    vertical-align: inherit;
+  }
+  input {
+    border-radius: 0;
+  }
+  /* Replace pointer cursor in disabled elements */
+  [disabled] {
+    cursor: default;
+  }
+  [type=number]::-webkit-inner-spin-button,
+  [type=number]::-webkit-outer-spin-button {
+    /* Correct the cursor style of increment and decrement buttons in Chrome */
+    height: auto;
+  }
+  [type=search] {
+    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+    outline-offset: -2px; /* Correct the outline style in Safari */
+  }
+  [type=search]::-webkit-search-cancel-button,
+  [type=search]::-webkit-search-decoration {
+    /* Remove the inner padding in Chrome and Safari on macOS */
+    -webkit-appearance: none;
+  }
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font: inherit;
+  }
+  optgroup {
+    /* Restore the font weight unset by the previous rule */
+    font-weight: bold;
+  }
+  /* Apply cursor pointer to button elements */
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit],
+  [role=button] {
+    cursor: pointer;
+    color: inherit;
+  }
+  /* Specify the progress cursor of updating elements */
+  [aria-busy=true] {
+    cursor: progress;
+  }
+  /* Specify the pointer cursor of trigger elements */
+  [aria-controls] {
+    cursor: pointer;
+  }
+  /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+  [aria-disabled=true] {
+    cursor: default;
+  }
+}
+@layer vuetify-final.transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    .dialog-transition-enter-active,
+    .dialog-bottom-transition-enter-active,
+    .dialog-top-transition-enter-active {
+      transition-duration: 225ms;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+    .dialog-transition-leave-active,
+    .dialog-bottom-transition-leave-active,
+    .dialog-top-transition-leave-active {
+      transition-duration: 125ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    }
+    .dialog-transition-enter-active, .dialog-transition-leave-active,
+    .dialog-bottom-transition-enter-active,
+    .dialog-bottom-transition-leave-active,
+    .dialog-top-transition-enter-active,
+    .dialog-top-transition-leave-active {
+      transition-property: transform, opacity;
+      pointer-events: none;
+    }
+    .dialog-transition-enter-from, .dialog-transition-leave-to {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    .dialog-transition-enter-to, .dialog-transition-leave-from {
+      opacity: 1;
+    }
+    .dialog-bottom-transition-enter-from, .dialog-bottom-transition-leave-to {
+      transform: translateY(calc(50vh + 50%));
+    }
+    .dialog-top-transition-enter-from, .dialog-top-transition-leave-to {
+      transform: translateY(calc(-50vh - 50%));
+    }
+    .picker-transition-enter-active,
+    .picker-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-transition-leave-active,
+    .picker-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-transition-move,
+    .picker-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-transition-enter-from, .picker-transition-leave-to,
+    .picker-reverse-transition-enter-from,
+    .picker-reverse-transition-leave-to {
+      opacity: 0;
+    }
+    .picker-transition-leave-from, .picker-transition-leave-active, .picker-transition-leave-to,
+    .picker-reverse-transition-leave-from,
+    .picker-reverse-transition-leave-active,
+    .picker-reverse-transition-leave-to {
+      position: absolute;
+    }
+    .picker-transition-enter-active, .picker-transition-leave-active,
+    .picker-reverse-transition-enter-active,
+    .picker-reverse-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .picker-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-transition-enter-from {
+      transform: translate(100%, 0);
+    }
+    .picker-transition-leave-to {
+      transform: translate(-100%, 0);
+    }
+    .picker-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .picker-reverse-transition-enter-from {
+      transform: translate(-100%, 0);
+    }
+    .picker-reverse-transition-leave-to {
+      transform: translate(100%, 0);
+    }
+    .expand-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-transition-enter-active, .expand-transition-leave-active {
+      transition-property: height;
+    }
+    .expand-x-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-x-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-x-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-x-transition-enter-active, .expand-x-transition-leave-active {
+      transition-property: width;
+    }
+    .expand-both-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-both-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-both-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .expand-both-transition-enter-active, .expand-both-transition-leave-active {
+      transition-property: height, width !important;
+    }
+    .scale-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-transition-leave-to {
+      opacity: 0;
+    }
+    .scale-transition-leave-active {
+      transition-duration: 100ms;
+    }
+    .scale-transition-enter-from {
+      opacity: 0;
+      transform: scale(0);
+    }
+    .scale-transition-enter-active, .scale-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .scale-rotate-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-rotate-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-rotate-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-rotate-transition-leave-to {
+      opacity: 0;
+    }
+    .scale-rotate-transition-leave-active {
+      transition-duration: 100ms;
+    }
+    .scale-rotate-transition-enter-from {
+      opacity: 0;
+      transform: scale(0) rotate(-45deg);
+    }
+    .scale-rotate-transition-enter-active, .scale-rotate-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .scale-rotate-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-rotate-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-rotate-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scale-rotate-reverse-transition-leave-to {
+      opacity: 0;
+    }
+    .scale-rotate-reverse-transition-leave-active {
+      transition-duration: 100ms;
+    }
+    .scale-rotate-reverse-transition-enter-from {
+      opacity: 0;
+      transform: scale(0) rotate(45deg);
+    }
+    .scale-rotate-reverse-transition-enter-active, .scale-rotate-reverse-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .message-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .message-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .message-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .message-transition-enter-from, .message-transition-leave-to {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
+    .message-transition-leave-from, .message-transition-leave-active {
+      position: absolute;
+    }
+    .message-transition-enter-active, .message-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .slide-y-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-y-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-y-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-y-transition-enter-from, .slide-y-transition-leave-to {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
+    .slide-y-transition-enter-active, .slide-y-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .slide-y-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-y-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-y-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-y-reverse-transition-enter-from, .slide-y-reverse-transition-leave-to {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+    .slide-y-reverse-transition-enter-active, .slide-y-reverse-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .scroll-y-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-y-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-y-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-y-transition-enter-from, .scroll-y-transition-leave-to {
+      opacity: 0;
+    }
+    .scroll-y-transition-enter-from {
+      transform: translateY(-15px);
+    }
+    .scroll-y-transition-leave-to {
+      transform: translateY(15px);
+    }
+    .scroll-y-transition-enter-active, .scroll-y-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .scroll-y-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-y-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-y-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-y-reverse-transition-enter-from, .scroll-y-reverse-transition-leave-to {
+      opacity: 0;
+    }
+    .scroll-y-reverse-transition-enter-from {
+      transform: translateY(15px);
+    }
+    .scroll-y-reverse-transition-leave-to {
+      transform: translateY(-15px);
+    }
+    .scroll-y-reverse-transition-enter-active, .scroll-y-reverse-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .scroll-x-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-x-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-x-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-x-transition-enter-from, .scroll-x-transition-leave-to {
+      opacity: 0;
+    }
+    .scroll-x-transition-enter-from {
+      transform: translateX(-15px);
+    }
+    .scroll-x-transition-leave-to {
+      transform: translateX(15px);
+    }
+    .scroll-x-transition-enter-active, .scroll-x-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .scroll-x-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-x-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-x-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .scroll-x-reverse-transition-enter-from, .scroll-x-reverse-transition-leave-to {
+      opacity: 0;
+    }
+    .scroll-x-reverse-transition-enter-from {
+      transform: translateX(15px);
+    }
+    .scroll-x-reverse-transition-leave-to {
+      transform: translateX(-15px);
+    }
+    .scroll-x-reverse-transition-enter-active, .scroll-x-reverse-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .slide-x-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-x-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-x-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-x-transition-enter-from, .slide-x-transition-leave-to {
+      opacity: 0;
+      transform: translateX(-15px);
+    }
+    .slide-x-transition-enter-active, .slide-x-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .slide-x-reverse-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-x-reverse-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-x-reverse-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .slide-x-reverse-transition-enter-from, .slide-x-reverse-transition-leave-to {
+      opacity: 0;
+      transform: translateX(15px);
+    }
+    .slide-x-reverse-transition-enter-active, .slide-x-reverse-transition-leave-active {
+      transition-property: transform, opacity;
+    }
+    .fade-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .fade-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .fade-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .fade-transition-enter-from, .fade-transition-leave-to {
+      opacity: 0;
+    }
+    .fade-transition-enter-active, .fade-transition-leave-active {
+      transition-property: opacity;
+    }
+    .fab-transition-enter-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .fab-transition-leave-active {
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .fab-transition-move {
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .fab-transition-enter-from, .fab-transition-leave-to {
+      transform: scale(0) rotate(-45deg);
+    }
+    .fab-transition-enter-active, .fab-transition-leave-active {
+      transition-property: transform;
+    }
+  }
+}
+@layer vuetify-core.base {
+  .v-locale--is-rtl {
+    direction: rtl;
+  }
+  .v-locale--is-ltr {
+    direction: ltr;
+  }
+}
+@layer vuetify-components {
+  .blockquote {
+    margin: 0;
+    padding: 16px 0 16px 24px;
+    font-size: 18px;
+    font-weight: 300;
+  }
+}
+@layer vuetify-core.base {
+  html {
+    font-family: var(--v-font-body, "Roboto", sans-serif);
+    line-height: 1.5;
+    font-size: 1rem;
+    overflow-x: hidden;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+  html.overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  :root {
+    --v-theme-overlay-multiplier: 1;
+    --v-scrollbar-offset: 0px;
+  }
+  @supports (-webkit-touch-callout: none) {
+    body {
+      cursor: pointer;
+    }
+  }
+}
@@ -0,0 +1,10 @@
+@forward './settings';
+
+@use './generic/layers';
+@use './generic/animations';
+@use './generic/reset';
+@use './generic/transitions';
+@use './generic/rtl';
+
+@use './elements/blockquote';
+@use './elements/global';
@@ -0,0 +1,9 @@
+@use '../settings'
+@use '../tools'
+
+@include tools.layer('components')
+  .blockquote
+    margin: 0
+    padding: settings.$spacer*4 0 settings.$spacer*4 settings.$spacer*6
+    font-size: settings.$blockquote-font-size
+    font-weight: settings.$blockquote-font-weight
@@ -0,0 +1,25 @@
+@use '../settings'
+@use '../tools'
+
+@include tools.layer('core.base')
+  html
+    font-family: settings.$body-font-family
+    line-height: settings.$line-height-root
+    font-size: settings.$font-size-root
+    overflow-x: hidden
+    text-rendering: optimizeLegibility
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+  html.overflow-y-hidden
+    overflow-y: hidden
+
+  :root
+    --v-theme-overlay-multiplier: 1
+    --v-scrollbar-offset: 0px
+
+  // iOS Safari hack to allow click events on body
+  @supports (-webkit-touch-callout: none)
+    body
+      cursor: pointer
@@ -0,0 +1,2 @@
+@use './blockquote'
+@use './global'
@@ -0,0 +1,17 @@
+@use '../tools';
+
+@include tools.layer('transitions') {
+  @keyframes v-shake {
+    59% {
+      margin-left: 0;
+    }
+
+    60%, 80% {
+      margin-left: 2px;
+    }
+
+    70%, 90% {
+      margin-left: -2px;
+    }
+  }
+}
@@ -0,0 +1,81 @@
+@use 'sass:map';
+@use '../settings';
+@use '../settings/colors';
+@use '../tools';
+@use '../tools/functions' as *;
+
+@mixin background-color($color_value) {
+  & {
+    background-color: $color_value;
+  }
+}
+@mixin text-color($color_value) {
+  & {
+    color: $color_value;
+  }
+}
+@mixin background-text-color($color_name, $color_type) {
+  $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
+
+  & {
+    color: $map_value;
+  }
+}
+
+@if (settings.$color-pack) {
+  @include tools.layer('utilities.theme-background') {
+    @each $color_name, $color_value in colors.$shades {
+      .bg-#{$color_name} {
+        @include background-color($color_value);
+
+        @if (map.has-key(colors.$text-on-colors, 'shades')) {
+          @include background-text-color('shades', $color_name);
+        }
+      }
+    }
+
+    @each $color_name, $color_color in colors.$colors {
+      @each $color_type, $color_value in $color_color {
+        @if ($color_type == 'base') {
+          .bg-#{$color_name} {
+            @include background-color($color_value);
+
+            @if (map.has-key(colors.$text-on-colors, $color_name)) {
+              @include background-text-color($color_name, $color_type);
+            }
+          }
+        } @else if ($color_type != 'shades') {
+          .bg-#{$color_name}-#{$color_type} {
+            @include background-color($color_value);
+
+            @if (map.has-key(colors.$text-on-colors, $color_name)) {
+              @include background-text-color($color_name, $color_type);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include tools.layer('utilities.theme-foreground') {
+    @each $color_name, $color_value in colors.$shades {
+      .text-#{$color_name} {
+        @include text-color($color_value);
+      }
+    }
+
+    @each $color_name, $color_color in colors.$colors {
+      @each $color_type, $color_value in $color_color {
+        @if ($color_type == 'base') {
+          .text-#{$color_name} {
+            @include text-color($color_value);
+          }
+        } @else if ($color_type != 'shades') {
+          .text-#{$color_name}-#{$color_type} {
+            @include text-color($color_value);
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,7 @@
+@use './layers';
+@use './animations';
+@use './theme';
+@use './colors';
+@use './reset';
+@use './transitions';
+@use './rtl';
@@ -0,0 +1,24 @@
+@use '../settings';
+
+@layer vuetify-core {
+  @layer reset, base;
+}
+
+@layer vuetify-components;
+
+// Contextual styles for nested components
+// This replaces hacks like .v-btn.v-btn and most of !important
+@layer vuetify-overrides;
+
+@layer vuetify-utilities {
+  @layer theme-base;
+  @layer typography;
+  @layer helpers;
+  @layer theme-background;
+  @layer theme-foreground;
+}
+
+// Rules that need to override theme or utils
+@layer vuetify-final {
+  @layer transitions, trumps;
+};
@@ -0,0 +1,96 @@
+@use '../settings';
+@use '../tools';
+
+@if (settings.$reset) {
+  @include tools.layer('core.reset') {
+    html {
+      box-sizing: border-box;
+      /* Prevent adjustments of font size after orientation changes in iOS */
+      -webkit-text-size-adjust: 100%;
+      tab-size: 4;
+      margin: 0;
+    }
+
+    body {
+      margin: 0;
+    }
+
+    *,
+    ::before,
+    ::after {
+      background-repeat: no-repeat;
+      box-sizing: inherit;
+    }
+
+    ::before,
+    ::after {
+      text-decoration: inherit;
+      vertical-align: inherit;
+    }
+
+
+    input {
+      border-radius: 0;
+    }
+
+    /* Replace pointer cursor in disabled elements */
+    [disabled] {
+      cursor: default;
+    }
+
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+      /* Correct the cursor style of increment and decrement buttons in Chrome */
+      height: auto;
+    }
+
+    [type="search"] {
+      -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+      outline-offset: -2px; /* Correct the outline style in Safari */
+    }
+
+    [type="search"]::-webkit-search-cancel-button,
+    [type="search"]::-webkit-search-decoration {
+      /* Remove the inner padding in Chrome and Safari on macOS */
+      -webkit-appearance: none;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      font: inherit;
+    }
+
+    optgroup {
+      /* Restore the font weight unset by the previous rule */
+      font-weight: bold;
+    }
+
+    /* Apply cursor pointer to button elements */
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"],
+    [role="button"] {
+      cursor: pointer;
+      color: inherit;
+    }
+
+    /* Specify the progress cursor of updating elements */
+    [aria-busy="true"] {
+      cursor: progress;
+    }
+
+    /* Specify the pointer cursor of trigger elements */
+    [aria-controls] {
+      cursor: pointer;
+    }
+
+    /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+    [aria-disabled="true"] {
+      cursor: default;
+    }
+  }
+}
@@ -0,0 +1,13 @@
+@use '../tools';
+
+@include tools.layer('core.base') {
+  .v-locale {
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+  }
+}
@@ -0,0 +1,10 @@
+@use '../tools';
+
+@include tools.layer('utilities.theme-base') {
+  .v-theme-on-light {
+    color: rgb(var(--v-theme-on-light));
+  }
+  .v-theme-on-dark {
+    color: rgb(var(--v-theme-on-dark));
+  }
+}
@@ -0,0 +1,378 @@
+@use '../settings';
+@use '../tools';
+
+@mixin transition-default() {
+  &-enter-active {
+    transition-duration: settings.$transition-duration-root;
+    transition-timing-function: settings.$standard-easing;
+  }
+
+  &-leave-active {
+    transition-duration: settings.$transition-duration-root;
+    transition-timing-function: settings.$standard-easing;
+  }
+
+  &-move {
+    transition-duration: settings.$transition-move-duration-root;
+    transition-property: transform;
+    transition-timing-function: settings.$standard-easing;
+  }
+}
+@mixin fade-out() {
+  &-leave-to {
+    opacity: 0;
+  }
+  &-leave-active {
+    transition-duration: 100ms;
+  }
+}
+
+@include tools.layer('transitions') {
+  @media (prefers-reduced-motion: no-preference) {
+    // Component specific transitions
+    .dialog-transition,
+    .dialog-bottom-transition,
+    .dialog-top-transition {
+      &-enter-active {
+        transition-duration: 225ms;
+        transition-timing-function: settings.$decelerated-easing;
+      }
+
+      &-leave-active {
+        transition-duration: 125ms;
+        transition-timing-function: settings.$accelerated-easing;
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+        pointer-events: none;
+      }
+    }
+
+    .dialog-transition {
+      &-enter-from, &-leave-to {
+        transform: scale(0.9);
+        opacity: 0;
+      }
+
+      &-enter-to, &-leave-from {
+        opacity: 1;
+      }
+    }
+
+    .dialog-bottom-transition {
+      &-enter-from, &-leave-to {
+        transform: translateY(calc(50vh + 50%));
+      }
+    }
+
+    .dialog-top-transition {
+      &-enter-from, &-leave-to {
+        transform: translateY(calc(-50vh - 50%));
+      }
+    }
+
+    .picker-transition,
+    .picker-reverse-transition {
+      @include transition-default();
+
+      &-enter-from,
+      &-leave-to {
+        opacity: 0;
+      }
+
+      &-leave-from,
+      &-leave-active,
+      &-leave-to {
+        position: absolute;
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .picker-transition {
+      @include transition-default();
+
+      &-enter-from {
+        transform: translate(100%, 0);
+      }
+
+      &-leave-to {
+        transform: translate(-100%, 0);
+      }
+    }
+
+    .picker-reverse-transition {
+      @include transition-default();
+
+      &-enter-from {
+        transform: translate(-100%, 0);
+      }
+
+      &-leave-to {
+        transform: translate(100%, 0);
+      }
+    }
+
+    // Generic transitions
+    .expand-transition {
+      @include transition-default();
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: height;
+      }
+    }
+
+    .expand-x-transition {
+      @include transition-default();
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: width;
+      }
+    }
+
+    .expand-both-transition {
+      @include transition-default();
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: height, width !important;
+      }
+    }
+
+    .scale-transition {
+      @include transition-default();
+      @include fade-out();
+
+      &-enter-from {
+        opacity: 0;
+        transform: scale(0);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .scale-rotate-transition {
+      @include transition-default();
+      @include fade-out();
+
+      &-enter-from {
+        opacity: 0;
+        transform: scale(0) rotate(-45deg);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .scale-rotate-reverse-transition {
+      @include transition-default();
+      @include fade-out();
+
+      &-enter-from {
+        opacity: 0;
+        transform: scale(0) rotate(45deg);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .message-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+        transform: translateY(-15px);
+      }
+
+      &-leave-from, &-leave-active {
+        position: absolute;
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .slide-y-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+        transform: translateY(-15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .slide-y-reverse-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+        transform: translateY(15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .scroll-y-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+      }
+
+      &-enter-from {
+        transform: translateY(-15px);
+      }
+
+      &-leave-to {
+        transform: translateY(15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .scroll-y-reverse-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+      }
+
+      &-enter-from {
+        transform: translateY(15px);
+      }
+
+      &-leave-to {
+        transform: translateY(-15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .scroll-x-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+      }
+
+      &-enter-from {
+        transform: translateX(-15px);
+      }
+
+      &-leave-to {
+        transform: translateX(15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .scroll-x-reverse-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+      }
+
+      &-enter-from {
+        transform: translateX(15px);
+      }
+
+      &-leave-to {
+        transform: translateX(-15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .slide-x-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+        transform: translateX(-15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .slide-x-reverse-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+        transform: translateX(15px);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform, opacity;
+      }
+    }
+
+    .fade-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        opacity: 0;
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: opacity;
+      }
+    }
+
+    .fab-transition {
+      @include transition-default();
+
+      &-enter-from, &-leave-to {
+        transform: scale(0) rotate(-45deg);
+      }
+
+      &-enter-active,
+      &-leave-active {
+        transition-property: transform;
+      }
+    }
+  }
+}
@@ -0,0 +1,6 @@
+// Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
+
+@forward './settings'
+@use './generic'
+@use './elements'
+@use './utilities/index'
@@ -0,0 +1,850 @@
+@use 'sass:map';
+@use '../tools/functions' as *;
+
+$shades: () !default;
+$shades: map-deep-merge(
+  (
+    'black': #000000,
+    'white': #FFFFFF,
+    'transparent': transparent
+  ),
+  $shades
+);
+
+$text-on-shades: () !default;
+$text-on-shades: map-deep-merge(
+  (
+    'black': map.get($shades, 'white'),
+    'white': map.get($shades, 'black'),
+    'transparent': currentColor
+  ),
+  $text-on-shades
+);
+
+$red: () !default;
+$red: map-deep-merge(
+  (
+    'base': #F44336,
+    'lighten-5': #FFEBEE,
+    'lighten-4': #FFCDD2,
+    'lighten-3': #EF9A9A,
+    'lighten-2': #E57373,
+    'lighten-1': #EF5350,
+    'darken-1': #E53935,
+    'darken-2': #D32F2F,
+    'darken-3': #C62828,
+    'darken-4': #B71C1C,
+    'accent-1': #FF8A80,
+    'accent-2': #FF5252,
+    'accent-3': #FF1744,
+    'accent-4': #D50000
+  ),
+  $red
+);
+
+$text-on-red: () !default;
+$text-on-red: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-red
+);
+
+$pink: () !default;
+$pink: map-deep-merge(
+  (
+    'base': #e91e63,
+    'lighten-5': #fce4ec,
+    'lighten-4': #f8bbd0,
+    'lighten-3': #f48fb1,
+    'lighten-2': #f06292,
+    'lighten-1': #ec407a,
+    'darken-1': #d81b60,
+    'darken-2': #c2185b,
+    'darken-3': #ad1457,
+    'darken-4': #880e4f,
+    'accent-1': #ff80ab,
+    'accent-2': #ff4081,
+    'accent-3': #f50057,
+    'accent-4': #c51162
+  ),
+  $pink
+);
+
+$text-on-pink: () !default;
+$text-on-pink: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'white'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-pink
+);
+
+$purple: () !default;
+$purple: map-deep-merge(
+  (
+    'base': #9c27b0,
+    'lighten-5': #f3e5f5,
+    'lighten-4': #e1bee7,
+    'lighten-3': #ce93d8,
+    'lighten-2': #ba68c8,
+    'lighten-1': #ab47bc,
+    'darken-1': #8e24aa,
+    'darken-2': #7b1fa2,
+    'darken-3': #6a1b9a,
+    'darken-4': #4a148c,
+    'accent-1': #ea80fc,
+    'accent-2': #e040fb,
+    'accent-3': #d500f9,
+    'accent-4': #aa00ff
+  ),
+  $purple
+);
+
+$text-on-purple: () !default;
+$text-on-purple: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'white'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'white'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-purple
+);
+
+$deep-purple: () !default;
+$deep-purple: map-deep-merge(
+  (
+    'base': #673ab7,
+    'lighten-5': #ede7f6,
+    'lighten-4': #d1c4e9,
+    'lighten-3': #b39ddb,
+    'lighten-2': #9575cd,
+    'lighten-1': #7e57c2,
+    'darken-1': #5e35b1,
+    'darken-2': #512da8,
+    'darken-3': #4527a0,
+    'darken-4': #311b92,
+    'accent-1': #b388ff,
+    'accent-2': #7c4dff,
+    'accent-3': #651fff,
+    'accent-4': #6200ea
+  ),
+  $deep-purple
+);
+
+$text-on-deep-purple: () !default;
+$text-on-deep-purple: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'white'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'white'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-deep-purple
+);
+
+$indigo: () !default;
+$indigo: map-deep-merge(
+  (
+    'base': #3f51b5,
+    'lighten-5': #e8eaf6,
+    'lighten-4': #c5cae9,
+    'lighten-3': #9fa8da,
+    'lighten-2': #7986cb,
+    'lighten-1': #5c6bc0,
+    'darken-1': #3949ab,
+    'darken-2': #303f9f,
+    'darken-3': #283593,
+    'darken-4': #1a237e,
+    'accent-1': #8c9eff,
+    'accent-2': #536dfe,
+    'accent-3': #3d5afe,
+    'accent-4': #304ffe
+  ),
+  $indigo
+);
+
+$text-on-indigo: () !default;
+$text-on-indigo: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'white'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'white'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-indigo
+);
+
+$blue: () !default;
+$blue: map-deep-merge(
+  (
+    'base': #2196F3,
+    'lighten-5': #E3F2FD,
+    'lighten-4': #BBDEFB,
+    'lighten-3': #90CAF9,
+    'lighten-2': #64B5F6,
+    'lighten-1': #42A5F5,
+    'darken-1': #1E88E5,
+    'darken-2': #1976D2,
+    'darken-3': #1565C0,
+    'darken-4': #0D47A1,
+    'accent-1': #82B1FF,
+    'accent-2': #448AFF,
+    'accent-3': #2979FF,
+    'accent-4': #2962FF,
+  ),
+  $blue
+);
+
+$text-on-blue: () !default;
+$text-on-blue: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-blue
+);
+
+$light-blue: () !default;
+$light-blue: map-deep-merge(
+  (
+    'base': #03a9f4,
+    'lighten-5': #e1f5fe,
+    'lighten-4': #b3e5fc,
+    'lighten-3': #81d4fa,
+    'lighten-2': #4fc3f7,
+    'lighten-1': #29b6f6,
+    'darken-1': #039be5,
+    'darken-2': #0288d1,
+    'darken-3': #0277bd,
+    'darken-4': #01579b,
+    'accent-1': #80d8ff,
+    'accent-2': #40c4ff,
+    'accent-3': #00b0ff,
+    'accent-4': #0091ea
+  ),
+  $light-blue
+);
+
+$text-on-light-blue: () !default;
+$text-on-light-blue: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-light-blue
+);
+
+$cyan: () !default;
+$cyan: map-deep-merge(
+  (
+    'base': #00bcd4,
+    'lighten-5': #e0f7fa,
+    'lighten-4': #b2ebf2,
+    'lighten-3': #80deea,
+    'lighten-2': #4dd0e1,
+    'lighten-1': #26c6da,
+    'darken-1': #00acc1,
+    'darken-2': #0097a7,
+    'darken-3': #00838f,
+    'darken-4': #006064,
+    'accent-1': #84ffff,
+    'accent-2': #18ffff,
+    'accent-3': #00e5ff,
+    'accent-4': #00b8d4
+  ),
+  $cyan
+);
+
+$text-on-cyan: () !default;
+$text-on-cyan: map-deep-merge(
+  (
+    'base': map.get($shades, 'black'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-cyan
+);
+
+$teal: () !default;
+$teal: map-deep-merge(
+  (
+    'base': #009688,
+    'lighten-5': #e0f2f1,
+    'lighten-4': #b2dfdb,
+    'lighten-3': #80cbc4,
+    'lighten-2': #4db6ac,
+    'lighten-1': #26a69a,
+    'darken-1': #00897b,
+    'darken-2': #00796b,
+    'darken-3': #00695c,
+    'darken-4': #004d40,
+    'accent-1': #a7ffeb,
+    'accent-2': #64ffda,
+    'accent-3': #1de9b6,
+    'accent-4': #00bfa5
+  ),
+  $teal
+);
+
+$text-on-teal: () !default;
+$text-on-teal: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-teal
+);
+
+$green: () !default;
+$green: map-deep-merge(
+  (
+    'base': #4CAF50,
+    'lighten-5': #E8F5E9,
+    'lighten-4': #C8E6C9,
+    'lighten-3': #A5D6A7,
+    'lighten-2': #81C784,
+    'lighten-1': #66BB6A,
+    'darken-1': #43A047,
+    'darken-2': #388E3C,
+    'darken-3': #2E7D32,
+    'darken-4': #1B5E20,
+    'accent-1': #B9F6CA,
+    'accent-2': #69F0AE,
+    'accent-3': #00E676,
+    'accent-4': #00C853
+  ),
+  $green
+);
+
+$text-on-green: () !default;
+$text-on-green: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'black')
+  ),
+  $text-on-green
+);
+
+$light-green: () !default;
+$light-green: map-deep-merge(
+  (
+    'base': #8bc34a,
+    'lighten-5': #f1f8e9,
+    'lighten-4': #dcedc8,
+    'lighten-3': #c5e1a5,
+    'lighten-2': #aed581,
+    'lighten-1': #9ccc65,
+    'darken-1': #7cb342,
+    'darken-2': #689f38,
+    'darken-3': #558b2f,
+    'darken-4': #33691e,
+    'accent-1': #ccff90,
+    'accent-2': #b2ff59,
+    'accent-3': #76ff03,
+    'accent-4': #64dd17
+  ),
+  $light-green
+);
+
+$text-on-light-green: () !default;
+$text-on-light-green: map-deep-merge(
+  (
+    'base': map.get($shades, 'black'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'black')
+  ),
+  $text-on-light-green
+);
+
+$lime: () !default;
+$lime: map-deep-merge(
+  (
+    'base': #cddc39,
+    'lighten-5': #f9fbe7,
+    'lighten-4': #f0f4c3,
+    'lighten-3': #e6ee9c,
+    'lighten-2': #dce775,
+    'lighten-1': #d4e157,
+    'darken-1': #c0ca33,
+    'darken-2': #afb42b,
+    'darken-3': #9e9d24,
+    'darken-4': #827717,
+    'accent-1': #f4ff81,
+    'accent-2': #eeff41,
+    'accent-3': #c6ff00,
+    'accent-4': #aeea00
+  ),
+  $lime
+);
+
+$text-on-lime: () !default;
+$text-on-lime: map-deep-merge(
+  (
+    'base': map.get($shades, 'black'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'black'),
+    'darken-2': map.get($shades, 'black'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'black')
+  ),
+  $text-on-lime
+);
+
+$yellow: () !default;
+$yellow: map-deep-merge(
+  (
+    'base': #ffeb3b,
+    'lighten-5': #fffde7,
+    'lighten-4': #fff9c4,
+    'lighten-3': #fff59d,
+    'lighten-2': #fff176,
+    'lighten-1': #ffee58,
+    'darken-1': #fdd835,
+    'darken-2': #fbc02d,
+    'darken-3': #f9a825,
+    'darken-4': #f57f17,
+    'accent-1': #ffff8d,
+    'accent-2': #ffff00,
+    'accent-3': #ffea00,
+    'accent-4': #ffd600
+  ),
+  $yellow
+);
+
+$text-on-yellow: () !default;
+$text-on-yellow: map-deep-merge(
+  (
+    'base': map.get($shades, 'black'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'black'),
+    'darken-2': map.get($shades, 'black'),
+    'darken-3': map.get($shades, 'black'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'black')
+  ),
+  $text-on-yellow
+);
+
+$amber: () !default;
+$amber: map-deep-merge(
+  (
+    'base': #ffc107,
+    'lighten-5': #fff8e1,
+    'lighten-4': #ffecb3,
+    'lighten-3': #ffe082,
+    'lighten-2': #ffd54f,
+    'lighten-1': #ffca28,
+    'darken-1': #ffb300,
+    'darken-2': #ffa000,
+    'darken-3': #ff8f00,
+    'darken-4': #ff6f00,
+    'accent-1': #ffe57f,
+    'accent-2': #ffd740,
+    'accent-3': #ffc400,
+    'accent-4': #ffab00
+  ),
+  $amber
+);
+
+$text-on-amber: () !default;
+$text-on-amber: map-deep-merge(
+  (
+    'base': map.get($shades, 'black'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'black'),
+    'darken-2': map.get($shades, 'black'),
+    'darken-3': map.get($shades, 'black'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'black')
+  ),
+  $text-on-amber
+);
+
+$orange: () !default;
+$orange: map-deep-merge(
+  (
+    'base': #ff9800,
+    'lighten-5': #fff3e0,
+    'lighten-4': #ffe0b2,
+    'lighten-3': #ffcc80,
+    'lighten-2': #ffb74d,
+    'lighten-1': #ffa726,
+    'darken-1': #fb8c00,
+    'darken-2': #f57c00,
+    'darken-3': #ef6c00,
+    'darken-4': #e65100,
+    'accent-1': #ffd180,
+    'accent-2': #ffab40,
+    'accent-3': #ff9100,
+    'accent-4': #ff6d00
+  ),
+  $orange
+);
+
+$text-on-orange: () !default;
+$text-on-orange: map-deep-merge(
+  (
+    'base': map.get($shades, 'black'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'black'),
+    'accent-3': map.get($shades, 'black'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-orange
+);
+
+$deep-orange: () !default;
+$deep-orange: map-deep-merge(
+  (
+    'base': #ff5722,
+    'lighten-5': #fbe9e7,
+    'lighten-4': #ffccbc,
+    'lighten-3': #ffab91,
+    'lighten-2': #ff8a65,
+    'lighten-1': #ff7043,
+    'darken-1': #f4511e,
+    'darken-2': #e64a19,
+    'darken-3': #d84315,
+    'darken-4': #bf360c,
+    'accent-1': #ff9e80,
+    'accent-2': #ff6e40,
+    'accent-3': #ff3d00,
+    'accent-4': #dd2c00
+  ),
+  $deep-orange
+);
+
+$text-on-deep-orange: () !default;
+$text-on-deep-orange: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white'),
+    'accent-1': map.get($shades, 'black'),
+    'accent-2': map.get($shades, 'white'),
+    'accent-3': map.get($shades, 'white'),
+    'accent-4': map.get($shades, 'white')
+  ),
+  $text-on-deep-orange
+);
+
+$brown: () !default;
+$brown: map-deep-merge(
+  (
+    'base': #795548,
+    'lighten-5': #efebe9,
+    'lighten-4': #d7ccc8,
+    'lighten-3': #bcaaa4,
+    'lighten-2': #a1887f,
+    'lighten-1': #8d6e63,
+    'darken-1': #6d4c41,
+    'darken-2': #5d4037,
+    'darken-3': #4e342e,
+    'darken-4': #3e2723
+  ),
+  $brown
+);
+
+$text-on-brown: () !default;
+$text-on-brown: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white')
+  ),
+  $text-on-brown
+);
+
+$blue-grey: () !default;
+$blue-grey: map-deep-merge(
+  (
+    'base': #607d8b,
+    'lighten-5': #eceff1,
+    'lighten-4': #cfd8dc,
+    'lighten-3': #b0bec5,
+    'lighten-2': #90a4ae,
+    'lighten-1': #78909c,
+    'darken-1': #546e7a,
+    'darken-2': #455a64,
+    'darken-3': #37474f,
+    'darken-4': #263238
+  ),
+  $blue-grey
+);
+
+$text-on-blue-grey: () !default;
+$text-on-blue-grey: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'white'),
+    'lighten-1': map.get($shades, 'white'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white')
+  ),
+  $text-on-blue-grey
+);
+
+$grey: () !default;
+$grey: map-deep-merge(
+  (
+    'base': #9e9e9e,
+    'lighten-5': #fafafa,
+    'lighten-4': #f5f5f5,
+    'lighten-3': #eeeeee,
+    'lighten-2': #e0e0e0,
+    'lighten-1': #bdbdbd,
+    'darken-1': #757575,
+    'darken-2': #616161,
+    'darken-3': #424242,
+    'darken-4': #212121
+  ),
+  $grey
+);
+
+$text-on-grey: () !default;
+$text-on-grey: map-deep-merge(
+  (
+    'base': map.get($shades, 'white'),
+    'lighten-5': map.get($shades, 'black'),
+    'lighten-4': map.get($shades, 'black'),
+    'lighten-3': map.get($shades, 'black'),
+    'lighten-2': map.get($shades, 'black'),
+    'lighten-1': map.get($shades, 'black'),
+    'darken-1': map.get($shades, 'white'),
+    'darken-2': map.get($shades, 'white'),
+    'darken-3': map.get($shades, 'white'),
+    'darken-4': map.get($shades, 'white')
+  ),
+  $text-on-grey
+);
+
+$colors: () !default;
+$colors: map-deep-merge(
+  (
+    'red': $red,
+    'pink': $pink,
+    'purple': $purple,
+    'deep-purple': $deep-purple,
+    'indigo': $indigo,
+    'blue': $blue,
+    'light-blue': $light-blue,
+    'cyan': $cyan,
+    'teal': $teal,
+    'green': $green,
+    'light-green': $light-green,
+    'lime': $lime,
+    'yellow': $yellow,
+    'amber': $amber,
+    'orange': $orange,
+    'deep-orange': $deep-orange,
+    'brown': $brown,
+    'blue-grey': $blue-grey,
+    'grey': $grey,
+    'shades': $shades
+  ),
+  $colors
+);
+
+$text-on-colors: () !default;
+$text-on-colors: map-deep-merge(
+  (
+    'red': $text-on-red,
+    'pink': $text-on-pink,
+    'purple': $text-on-purple,
+    'deep-purple': $text-on-deep-purple,
+    'indigo': $text-on-indigo,
+    'blue': $text-on-blue,
+    'light-blue': $text-on-light-blue,
+    'cyan': $text-on-cyan,
+    'teal': $text-on-teal,
+    'green': $text-on-green,
+    'light-green': $text-on-light-green,
+    'lime': $text-on-lime,
+    'yellow': $text-on-yellow,
+    'amber': $text-on-amber,
+    'orange': $text-on-orange,
+    'deep-orange': $text-on-deep-orange,
+    'brown': $text-on-brown,
+    'blue-grey': $text-on-blue-grey,
+    'grey': $text-on-grey,
+    'shades': $text-on-shades
+  ),
+  $text-on-colors
+);
@@ -0,0 +1,32 @@
+@use '../tools/functions' as *;
+
+$shadow-key-color: rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)) !default;
+$shadow-ambient-color: rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)) !default;
+
+$shadow-key: () !default;
+$shadow-key: map-deep-merge(
+  (
+    0: (0px 0px 0px 0px $shadow-key-color),
+    1: (0px 1px 2px 0px $shadow-key-color),
+    2: (0px 1px 2px 0px $shadow-key-color),
+    3: (0px 1px 3px 0px $shadow-key-color),
+    4: (0px 2px 3px 0px $shadow-key-color),
+    5: (0px 4px 4px 0px $shadow-key-color)
+  ),
+  $shadow-key
+);
+
+$shadow-ambient: () !default;
+$shadow-ambient: map-deep-merge(
+  (
+    0: (0px 0px 0px 0px $shadow-ambient-color),
+    1: (0px 1px 3px 1px $shadow-ambient-color),
+    2: (0px 2px 6px 2px $shadow-ambient-color),
+    3: (0px 4px 8px 3px $shadow-ambient-color),
+    4: (0px 6px 10px 4px $shadow-ambient-color),
+    5: (0px 8px 12px 6px $shadow-ambient-color)
+  ),
+  $shadow-ambient
+);
+
+$elevation-overlay-step: 2%;
@@ -0,0 +1,4 @@
+@forward './variables'
+@forward './colors'
+@forward './elevations'
+@forward './utilities'
@@ -0,0 +1,628 @@
+@use 'sass:map';
+@use './variables';
+@use '../tools/functions' as *;
+
+$utilities: () !default;
+@if ($utilities != false) {
+  $utilities: map-deep-merge(
+    (
+      // Display utilities
+      "overflow": (
+        property: overflow,
+        values: auto hidden visible scroll,
+      ),
+      "overflow-x": (
+        property: overflow-x,
+        values: auto hidden scroll
+      ),
+      "overflow-y": (
+        property: overflow-y,
+        values: auto hidden scroll
+      ),
+      "display": (
+        responsive: true,
+        print: true,
+        property: display,
+        class: d,
+        values: none inline inline-block block table table-row table-cell flex inline-flex
+      ),
+      "float": (
+        responsive: true,
+        print: true,
+        property: float,
+        class: float,
+        values: none left right
+      ),
+      "float:rtl": (
+        responsive: true,
+        print: true,
+        property: float,
+        class: float,
+        values: (
+          end: left,
+          start: right,
+        )
+      ),
+      "float:ltr": (
+        responsive: true,
+        print: true,
+        property: float,
+        class: float,
+        values: (
+          end: right,
+          start: left,
+        )
+      ),
+
+      // Flex utilities
+      "flex": (
+        responsive: true,
+        property: flex,
+        values: (
+          fill: 1 1 auto,
+          '1-1': 1 1 auto,
+          '1-0': 1 0 auto,
+          '0-1': 0 1 auto,
+          '0-0': 0 0 auto,
+          '1-1-100': 1 1 100%,
+          '1-0-100': 1 0 100%,
+          '0-1-100': 0 1 100%,
+          '0-0-100': 0 0 100%,
+          '1-1-0': 1 1 0,
+          '1-0-0': 1 0 0,
+          '0-1-0': 0 1 0,
+          '0-0-0': 0 0 0,
+        )
+      ),
+      "flex-direction": (
+        responsive: true,
+        property: flex-direction,
+        class: flex,
+        values: row column row-reverse column-reverse
+      ),
+      "flex-grow": (
+        responsive: true,
+        property: flex-grow,
+        class: flex,
+        values: (
+          grow-0: 0,
+          grow-1: 1,
+        )
+      ),
+      "flex-shrink": (
+        responsive: true,
+        property: flex-shrink,
+        class: flex,
+        values: (
+          shrink-0: 0,
+          shrink-1: 1,
+        )
+      ),
+      "flex-wrap": (
+        responsive: true,
+        property: flex-wrap,
+        class: flex,
+        values: wrap nowrap wrap-reverse
+      ),
+      "justify-content": (
+        responsive: true,
+        property: justify-content,
+        class: justify,
+        values: (
+          start: flex-start,
+          end: flex-end,
+          center: center,
+          space-between: space-between,
+          space-around: space-around,
+          space-evenly: space-evenly,
+        )
+      ),
+      "justify-items": (
+        responsive: true,
+        property: justify-items,
+        values: (
+          start: flex-start,
+          end: flex-end,
+          center: center,
+          stretch: stretch,
+        )
+      ),
+      "align-items": (
+        responsive: true,
+        property: align-items,
+        class: align,
+        values: (
+          start: flex-start,
+          end: flex-end,
+          center: center,
+          baseline: baseline,
+          stretch: stretch,
+        )
+      ),
+      "align-content": (
+        responsive: true,
+        property: align-content,
+        values: (
+          start: flex-start,
+          end: flex-end,
+          center: center,
+          space-between: space-between,
+          space-around: space-around,
+          space-evenly: space-evenly,
+          stretch: stretch,
+        )
+      ),
+      "align-self": (
+        responsive: true,
+        property: align-self,
+        values: (
+          auto: auto,
+          start: flex-start,
+          end: flex-end,
+          center: center,
+          baseline: baseline,
+          stretch: stretch,
+        )
+      ),
+      "order": (
+        responsive: true,
+        property: order,
+        values: (
+          first: -1,
+          0: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+          5: 5,
+          6: 6,
+          7: 7,
+          8: 8,
+          9: 9,
+          10: 10,
+          11: 11,
+          12: 12,
+          last: 13,
+        ),
+      ),
+
+      // gap utilities
+      "gap": (
+        responsive: true,
+        property: gap,
+        class: ga,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "gap-row": (
+        responsive: true,
+        property: row-gap,
+        class: gr,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "gap-column": (
+        responsive: true,
+        property: column-gap,
+        class: gc,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+
+      // Margin utilities
+      "margin": (
+        responsive: true,
+        property: margin,
+        class: ma,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-x": (
+        responsive: true,
+        property: margin-right margin-left,
+        class: mx,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-y": (
+        responsive: true,
+        property: margin-top margin-bottom,
+        class: my,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-top": (
+        responsive: true,
+        property: margin-top,
+        class: mt,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-right": (
+        responsive: true,
+        property: margin-right,
+        class: mr,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-bottom": (
+        responsive: true,
+        property: margin-bottom,
+        class: mb,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-left": (
+        responsive: true,
+        property: margin-left,
+        class: ml,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-start": (
+        responsive: true,
+        property: margin-inline-start,
+        class: ms,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+      "margin-end": (
+        responsive: true,
+        property: margin-inline-end,
+        class: me,
+        values: map.merge(variables.$spacers, (auto: auto))
+      ),
+
+      // Negative margin utilities
+      "negative-margin": (
+        responsive: true,
+        property: margin,
+        class: ma,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-x": (
+        responsive: true,
+        property: margin-right margin-left,
+        class: mx,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-y": (
+        responsive: true,
+        property: margin-top margin-bottom,
+        class: my,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-top": (
+        responsive: true,
+        property: margin-top,
+        class: mt,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-right": (
+        responsive: true,
+        property: margin-right,
+        class: mr,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-bottom": (
+        responsive: true,
+        property: margin-bottom,
+        class: mb,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-left": (
+        responsive: true,
+        property: margin-left,
+        class: ml,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-start": (
+        responsive: true,
+        property: margin-inline-start,
+        class: ms,
+        values: variables.$negative-spacers
+      ),
+      "negative-margin-end": (
+        responsive: true,
+        property: margin-inline-end,
+        class: me,
+        values: variables.$negative-spacers
+      ),
+
+      // Padding utilities
+      "padding": (
+        responsive: true,
+        property: padding,
+        class: pa,
+        values: variables.$spacers
+      ),
+      "padding-x": (
+        responsive: true,
+        property: padding-right padding-left,
+        class: px,
+        values: variables.$spacers
+      ),
+      "padding-y": (
+        responsive: true,
+        property: padding-top padding-bottom,
+        class: py,
+        values: variables.$spacers
+      ),
+      "padding-top": (
+        responsive: true,
+        property: padding-top,
+        class: pt,
+        values: variables.$spacers
+      ),
+      "padding-right": (
+        responsive: true,
+        property: padding-right,
+        class: pr,
+        values: variables.$spacers
+      ),
+      "padding-bottom": (
+        responsive: true,
+        property: padding-bottom,
+        class: pb,
+        values: variables.$spacers
+      ),
+      "padding-left": (
+        responsive: true,
+        property: padding-left,
+        class: pl,
+        values: variables.$spacers
+      ),
+      "padding-start": (
+        responsive: true,
+        property: padding-inline-start,
+        class: ps,
+        values: variables.$spacers
+      ),
+      "padding-end": (
+        responsive: true,
+        property: padding-inline-end,
+        class: pe,
+        values: variables.$spacers
+      ),
+
+      // Border radius
+      "rounded": (
+        property: border-radius,
+        class: rounded,
+        values: variables.$rounded
+      ),
+      "rounded-top": (
+        property: border-top-left-radius border-top-right-radius,
+        class: rounded-t,
+        values: variables.$rounded
+      ),
+      "rounded-end": (
+        property: (ltr: border-top-right-radius border-bottom-right-radius, rtl: border-top-left-radius border-bottom-left-radius),
+        class: rounded-e,
+        values: variables.$rounded
+      ),
+      "rounded-bottom": (
+        property: border-bottom-left-radius border-bottom-right-radius,
+        class: rounded-b,
+        values: variables.$rounded
+      ),
+      "rounded-start": (
+        property: (ltr: border-top-left-radius border-bottom-left-radius, rtl: border-top-right-radius border-bottom-right-radius),
+        class: rounded-s,
+        values: variables.$rounded
+      ),
+      "rounded-top-start": (
+        property: (ltr: border-top-left-radius, rtl: border-top-right-radius),
+        class: rounded-ts,
+        values: variables.$rounded
+      ),
+      "rounded-top-end": (
+        property: (ltr: border-top-right-radius, rtl: border-top-left-radius),
+        class: rounded-te,
+        values: variables.$rounded
+      ),
+      "rounded-bottom-end": (
+        property: (ltr: border-bottom-right-radius, rtl: border-bottom-left-radius),
+        class: rounded-be,
+        values: variables.$rounded
+      ),
+      "rounded-bottom-start": (
+        property: (ltr: border-bottom-left-radius, rtl: border-bottom-right-radius),
+        class: rounded-bs,
+        values: variables.$rounded
+      ),
+
+      // Border
+      "border": (
+        property: border-width border-style border-color,
+        class: border,
+        values: variables.$borders
+      ),
+      "border-current": (
+        property: border-color,
+        class: border,
+        values: (current: currentColor)
+      ),
+      "border-opacity": (
+        property: --v-border-opacity,
+        class: border-opacity,
+        values: variables.$border-opacities
+      ),
+      "border-top": (
+        property: border-block-start-width border-block-start-style border-block-start-color,
+        class: border-t,
+        values: variables.$borders
+      ),
+      "border-end": (
+        property: border-inline-end-width border-inline-end-style border-inline-end-color,
+        class: border-e,
+        values: variables.$borders
+      ),
+      "border-bottom": (
+        property: border-block-end-width border-block-end-style border-block-end-color,
+        class: border-b,
+        values: variables.$borders
+      ),
+      "border-start": (
+        property: border-inline-start-width border-inline-start-style border-inline-start-color,
+        class: border-s,
+        values: variables.$borders
+      ),
+      "border-style": (
+        property: border-style,
+        class: border,
+        values: solid dashed dotted double none
+      ),
+
+      // Text
+      "text-align": (
+        responsive: true,
+        property: text-align,
+        class: text,
+        values: left right center justify start end
+      ),
+      "text-decoration": (
+        property: text-decoration,
+        class: text-decoration,
+        values: line-through none overline underline
+      ),
+      "white-space": (
+        property: white-space,
+        class: text,
+        values: (
+          wrap: normal,
+          no-wrap: nowrap,
+          pre: pre,
+          pre-line: pre-line,
+          pre-wrap: pre-wrap,
+        )
+      ),
+      "overflow-wrap": (
+        property: overflow-wrap word-break, // word-break for IE & < Edge 18
+        class: text,
+        values: (break: break-word)
+      ),
+      "opacity": (
+        property: opacity,
+        class: opacity,
+        values: variables.$opacities
+      ),
+      "text-opacity": (
+        property: color,
+        class: text,
+        values: (
+          high-emphasis: theme-color('on-background', var(--v-high-emphasis-opacity)),
+          medium-emphasis: theme-color('on-background', var(--v-medium-emphasis-opacity)),
+          disabled: theme-color('on-background', var(--v-disabled-opacity)),
+        )
+      ),
+      "text-overflow": (
+        property: white-space overflow text-overflow,
+        class: text,
+        values: (truncate: nowrap hidden ellipsis)
+      ),
+      "typography": (
+        responsive: true,
+        property: (
+          font-size,
+          font-weight,
+          line-height,
+          letter-spacing,
+          font-family,
+        ),
+        class: text,
+        values: variables.$flat-typography
+      ),
+      "text-transform": (
+        property: text-transform,
+        class: text,
+        values: none capitalize lowercase uppercase
+      ),
+      "font-weight": (
+        property: font-weight,
+        class: font-weight,
+        values: variables.$font-weights
+      ),
+      "font-italic": (
+        property: font-style,
+        class: font,
+        values: italic
+      ),
+      "text-mono": (
+        property: font-family,
+        class: text,
+        values: (
+          mono: monospace
+        )
+      ),
+      // Position
+      "position": (
+        property: position,
+        class: position,
+        values: static relative fixed absolute sticky
+      ),
+      "top": (
+        property: top,
+        class: top,
+        values: 0
+      ),
+      "right": (
+        property: right,
+        class: right,
+        values: 0
+      ),
+      "bottom": (
+        property: bottom,
+        class: bottom,
+        values: 0
+      ),
+      "left": (
+        property: left,
+        class: left,
+        values: 0
+      ),
+      // Cursor
+      "cursor": (
+        property: cursor,
+        class: cursor,
+        values: auto default pointer wait text move help not-allowed progress grab grabbing none
+      ),
+      // Sizing
+      "fill-height": (
+        property: height,
+        class: fill,
+        values: (
+          height: 100%
+        )
+      ),
+      "height": (
+        property: height,
+        responsive: true,
+        class: h,
+        values: (
+          auto: auto,
+          screen: 100vh,
+          0: 0,
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%
+        )
+      ),
+      "height-screen": (
+        property: height,
+        class: h,
+        values: (
+          screen: 100dvh
+        )
+      ),
+      "width": (
+        property: width,
+        responsive: true,
+        class: w,
+        values: (
+          auto: auto,
+          0: 0,
+          25: 25%,
+          33: 33%,
+          50: 50%,
+          66: 66%,
+          75: 75%,
+          100: 100%
+        )
+      )
+    ),
+    $utilities
+  );
+} @else {
+  $utilities: ();
+}
@@ -0,0 +1,362 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../tools/functions' as *;
+
+$color-pack: true !default;
+$reset: true !default;
+
+$misc: () !default;
+$misc: map-deep-merge(
+  (
+    elevation: true,
+    hidden: true,
+    'sr-only': true,
+    'pointer-events': true,
+  ),
+  $misc
+);
+
+$body-font-family: var(--v-font-body, 'Roboto', sans-serif) !default;
+$font-size-root: 1rem !default;
+$line-height-root: 1.5 !default;
+$border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
+$border-radius-root: 4px !default;
+$border-style-root: solid !default;
+$border-width-root: thin !default;
+$transition-duration-root: 0.3s !default;
+$transition-move-duration-root: 0.5s !default;
+
+$borders: () !default;
+$borders: map-deep-merge(
+  (
+    0: 0,
+    null: $border-width-root,
+    thin: $border-width-root,
+    sm: 1px,
+    md: 2px,
+    lg: 4px,
+    xl: 8px
+  ),
+  $borders
+);
+
+@each $key, $border in $borders {
+  $borders: map-deep-merge(
+    $borders,
+    ( $key: $border $border-style-root $border-color-root )
+  )
+}
+
+$border-opacities: () !default;
+$border-opacities: map-deep-merge(
+  (
+    0: 0,
+    null: .12,
+    25: .25,
+    50: .50,
+    75: .75,
+    100: 1
+  ),
+  $border-opacities
+);
+
+$opacities: () !default;
+$opacities: map-deep-merge(
+  (
+    hover: var(--v-hover-opacity),
+    focus: var(--v-focus-opacity),
+    selected: var(--v-selected-opacity),
+    activated: var(--v-activated-opacity),
+    pressed: var(--v-pressed-opacity),
+    dragged: var(--v-dragged-opacity),
+    0: 0,
+    10: .1,
+    20: .2,
+    30: .3,
+    40: .4,
+    50: .5,
+    60: .6,
+    70: .7,
+    80: .8,
+    90: .9,
+    100: 1
+  ),
+  $opacities
+);
+
+$states: () !default;
+$states: map-deep-merge(
+    (
+    'hover': var(--v-hover-opacity),
+    'focus': var(--v-focus-opacity),
+    'selected': var(--v-selected-opacity),
+    'activated': var(--v-activated-opacity),
+    'pressed': var(--v-pressed-opacity),
+    'dragged': var(--v-dragged-opacity)
+  ),
+  $states
+);
+
+$rounded: () !default;
+$rounded: map-deep-merge(
+  (
+    0: 0,
+    'sm': $border-radius-root * .5,
+    null: $border-radius-root,
+    'md': $border-radius-root,
+    'lg': $border-radius-root * 2,
+    'xl': $border-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%,
+    'shaped': $border-radius-root * 6 0
+  ),
+  $rounded
+);
+
+$spacer: 4px !default;
+$spacers-steps: 16 !default;
+
+$spacers: () !default;
+@if (meta.type-of($spacers) == list) {
+  @for $i from 0 through $spacers-steps {
+    $spacers: map.merge($spacers, ($i: $spacer * $i))
+  }
+}
+
+$negative-spacers: () !default;
+@if (meta.type-of($negative-spacers) == list) {
+  @for $i from 1 through $spacers-steps {
+    $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
+  }
+}
+
+$grid-breakpoints: () !default;
+$grid-breakpoints: map-deep-merge(
+  (
+    'xs': 0,
+    'sm': 600px,
+    'md': 840px,
+    'lg': 1145px,
+    'xl': 1545px,
+    'xxl': 2138px,
+  ),
+  $grid-breakpoints
+);
+
+$grid-gutter: $spacer * 6 !default;
+$grid-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
+$grid-columns: 12 !default;
+$container-padding-x: $spacer * 4 !default;
+
+$container-max-widths: () !default;
+$container-max-widths: map-deep-merge(
+  (
+    'xs': null,
+    'sm': null,
+    'md': 100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375),
+    'lg': 100 * math.floor(map.get($grid-breakpoints, 'lg') * 0.009375),
+    'xl': 100 * math.floor(map.get($grid-breakpoints, 'xl') * 0.009375),
+    'xxl': 100 * math.floor(map.get($grid-breakpoints, 'xxl') * 0.009375),
+  ),
+  $container-max-widths
+);
+
+// Avoid using *-and-down where possible
+$display-breakpoints: () !default;
+$display-breakpoints: map-deep-merge(
+  (
+    'print-only': 'only print',
+    'screen-only': 'only screen',
+    'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})',
+    'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
+    'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
+    'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
+    'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
+    'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})',
+    'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})',
+    'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})',
+    'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})',
+    'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})',
+    'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
+    'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
+    'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
+    'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
+  ),
+  $display-breakpoints
+);
+
+$font-weights: () !default;
+$font-weights: map-deep-merge(
+  (
+    'thin': 100,
+    'light': 300,
+    'regular': 400,
+    'medium': 500,
+    'semibold': 600,
+    'bold': 700,
+    'black': 900
+  ),
+  $font-weights
+);
+
+$heading-font-family: var(--v-font-heading, #{$body-font-family}) !default;
+
+$typography: () !default;
+$typography: map-deep-merge(
+  (
+    'display-large': (
+      'size': 3.5625rem,
+      'weight': 400,
+      'line-height': 1.1228070175,
+      'letter-spacing': -.0043859649em,
+      'font-family': $heading-font-family
+    ),
+    'display-medium': (
+      'size': 2.8125rem,
+      'weight': 400,
+      'line-height': 1.1555555556,
+      'letter-spacing': normal,
+      'font-family': $heading-font-family
+    ),
+    'display-small': (
+      'size': 2.25rem,
+      'weight': 400,
+      'line-height': 1.2222222222,
+      'letter-spacing': normal,
+      'font-family': $heading-font-family
+    ),
+    'headline-large': (
+      'size': 2rem,
+      'weight': 400,
+      'line-height': 1.25,
+      'letter-spacing': normal,
+      'font-family': $heading-font-family
+    ),
+    'headline-medium': (
+      'size': 1.75rem,
+      'weight': 400,
+      'line-height': 1.2857142857,
+      'letter-spacing': normal,
+      'font-family': $heading-font-family
+    ),
+    'headline-small': (
+      'size': 1.5rem,
+      'weight': 400,
+      'line-height': 1.3333333333,
+      'letter-spacing': normal,
+      'font-family': $heading-font-family
+    ),
+    'title-large': (
+      'size': 1.375rem,
+      'weight': 400,
+      'line-height': 1.2727272727,
+      'letter-spacing': normal,
+      'font-family': $heading-font-family
+    ),
+    'title-medium': (
+      'size': 1rem,
+      'weight': 500,
+      'line-height': 1.5,
+      'letter-spacing': .009375em,
+      'font-family': $body-font-family
+    ),
+    'title-small': (
+      'size': .875rem,
+      'weight': 500,
+      'line-height': 1.4285714286,
+      'letter-spacing': .0071428571em,
+      'font-family': $body-font-family
+    ),
+    'body-large': (
+      'size': 1rem,
+      'weight': 400,
+      'line-height': 1.5,
+      'letter-spacing': .03125em,
+      'font-family': $body-font-family
+    ),
+    'body-medium': (
+      'size': .875rem,
+      'weight': 400,
+      'line-height': 1.4285714286,
+      'letter-spacing': .0178571429em,
+      'font-family': $body-font-family
+    ),
+    'body-small': (
+      'size': .75rem,
+      'weight': 400,
+      'line-height': 1.3333333333,
+      'letter-spacing': .0333333333em,
+      'font-family': $body-font-family
+    ),
+    'label-large': (
+      'size': .875rem,
+      'weight': 500,
+      'line-height': 1.4285714286,
+      'letter-spacing': .0071428571em,
+      'font-family': $body-font-family
+    ),
+    'label-medium': (
+      'size': .75rem,
+      'weight': 500,
+      'line-height': 1.3333333333,
+      'letter-spacing': .0416666667em,
+      'font-family': $body-font-family
+    ),
+    'label-small': (
+      'size': .6875rem,
+      'weight': 500,
+      'line-height': 1.4545454545,
+      'letter-spacing': .0454545455em,
+      'font-family': $body-font-family
+    )
+  ),
+  $typography
+);
+
+$flat-typography: () !default;
+@each $type, $values in $typography {
+  $flat-typography: map-deep-merge(
+    $flat-typography,
+    (#{$type}: (
+      map.get($values, 'size'),
+      map.get($values, 'weight'),
+      map.get($values, 'line-height'),
+      map.get($values, 'letter-spacing'),
+      map.get($values, 'font-family')
+    ))
+  );
+}
+
+// Mapping from transition to easings:
+// fast-out-slow-in -> standard
+// linear-out-slow-in -> decelerated
+// fast-out-linear-in -> accelerated
+// ease-in-out -> standard or accelerated depending on usage
+// fast-in-fast-out -> accelerated
+// swing -> standard
+
+$standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering
+$accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving
+
+// Elements
+$blockquote-font-size: 18px !default;
+$blockquote-font-weight: 300 !default;
+
+$sizes: (
+  'x-small',
+  'small',
+  'default',
+  'large',
+  'x-large'
+) !default;
+
+$size-scale: $spacer * 2 !default;
+$size-scales: (
+  'x-small': -2,
+  'small': -1,
+  'default': 0,
+  'large': 1,
+  'x-large': 2
+) !default;
@@ -0,0 +1,2 @@
+// Empty declaration file for noUncheckedSideEffectImports
+//# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/styles/styles.ts"],"sourcesContent":["// Empty declaration file for noUncheckedSideEffectImports\n"],"mappings":"AAAA","ignoreList":[]}
@@ -0,0 +1,9 @@
+@mixin absolute($pseudo: false)
+  &
+    @if ($pseudo)
+      content: ''
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
@@ -0,0 +1,10 @@
+@mixin border($color: null, $style: null, $width: null, $thin-width: false)
+  &
+    border-color: $color
+    border-style: $style
+    border-width: $width
+
+  @if $thin-width
+    &--border
+      border-width: $thin-width
+      box-shadow: none
@@ -0,0 +1,6 @@
+@use '../settings'
+
+@mixin density($name, $densities)
+  @each $density, $multiplier in $densities
+    .#{$name}--density-#{$density}
+      @content($multiplier * settings.$spacer)
@@ -0,0 +1,10 @@
+@use './functions' as *
+@use '../settings' as *
+
+=media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
+  $min: breakpoint-min($name, $breakpoints)
+  @if $min
+    @media (min-width: $min)
+      @content
+  @else
+    @content
@@ -0,0 +1,12 @@
+@use 'sass:map'
+@use '../settings'
+
+@mixin elevation($z)
+  &
+    box-shadow: map.get(settings.$shadow-key, $z), map.get(settings.$shadow-ambient, $z)
+    --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) #{$z * settings.$elevation-overlay-step}, transparent)
+
+@mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1))
+  &
+    transition: $duration $easing
+    transition-property: box-shadow, --v-elevation-overlay
@@ -0,0 +1,91 @@
+@use 'sass:list'
+@use 'sass:map'
+@use 'sass:math'
+@use 'sass:meta'
+
+@function map-deep-set($map, $keys, $value)
+  $maps: ($map,)
+  $result: null
+
+  // If the last key is a map already
+  // Warn the user we will be overriding it with $value
+  @if meta.type-of(list.nth($keys, -1)) == "map"
+    @warn "The last key you specified is a map; it will be override with `#{$value}`."
+
+  // If $keys is a single key
+  // Just merge and return
+  @if list.length($keys) == 1
+    @return map.merge($map, ( $keys: $value ))
+
+  // Loop from the first to the second to last key from $keys
+  // Store the associated map to this key in the $maps list
+  // If the key doesn't exist, throw an error
+  @for $i from 1 through list.length($keys) - 1
+    $current-key: list.nth($keys, $i)
+    $current-map: list.nth($maps, -1)
+    $current-get: map.get($current-map, $current-key)
+
+    @if $current-get == null
+      @error "Key `#{$current-key}` doesn't exist at current level in map."
+
+    $maps: list.append($maps, $current-get)
+
+  // Loop from the last map to the first one
+  // Merge it with the previous one
+  @for $i from list.length($maps) through 1
+    $current-map: list.nth($maps, $i)
+    $current-key: list.nth($keys, $i)
+    @if $i == list.length($maps)
+      $result: map.merge($current-map, ($current-key: $value))
+    @else
+      $result: map.merge($current-map, ($current-key: $result))
+
+  // Return result
+  @return $result
+
+@function map-deep-get($map, $keys...)
+  @each $key in $keys
+    $map: map.get($map, $key)
+
+  @return $map
+
+@function breakpoint-min($name, $breakpoints)
+  $min: map.get($breakpoints, $name)
+  @if $min != 0
+    @return $min
+  @else
+    @return null
+
+@function breakpoint-infix($name, $breakpoints)
+  @if breakpoint-min($name, $breakpoints) == null
+    @return ''
+  @else
+    @return '-#{$name}'
+
+// Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss
+@function map-deep-merge($parent-map, $child-map)
+  $result: $parent-map
+
+  @each $key, $child in $child-map
+    $parent-has-key: map.has-key($result, $key)
+    $parent-value: map.get($result, $key)
+    $parent-type: meta.type-of($parent-value)
+    $child-type: meta.type-of($child)
+    $parent-is-map: $parent-type == map
+    $child-is-map: $child-type == map
+
+    @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map))
+      $result: map.merge($result, ( $key: $child ))
+
+    @else
+      $result: map.merge($result, ( $key: map-deep-merge($parent-value, $child) ))
+
+  @return $result
+
+@function theme-color($color, $opacity: 1)
+  $color: rgb(var(--v-theme-#{$color}))
+  $color: color-mix(in srgb, $color calc($opacity * 100%), transparent)
+  @return $color
+
+@function roundEven($val)
+  @return 2 * math.round($val * .5)
@@ -0,0 +1,15 @@
+@forward '_absolute'
+@forward '_functions'
+@forward '_border'
+@forward '_density'
+@forward '_elevation'
+@forward '_layer'
+@forward '_position'
+@forward '_rounded'
+@forward '_rtl'
+@forward '_states'
+@forward '_theme'
+@forward '_typography'
+@forward '_utilities'
+@forward '_variant'
+@forward '_display'
@@ -0,0 +1,12 @@
+@use '../settings';
+
+@mixin layer ($name) {
+  @if ($name == 'transitions' or $name == 'trumps') {
+    $name: 'final.' + $name;
+  }
+  @at-root (without: layer) {
+    @layer vuetify-#{$name} {
+      @content;
+    }
+  }
+}
@@ -0,0 +1,4 @@
+@mixin position($positions)
+  @each $position in $positions
+    &--#{$position}
+      position: #{$position}
@@ -0,0 +1,3 @@
+@mixin rounded($radius: null)
+  &
+    border-radius: $radius
@@ -0,0 +1,11 @@
+@use 'sass:selector'
+
+@mixin rtl()
+  @at-root #{selector.append('.v-locale--is-rtl', &)},
+  .v-locale--is-rtl &
+    @content
+
+@mixin ltr()
+  @at-root #{selector.append('.v-locale--is-ltr', &)},
+  .v-locale--is-ltr &
+    @content
@@ -0,0 +1,42 @@
+@use 'sass:map'
+@use 'sass:string'
+@use '../settings'
+
+@mixin states ($selector: '&::before', $active: true)
+  @if string.slice(string.unquote($selector), 1, 1) != '&'
+    $selector: #{'>'} #{$selector}
+
+  &:hover
+    #{$selector}
+      opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
+
+  &:focus-visible
+    #{$selector}
+      opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
+
+  @supports not selector(:focus-visible)
+    &:focus
+      #{$selector}
+        opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
+
+  @if ($active)
+    &--active,
+    &[aria-haspopup="menu"][aria-expanded="true"]
+      @include active-states($selector)
+
+@mixin active-states ($selector, $base: map.get(settings.$states, 'activated'))
+  #{$selector}
+    opacity: calc(#{$base} * var(--v-theme-overlay-multiplier))
+
+  &:hover
+    #{$selector}
+      opacity: calc((#{$base} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
+
+  &:focus-visible
+    #{$selector}
+      opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
+
+  @supports not selector(:focus-visible)
+    &:focus
+      #{$selector}
+        opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
@@ -0,0 +1,4 @@
+@mixin theme ($background, $color)
+  &
+    background: $background
+    color: $color
@@ -0,0 +1,7 @@
+@mixin typography ($font-size, $font-weight, $letter-spacing, $line-height, $text-transform)
+  &
+    font-size: $font-size
+    font-weight: $font-weight
+    letter-spacing: $letter-spacing
+    line-height: $line-height
+    text-transform: $text-transform
@@ -0,0 +1,63 @@
+@use 'sass:list'
+@use 'sass:map'
+@use 'sass:meta'
+
+=generate-utility($utility, $infix, $forceDir)
+  $values: map.get($utility, values)
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list"
+    $values: list.zip($values, $values)
+
+  @each $value in $values
+    $properties: map.get($utility, property)
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if meta.type-of($properties) == 'string'
+      $properties: list.append((), $properties)
+
+    // Property can be a map, where the key is a mixin to include
+    @if meta.type-of($properties) == 'map'
+      @each $dir in $properties
+        $mixin: list.nth($dir, 1)
+        // SASS doesn't support dynamic mixin invocation
+        // https://github.com/sass/sass/issues/626
+        @if $mixin == 'ltr'
+          .v-locale--is-ltr
+            @include generate-utility-body($utility, list.nth($dir, 2), $value, $infix)
+        @else if $mixin == 'rtl'
+          .v-locale--is-rtl
+            @include generate-utility-body($utility, list.nth($dir, 2), $value, $infix)
+        @else
+          @error 'Only RTL and LTR are supported'
+    @else
+      @if $forceDir == 'ltr'
+        .v-locale--is-ltr
+          @include generate-utility-body($utility, $properties, $value, $infix)
+      @else if $forceDir == 'rtl'
+        .v-locale--is-rtl
+          @include generate-utility-body($utility, $properties, $value, $infix)
+      @else
+        @include generate-utility-body($utility, $properties, $value, $infix)
+
+=generate-utility-body($utility, $properties, $value, $infix)
+  // Use custom class if present
+  $property-class: map.get($utility, class)
+  @if not $property-class
+    $property-class: list.nth($properties, 1)
+
+  // Don't prefix if value key is null (eg. with shadow class)
+  $property-class-modifier: ''
+  @if list.nth($value, 1)
+    $property-class-modifier: '-' + list.nth($value, 1)
+
+  $value: list.nth($value, 2)
+
+  .#{$property-class + $infix + $property-class-modifier}
+    @for $i from 1 through list.length($properties)
+      $property: list.nth($properties, $i)
+      $val: $value
+      @if meta.type-of($value) == 'list' and list.length($properties) == list.length($value)
+        $val: list.nth($value, $i)
+      @if $val != false
+        #{$property}: #{meta.inspect($val)}
@@ -0,0 +1,55 @@
+@use "./absolute" as *
+@use "./elevation" as *
+@use "../settings/variables" as *
+
+@mixin variant($contained-background, $contained-color, $contained-elevation, $plain-opacity, $name)
+  &--variant-plain,
+  &--variant-outlined,
+  &--variant-text,
+  &--variant-tonal
+    background: transparent
+    color: inherit
+
+  &--variant-plain
+    opacity: $plain-opacity
+
+    &:focus,
+    &:hover
+      opacity: 1
+
+  &--variant-plain
+    .#{$name}__overlay
+      display: none
+
+  &--variant-elevated,
+  &--variant-flat
+    background: $contained-background
+    color: $contained-color
+
+  @if ($contained-elevation > 0)
+    &--variant-elevated
+      @include elevation($contained-elevation)
+
+  &--variant-flat
+    @include elevation(0)
+
+  &--variant-outlined
+    border: $border-width-root solid currentColor
+
+  &--variant-text
+    .#{$name}__overlay
+      background: currentColor
+
+  &--variant-tonal
+    .#{$name}__underlay
+      background: currentColor
+      opacity: var(--v-activated-opacity)
+      border-radius: inherit
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      pointer-events: none
+
+  .#{$name}__underlay
+    position: absolute
@@ -0,0 +1 @@
+@use './utilities/index';
@@ -0,0 +1,12 @@
+@use 'sass:list'
+@use 'sass:map'
+@use '../settings'
+@use '../tools'
+
+@if (settings.$utilities != false and map.get(settings.$misc, 'hidden') != false and list.length(settings.$utilities) > 0)
+  @include tools.layer('utilities.helpers')
+    @each $size, $media_query in settings.$display-breakpoints
+      .hidden
+        &-#{$size}
+          @media #{$media_query}
+            display: none !important
@@ -0,0 +1,24 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '../tools';
+@use '../settings';
+
+@if (settings.$utilities != false and map.get(settings.$misc, 'elevation') != false and list.length(settings.$utilities) > 0) {
+  @property --v-elevation-overlay {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+  }
+
+  @include tools.layer('utilities.helpers') {
+    @for $z from 0 through 5 {
+      .elevation-#{$z} {
+        @include tools.elevation($z);
+      }
+    }
+
+    .elevation-overlay {
+      background-image: linear-gradient(var(--v-elevation-overlay), var(--v-elevation-overlay));
+    }
+  }
+}
@@ -0,0 +1,54 @@
+@use 'sass:string'
+@use 'sass:map'
+@use 'sass:meta'
+@use '../settings'
+@use '../tools'
+@use './display'
+@use './elevation'
+@use './pointer-events'
+@use './screenreaders'
+
+@include tools.layer('utilities.typography')
+  $typography: map.get(settings.$utilities, 'typography')
+  @if not ($typography == null or $typography == false)
+    @each $breakpoint in map.keys(settings.$grid-breakpoints)
+      @include tools.media-breakpoint-up($breakpoint)
+        $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints)
+        @if map.get($typography, responsive) or $infix == ""
+          @include tools.generate-utility($typography, $infix, 'bidi')
+
+@include tools.layer('utilities.helpers')
+  @each $breakpoint in map.keys(settings.$grid-breakpoints)
+    // Generate media query if needed
+    @include tools.media-breakpoint-up($breakpoint)
+      $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints)
+
+      // Loop over each utility property
+      @each $key, $utility in settings.$utilities
+        @if not ($key == 'typography')
+          // The utility can be disabled with `false`, thus check if the utility is a map first
+          // Only proceed if responsive media queries are enabled or if it's the base media query
+          @if string.slice($key, -4) == ':ltr'
+            @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+              @include tools.generate-utility($utility, $infix, 'ltr')
+          @else if string.slice($key, -4) == ':rtl'
+            @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+              @include tools.generate-utility($utility, $infix, 'rtl')
+          @else
+            @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+              @include tools.generate-utility($utility, $infix, 'bidi')
+
+  // Print utilities
+  @media print
+    @each $key, $utility in settings.$utilities
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Then check if the utility needs print styles
+      @if string.slice($key, -4) == ':ltr'
+        @if meta.type-of($utility) == "map" and map.get($utility, print) == true
+          @include tools.generate-utility($utility, "-print", 'ltr')
+      @else if string.slice($key, -4) == ':rtl'
+        @if meta.type-of($utility) == "map" and map.get($utility, print) == true
+          @include tools.generate-utility($utility, "-print", 'rtl')
+      @else
+        @if meta.type-of($utility) == "map" and map.get($utility, print) == true
+          @include tools.generate-utility($utility, "-print", 'bidi')
@@ -0,0 +1,17 @@
+@use 'sass:list'
+@use 'sass:map'
+@use '../settings'
+@use '../tools'
+
+@if (settings.$utilities != false and map.get(settings.$misc, 'pointer-events') != false and list.length(settings.$utilities) > 0)
+  @include tools.layer('utilities.helpers')
+    .pointer-events-none
+      pointer-events: none !important
+
+    .pointer-events-auto
+      pointer-events: auto !important
+
+    .pointer-pass-through
+      pointer-events: none !important
+      > *
+        pointer-events: auto !important
@@ -0,0 +1,19 @@
+// Source: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+@use 'sass:list'
+@use 'sass:map'
+@use '../settings'
+@use '../tools'
+
+@if (settings.$utilities != false and map.get(settings.$misc, 'sr-only') != false and list.length(settings.$utilities) > 0)
+  @include tools.layer('utilities.helpers')
+    .d-sr-only,
+    .d-sr-only-focusable:not(:focus)
+      border: 0 !important
+      clip: rect(0, 0, 0, 0) !important
+      height: 1px !important
+      margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686
+      overflow: hidden !important
+      padding: 0 !important
+      position: absolute !important
+      white-space: nowrap !important
+      width: 1px !important
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"styles.js","names":[],"sources":["../../src/styles/styles.ts"],"sourcesContent":["// Empty declaration file for noUncheckedSideEffectImports\n"],"mappings":"AAAA","ignoreList":[]}`