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

frontend/node_modules/vuetify/lib/components/VAlert/VAlert.sass

@@ -0,0 +1,165 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-alert
+    display: grid
+    flex: 1 1
+    grid-template-areas: "prepend content append close" ". content . ."
+    grid-template-columns: max-content auto max-content max-content
+    position: relative
+    padding: $alert-padding
+    overflow: hidden
+    --v-border-color: #{$alert-border-color}
+
+    @include tools.position($alert-positions)
+    @include tools.rounded($alert-border-radius)
+    @include tools.variant($alert-variants...)
+
+    &--prominent
+      grid-template-areas: "prepend content append close" "prepend content . ."
+
+    &.v-alert--border
+      --v-border-opacity: #{$alert-border-opacity}
+
+      &.v-alert--border-start
+        padding-inline-start: $alert-padding + $alert-border-thin-width
+
+      &.v-alert--border-end
+        padding-inline-end: $alert-padding + $alert-border-thin-width
+
+    &--variant-plain
+      transition: $alert-plain-transition
+
+    @at-root
+      @include tools.density('v-alert', $alert-density) using ($modifier)
+        padding-bottom: $alert-padding + $modifier
+        padding-top: $alert-padding + $modifier
+
+        &.v-alert--border-top
+          padding-top: $alert-padding + $alert-border-thin-width + $modifier
+
+        &.v-alert--border-bottom
+          padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
+
+    &:not(:has(.v-alert-title))
+      .v-alert__content
+        padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2)
+
+  .v-alert__border
+    border-radius: inherit
+    bottom: 0
+    left: 0
+    opacity: var(--v-border-opacity)
+    position: absolute
+    pointer-events: none
+    right: 0
+    top: 0
+    width: 100%
+
+    @include tools.border($alert-border...)
+
+    .v-alert--border-start &
+      border-inline-start-width: $alert-border-thin-width
+
+    .v-alert--border-end &
+      border-inline-end-width: $alert-border-thin-width
+
+    .v-alert--border-top &
+      border-top-width: $alert-border-thin-width
+
+    .v-alert--border-bottom &
+      border-bottom-width: $alert-border-thin-width
+
+  .v-alert__close
+    flex: 0 1 auto
+    grid-area: close
+
+    > .v-btn
+      margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2)
+
+  .v-alert__content
+    align-self: center
+    grid-area: content
+    overflow: hidden
+
+    > :first-child
+      margin-top: 0
+
+    > :last-child
+      margin-bottom: 0
+
+  .v-alert__append,
+  .v-alert__close
+    margin-inline-start: $alert-append-margin-inline-start
+
+  .v-alert__append
+    align-self: flex-start
+    grid-area: append
+
+    + .v-alert__close
+      margin-inline-start: $alert-append-close-margin-inline-start
+
+  .v-alert__prepend
+    align-self: flex-start
+    display: flex
+    align-items: center
+    grid-area: prepend
+    margin-inline-end: $alert-prepend-margin-inline-end
+    min-height: $alert-prepend-icon-size
+
+    > .v-icon
+      font-size: $alert-prepend-icon-size
+      height: $alert-prepend-icon-size
+      width: $alert-prepend-icon-size
+
+    .v-alert--prominent &
+      align-self: center
+
+  .v-alert__underlay
+    grid-area: none
+    position: absolute
+
+    .v-alert--border-start &
+      border-top-left-radius: 0
+      border-bottom-left-radius: 0
+
+    .v-alert--border-end &
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
+
+    .v-alert--border-top &
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+
+    .v-alert--border-bottom &
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
+
+  .v-alert-title
+    align-items: center
+    align-self: center
+    display: flex
+    font-size: $alert-title-font-size
+    font-weight: $alert-title-font-weight
+    hyphens: $alert-title-hyphens
+    letter-spacing: $alert-title-letter-spacing
+    line-height: $alert-title-line-height
+    overflow-wrap: $alert-title-overflow-wrap
+    text-transform: $alert-title-text-transform
+    word-break: $alert-title-word-break
+    word-wrap: $alert-title-word-wrap
+
+  @media (forced-colors: active)
+    .v-alert
+      &:not(&--variant-text, &--variant-plain)
+        border-style: solid
+
+      &--variant-outlined,
+      &--variant-tonal
+        border-width: medium
+
+      &--variant-elevated,
+      &--variant-flat
+        border-width: thick