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

frontend/node_modules/vuetify/lib/styles/tools/_states.sass

@@ -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))