maz-ui 3.0.1 → 3.0.3

package/css/main.css

@@ -384,35 +384,36 @@ html.dark {
 * Tabs Transisiton
 */
 
-.maz-tab-transition-enter-from {
+.maz-tab-transition {
+  &-enter-from {
     -webkit-transform: translate(100%, 0);
             transform: translate(100%, 0);
   }
-
-.maz-tab-transition-leave,
-  .maz-tab-transition-leave-active {
+  &-leave,
+  &-leave-active {
     position: absolute !important;
     top: 0;
   }
-
-.maz-tab-transition-leave-to {
+  &-leave-to {
     position: absolute !important;
     -webkit-transform: translate(-100%, 0);
             transform: translate(-100%, 0);
   }
+}
 
-.maz-tab-reverse-transition-enter-from {
+.maz-tab-reverse-transition {
+  &-enter-from {
     -webkit-transform: translate(-100%, 0);
             transform: translate(-100%, 0);
   }
-
-.maz-tab-reverse-transition-leave,
-  .maz-tab-reverse-transition-leave-to {
+  &-leave,
+  &-leave-to {
     top: 0;
     position: absolute !important;
     -webkit-transform: translate(100%, 0);
             transform: translate(100%, 0);
   }
+}
 
 html.--backdrop-present {
   overflow-y: hidden;
@@ -423,9 +424,7 @@ html.--backdrop-present {
 .m-backdrop.bottom-sheet-anim-leave-active {
   -webkit-transition: opacity ease-in-out 250ms;
   transition: opacity ease-in-out 250ms;
-}
-
-.m-backdrop.bottom-sheet-anim-enter-active .m-backdrop-content, .m-backdrop.bottom-sheet-anim-leave-active .m-backdrop-content {
+  & .m-backdrop-content {
     -webkit-transition: -webkit-transform ease-in-out 250ms;
     transition: -webkit-transform ease-in-out 250ms;
     transition: transform ease-in-out 250ms;
@@ -433,24 +432,22 @@ html.--backdrop-present {
     -webkit-transform: translateY(0);
             transform: translateY(0);
   }
+}
 
 .m-backdrop.bottom-sheet-anim-enter-from,
 .m-backdrop.bottom-sheet-anim-leave-to {
   opacity: 0;
-}
-
-.m-backdrop.bottom-sheet-anim-enter-from .m-backdrop-content, .m-backdrop.bottom-sheet-anim-leave-to .m-backdrop-content {
+  & .m-backdrop-content {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
+}
 
 .m-backdrop.modal-anim-enter-active,
 .m-backdrop.modal-anim-leave-active {
   -webkit-transition: opacity ease-in-out 250ms;
   transition: opacity ease-in-out 250ms;
-}
-
-.m-backdrop.modal-anim-enter-active .m-backdrop-content, .m-backdrop.modal-anim-leave-active .m-backdrop-content {
+  & .m-backdrop-content {
     -webkit-transition: -webkit-transform ease-in-out 250ms;
     transition: -webkit-transform ease-in-out 250ms;
     transition: transform ease-in-out 250ms;
@@ -458,16 +455,16 @@ html.--backdrop-present {
     -webkit-transform: translateY(0);
             transform: translateY(0);
   }
+}
 
 .m-backdrop.modal-anim-enter-from,
 .m-backdrop.modal-anim-leave-to {
   opacity: 0;
-}
-
-.m-backdrop.modal-anim-enter-from .m-backdrop-content, .m-backdrop.modal-anim-leave-to .m-backdrop-content {
+  & .m-backdrop-content {
     -webkit-transform: translateY(-25px);
             transform: translateY(-25px);
   }
+}
 
 .m-backdrop.backdrop-anim-enter-active,
 .m-backdrop.backdrop-anim-leave-active {
@@ -499,76 +496,87 @@ html.--backdrop-present {
   -webkit-backdrop-filter: blur(3px);
           backdrop-filter: blur(3px);
   z-index: 1050;
-}
-
-.m-backdrop-overlay {
+  &-overlay {
     -ms-touch-action: none;
-        touch-action: none;
+        touch-action: none
+  }
+  &-overlay {
     position: absolute;
+  }
+  &-overlay {
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
+  }
+  &-overlay {
     background-color: var(--maz-bg-overlay);
   }
-
-.m-backdrop-overlay:not(.--disabled) {
+  &-overlay {
+    &:not(.--disabled) {
       cursor: pointer;
     }
-
-.m-backdrop-content {
+  }
+  &-content {
     position: relative;
+  }
+  &-content {
     z-index: 1;
   }
-
-.m-backdrop-content:focus {
+  &-content:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
-
-.m-backdrop.--bottom-sheet .m-backdrop-content {
+  &.--bottom-sheet {
+    & .m-backdrop-content {
       position: absolute;
-      right: 0px;
+    }
+    & .m-backdrop-content {
       bottom: 0px;
+    }
+    & .m-backdrop-content {
       left: 0px;
     }
-
-.m-backdrop.--fullscreen {
+    & .m-backdrop-content {
+      right: 0px;
+    }
+  }
+  &.--fullscreen {
     -webkit-box-align: start;
         -ms-flex-align: start;
-            align-items: flex-start
+            align-items: flex-start;
   }
-
-@media (min-width: 576px) {
-    .m-backdrop.--fullscreen {
+  @media (min-width: 576px) {
+    &.--fullscreen {
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
     }
   }
-
-.m-backdrop.--fullscreen.--center-top {
+  &.--fullscreen {
+    &.--center-top {
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: flex-start;
     }
-
-@media (min-width: 576px) {
-      .m-backdrop.--fullscreen.--center-top {
+    @media (min-width: 576px) {
+      &.--center-top {
         padding-top: 7rem;
       }
     }
-
-.m-backdrop.--fullscreen .m-backdrop-content {
+    & .m-backdrop-content {
       position: relative;
+    }
+    & .m-backdrop-content {
       width: 100%;
     }
-
-@media (min-width: 576px) {
-      .m-backdrop.--fullscreen .m-backdrop-content {
+    @media (min-width: 576px) {
+      & .m-backdrop-content {
         width: auto;
       }
     }
+  }
+}
 
 .m-drawer {
   -webkit-box-align: stretch;
@@ -577,119 +585,285 @@ html.--backdrop-present {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
-}
-
-.m-drawer .m-drawer-content-wrap {
+  & .m-drawer-content-wrap {
     overflow-y: auto;
+  }
+  & .m-drawer-content-wrap {
     background-color: var(--maz-color-bg-light);
+  }
+  & .m-drawer-content-wrap {
     color: var(--maz-color-text);
   }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
+  .m-drawer-content-wrap > .m-drawer-header {
     z-index: 1;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     height: 4rem;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     -ms-flex-negative: 0;
         flex-shrink: 0;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     background-color: var(--maz-color-bg);
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     background-clip: padding-box;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     padding-left: 1rem;
     padding-right: 1rem;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
+  }
+  .m-drawer-content-wrap > .m-drawer-header {
     -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
             box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
   }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
+  .m-drawer-content-wrap > .m-drawer-body {
     z-index: 0;
+  }
+  .m-drawer-content-wrap > .m-drawer-body {
     min-height: 0px;
+  }
+  .m-drawer-content-wrap > .m-drawer-body {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 0%;
             flex: 1 1 0%;
+  }
+  .m-drawer-content-wrap > .m-drawer-body {
     overflow-x: auto;
+  }
+  .m-drawer-content-wrap > .m-drawer-body {
     background-color: var(--maz-color-bg-light);
-    background-clip: padding-box;
   }
-
-.m-drawer.--right {
-    /* & .m-backdrop-content > .m-drawer-content-wrap {
-      @apply lap-s:maz-h-auto;
-    } */
+  .m-drawer-content-wrap > .m-drawer-body {
+    background-clip: padding-box;
   }
-
-.m-drawer.--right .m-backdrop-content {
+  &.--right {
+    & .m-backdrop-content {
       height: auto;
+    }
+    & .m-backdrop-content {
       min-height: 100vh;
+    }
+    & .m-backdrop-content {
       -webkit-transition: all 0.45s;
       transition: all 0.45s;
       width: 100%;
-    }
-
-@media (min-width: 768px) {
-
-.m-drawer.--right .m-backdrop-content {
-        width: var(--maz-drawer-size)
-    }
+      @media (min-width: 768px) {
+        width: var(--maz-drawer-size);
       }
-
-.m-drawer.--right.backdrop-anim-enter-from > .m-backdrop-content,
-    .m-drawer.--right.backdrop-anim-leave-to > .m-backdrop-content {
+    }
+    &.backdrop-anim-enter-from > .m-backdrop-content,
+    &.backdrop-anim-leave-to > .m-backdrop-content {
       opacity: 0;
       -webkit-transform: translateX(100%);
               transform: translateX(100%);
     }
-
-.m-drawer.--top {
+    /* & .m-backdrop-content > .m-drawer-content-wrap {
+      @apply lap-s:maz-h-auto;
+    } */
+  }
+  &.--top {
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start;
   }
-
-.m-drawer.--top .m-backdrop-content {
+  &.--top {
+    & .m-backdrop-content {
       -webkit-transition: all 0.45s;
       transition: all 0.45s;
       width: 100%;
       height: 100vh;
-    }
-
-@media (min-width: 768px) {
-
-.m-drawer.--top .m-backdrop-content {
-        height: auto
-    }
+      @media (min-width: 768px) {
+        height: auto;
       }
-
-.m-drawer.--top.backdrop-anim-enter-from > .m-backdrop-content,
-    .m-drawer.--top.backdrop-anim-leave-to > .m-backdrop-content {
+    }
+    &.backdrop-anim-enter-from > .m-backdrop-content,
+    &.backdrop-anim-leave-to > .m-backdrop-content {
       opacity: 0;
       -webkit-transform: translateY(-100%);
               transform: translateY(-100%);
     }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
+  }
+  & .m-backdrop-content > .m-drawer-content-wrap {
     pointer-events: auto;
+  }
+  & .m-backdrop-content > .m-drawer-content-wrap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+  }
+  & .m-backdrop-content > .m-drawer-content-wrap {
     height: 100%;
+  }
+  & .m-backdrop-content > .m-drawer-content-wrap {
     width: 100%;
+  }
+  & .m-backdrop-content > .m-drawer-content-wrap {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
+  }
+  & .m-backdrop-content > .m-drawer-content-wrap {
     -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
             box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
   }
+}
 
 *, ::before, ::after {
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::-webkit-backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
 }
 
 :root {
@@ -739,81 +913,76 @@ html.--backdrop-present {
   left: 0px;
 }
 
-.maz-top-0 {
-  top: 0px;
+.maz-top-4 {
+  top: 1rem;
 }
 
-.maz-top-1 {
-  top: 0.25rem;
+.maz-top-0 {
+  top: 0px;
 }
 
-.maz-top-4 {
-  top: 1rem;
+.maz-left-0 {
+  left: 0px;
 }
 
-.maz-top-1\/2 {
-  top: 50%;
+.maz-left-4 {
+  left: 1rem;
 }
 
-.maz--top-1\/2 {
-  top: -50%;
+.maz-top-1 {
+  top: 0.25rem;
 }
 
-.maz-right-0 {
-  right: 0px;
+.maz-left-1 {
+  left: 0.25rem;
 }
 
 .maz-bottom-0 {
   bottom: 0px;
 }
 
-.maz-left-0 {
-  left: 0px;
-}
-
-.maz-left-1 {
-  left: 0.25rem;
+.maz-right-0 {
+  right: 0px;
 }
 
-.maz-left-4 {
-  left: 1rem;
+.maz-top-1\/2 {
+  top: 50%;
 }
 
-.maz-z-0 {
-  z-index: 0;
+.maz--top-1\/2 {
+  top: -50%;
 }
 
 .maz-z-1 {
   z-index: 1;
 }
 
-.maz-z-2 {
-  z-index: 2;
-}
-
 .maz-z-20 {
   z-index: 20;
 }
 
-.maz-z-50 {
-  z-index: 50;
-}
-
 .maz-z-100 {
   z-index: 100;
 }
 
+.maz-z-0 {
+  z-index: 0;
+}
+
 .maz-z-default-backdrop {
   z-index: 1050;
 }
 
-.maz-m-0 {
-  margin: 0px;
+.maz-z-2 {
+  z-index: 2;
 }
 
-.maz-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.maz-z-50 {
+  z-index: 50;
+}
+
+.maz-m-0 {
+  margin: 0px;
 }
 
 .maz-my-0 {
@@ -826,6 +995,16 @@ html.--backdrop-present {
   margin-bottom: 0.5rem;
 }
 
+.\!maz-my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
+.maz-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .maz-mt-2 {
   margin-top: 0.5rem;
 }
@@ -834,6 +1013,14 @@ html.--backdrop-present {
   margin-right: 0.5rem;
 }
 
+.maz--ml-1 {
+  margin-left: -0.25rem;
+}
+
+.maz-ml-2 {
+  margin-left: 0.5rem;
+}
+
 .maz--mr-1 {
   margin-right: -0.25rem;
 }
@@ -850,14 +1037,6 @@ html.--backdrop-present {
   margin-left: 0.25rem;
 }
 
-.maz-ml-2 {
-  margin-left: 0.5rem;
-}
-
-.maz--ml-1 {
-  margin-left: -0.25rem;
-}
-
 .maz-block {
   display: block;
 }
@@ -882,32 +1061,28 @@ html.--backdrop-present {
   display: none;
 }
 
-.maz-h-4 {
-  height: 1rem;
-}
-
-.maz-h-5 {
-  height: 1.25rem;
+.maz-h-12 {
+  height: 3rem;
 }
 
 .maz-h-6 {
   height: 1.5rem;
 }
 
-.maz-h-7 {
-  height: 1.75rem;
+.maz-h-5 {
+  height: 1.25rem;
 }
 
-.maz-h-8 {
-  height: 2rem;
+.maz-h-1\/2 {
+  height: 50%;
 }
 
-.maz-h-9 {
-  height: 2.25rem;
+.maz-h-full {
+  height: 100%;
 }
 
-.maz-h-12 {
-  height: 3rem;
+.maz-h-4 {
+  height: 1rem;
 }
 
 .maz-h-16 {
@@ -918,12 +1093,20 @@ html.--backdrop-present {
   height: auto;
 }
 
-.maz-h-1\/2 {
-  height: 50%;
+.maz-h-9 {
+  height: 2.25rem;
 }
 
-.maz-h-full {
-  height: 100%;
+.maz-h-\[70px\] {
+  height: 70px;
+}
+
+.maz-h-7 {
+  height: 1.75rem;
+}
+
+.maz-h-8 {
+  height: 2rem;
 }
 
 .maz-max-h-full {
@@ -934,52 +1117,56 @@ html.--backdrop-present {
   min-height: 0px;
 }
 
-.maz-w-0 {
-  width: 0px;
+.maz-w-full {
+  width: 100%;
+}
+
+.maz-w-12 {
+  width: 3rem;
 }
 
 .maz-w-5 {
   width: 1.25rem;
 }
 
-.maz-w-6 {
-  width: 1.5rem;
-}
+.maz-w-0 {
+  width: 0px;
+}
 
-.maz-w-7 {
-  width: 1.75rem;
+.maz-w-max {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
-.maz-w-9 {
-  width: 2.25rem;
+.maz-w-min {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
 }
 
 .maz-w-10 {
   width: 2.5rem;
 }
 
-.maz-w-12 {
-  width: 3rem;
+.maz-w-6 {
+  width: 1.5rem;
 }
 
 .maz-w-3\/5 {
   width: 60%;
 }
 
-.maz-w-full {
-  width: 100%;
+.maz-w-9 {
+  width: 2.25rem;
 }
 
-.maz-w-min {
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
+.maz-w-\[70px\] {
+  width: 70px;
 }
 
-.maz-w-max {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
+.maz-w-7 {
+  width: 1.75rem;
 }
 
 .maz-min-w-0 {
@@ -996,19 +1183,19 @@ html.--backdrop-present {
   max-width: min-content;
 }
 
-.maz-flex-1 {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 0%;
-          flex: 1 1 0%;
-}
-
 .maz-flex-none {
   -webkit-box-flex: 0;
       -ms-flex: none;
           flex: none;
 }
 
-.maz-flex-shrink-0 {
+.maz-flex-1 {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
+}
+
+.maz-shrink-0 {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
@@ -1020,6 +1207,8 @@ html.--backdrop-present {
 
 .maz-rotate-0 {
   --tw-rotate: 0deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 @-webkit-keyframes maz-spin {
@@ -1036,66 +1225,6 @@ html.--backdrop-present {
   }
 }
 
-@-webkit-keyframes maz-ping {
-  75%, 100% {
-    -webkit-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes maz-ping {
-  75%, 100% {
-    -webkit-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes maz-pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes maz-pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
-@-webkit-keyframes maz-bounce {
-  0%, 100% {
-    -webkit-transform: translateY(-25%);
-            transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    -webkit-transform: none;
-            transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
-@keyframes maz-bounce {
-  0%, 100% {
-    -webkit-transform: translateY(-25%);
-            transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    -webkit-transform: none;
-            transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .maz-animate-spin {
   -webkit-animation: maz-spin 1s linear infinite;
           animation: maz-spin 1s linear infinite;
@@ -1194,10 +1323,6 @@ html.--backdrop-present {
           justify-content: space-between;
 }
 
-.maz-gap-0 {
-  gap: 0px;
-}
-
 .maz-gap-1 {
   gap: 0.25rem;
 }
@@ -1206,10 +1331,14 @@ html.--backdrop-present {
   gap: 0.5rem;
 }
 
-.maz-space-x-1 > :not([hidden]) ~ :not([hidden]) {
+.maz-gap-0 {
+  gap: 0px;
+}
+
+.maz-space-x-5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .maz-space-x-2 > :not([hidden]) ~ :not([hidden]) {
@@ -1218,10 +1347,10 @@ html.--backdrop-present {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.maz-space-x-5 > :not([hidden]) ~ :not([hidden]) {
+.maz-space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .maz-space-y-1 > :not([hidden]) ~ :not([hidden]) {
@@ -1271,24 +1400,24 @@ html.--backdrop-present {
   white-space: nowrap;
 }
 
-.maz-rounded-none {
-  border-radius: 0px;
-}
-
-.maz-rounded {
-  border-radius: 0.25rem;
+.maz-rounded-full {
+  border-radius: 9999px;
 }
 
 .maz-rounded-lg {
   border-radius: 0.5rem;
 }
 
+.maz-rounded {
+  border-radius: 0.25rem;
+}
+
 .maz-rounded-xl {
   border-radius: 0.75rem;
 }
 
-.maz-rounded-full {
-  border-radius: 9999px;
+.maz-rounded-none {
+  border-radius: 0px;
 }
 
 .maz-rounded-t-xl {
@@ -1314,28 +1443,32 @@ html.--backdrop-present {
   border-width: 2px;
 }
 
+.maz-border-\[6px\] {
+  border-width: 6px;
+}
+
+.maz-border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .maz-border-t-2 {
   border-top-width: 2px;
 }
 
-.maz-border-t {
-  border-top-width: 2px;
+.maz-border-l-2 {
+  border-left-width: 2px;
 }
 
 .maz-border-r {
   border-right-width: 2px;
 }
 
-.maz-border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .maz-border-b {
   border-bottom-width: 2px;
 }
 
-.maz-border-l-2 {
-  border-left-width: 2px;
+.maz-border-t {
+  border-top-width: 2px;
 }
 
 .maz-border-l {
@@ -1354,211 +1487,206 @@ html.--backdrop-present {
   border-style: none;
 }
 
-.maz-border-transparent {
-  border-color: transparent;
+.maz-border-primary {
+  border-color: var(--maz-color-primary);
 }
 
-.maz-border-black {
-  border-color: var(--maz-color-black);
+.maz-border-primary-100 {
+  border-color: var(--maz-color-primary-100);
 }
 
-.maz-border-white {
-  border-color: var(--maz-color-white);
+.maz-border-info {
+  border-color: var(--maz-color-info);
 }
 
-.maz-border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
+.maz-border-info-100 {
+  border-color: var(--maz-color-info-100);
 }
 
 .maz-border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
-.maz-border-color-light {
-  border-color: var(--maz-color-bg-light);
+.maz-border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.maz-border-color-lighter {
-  border-color: var(--maz-color-bg-lighter);
+.maz-border-black {
+  border-color: var(--maz-color-black);
 }
 
-.maz-border-primary-100 {
-  border-color: var(--maz-color-primary-100);
+.maz-border-white {
+  border-color: var(--maz-color-white);
 }
 
-.maz-border-primary {
-  border-color: var(--maz-color-primary);
+.maz-border-secondary {
+  border-color: var(--maz-color-secondary);
 }
 
 .maz-border-secondary-100 {
   border-color: var(--maz-color-secondary-100);
 }
 
-.maz-border-secondary {
-  border-color: var(--maz-color-secondary);
+.maz-border-danger {
+  border-color: var(--maz-color-danger);
 }
 
-.maz-border-info-100 {
-  border-color: var(--maz-color-info-100);
+.maz-border-danger-100 {
+  border-color: var(--maz-color-danger-100);
 }
 
-.maz-border-info {
-  border-color: var(--maz-color-info);
+.maz-border-warning {
+  border-color: var(--maz-color-warning);
 }
 
-.maz-border-success-100 {
-  border-color: var(--maz-color-success-100);
+.maz-border-warning-100 {
+  border-color: var(--maz-color-warning-100);
 }
 
 .maz-border-success {
   border-color: var(--maz-color-success);
 }
 
-.maz-border-warning-100 {
-  border-color: var(--maz-color-warning-100);
+.maz-border-success-100 {
+  border-color: var(--maz-color-success-100);
 }
 
-.maz-border-warning {
-  border-color: var(--maz-color-warning);
+.maz-border-transparent {
+  border-color: transparent;
 }
 
-.maz-border-danger-100 {
-  border-color: var(--maz-color-danger-100);
+.maz-border-color-lighter {
+  border-color: var(--maz-color-bg-lighter);
 }
 
-.maz-border-danger {
-  border-color: var(--maz-color-danger);
+.maz-border-color-light {
+  border-color: var(--maz-color-bg-light);
 }
 
 .maz-bg-transparent {
   background-color: transparent;
 }
 
-.maz-bg-black {
-  background-color: var(--maz-color-black);
+.maz-bg-primary {
+  background-color: var(--maz-color-primary);
 }
 
-.maz-bg-white {
-  background-color: var(--maz-color-white);
+.maz-bg-primary-100 {
+  background-color: var(--maz-color-primary-100);
 }
 
-.maz-bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+.maz-bg-info {
+  background-color: var(--maz-color-info);
 }
 
-.maz-bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+.maz-bg-info-100 {
+  background-color: var(--maz-color-info-100);
 }
 
 .maz-bg-gray-400 {
   --tw-bg-opacity: 1;
-  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
-.maz-bg-gray-800 {
+.maz-bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.maz-bg-color {
-  background-color: var(--maz-color-bg);
+.maz-bg-black {
+  background-color: var(--maz-color-black);
 }
 
-.maz-bg-color-light {
-  background-color: var(--maz-color-bg-light);
+.maz-bg-white {
+  background-color: var(--maz-color-white);
 }
 
-.maz-bg-color-lighter {
-  background-color: var(--maz-color-bg-lighter);
+.maz-bg-secondary {
+  background-color: var(--maz-color-secondary);
 }
 
-.maz-bg-bg-light {
-  background-color: var(--maz-bg-color-light);
+.maz-bg-secondary-100 {
+  background-color: var(--maz-color-secondary-100);
 }
 
-.maz-bg-overlay {
-  background-color: var(--maz-bg-overlay);
+.maz-bg-danger {
+  background-color: var(--maz-color-danger);
 }
 
-.maz-bg-primary-50 {
-  background-color: var(--maz-color-primary-50);
+.maz-bg-danger-100 {
+  background-color: var(--maz-color-danger-100);
 }
 
-.maz-bg-primary-100 {
-  background-color: var(--maz-color-primary-100);
+.maz-bg-warning {
+  background-color: var(--maz-color-warning);
 }
 
-.maz-bg-primary {
-  background-color: var(--maz-color-primary);
+.maz-bg-warning-100 {
+  background-color: var(--maz-color-warning-100);
 }
 
-.maz-bg-secondary-50 {
-  background-color: var(--maz-color-secondary-50);
+.maz-bg-success {
+  background-color: var(--maz-color-success);
 }
 
-.maz-bg-secondary-100 {
-  background-color: var(--maz-color-secondary-100);
+.maz-bg-success-100 {
+  background-color: var(--maz-color-success-100);
 }
 
-.maz-bg-secondary {
-  background-color: var(--maz-color-secondary);
+.maz-bg-color {
+  background-color: var(--maz-color-bg);
 }
 
-.maz-bg-info-50 {
-  background-color: var(--maz-color-info-50);
+.maz-bg-primary-50 {
+  background-color: var(--maz-color-primary-50);
 }
 
-.maz-bg-info-100 {
-  background-color: var(--maz-color-info-100);
+.maz-bg-secondary-50 {
+  background-color: var(--maz-color-secondary-50);
 }
 
-.maz-bg-info {
-  background-color: var(--maz-color-info);
+.maz-bg-info-50 {
+  background-color: var(--maz-color-info-50);
 }
 
 .maz-bg-success-50 {
   background-color: var(--maz-color-success-50);
 }
 
-.maz-bg-success-100 {
-  background-color: var(--maz-color-success-100);
-}
-
-.maz-bg-success {
-  background-color: var(--maz-color-success);
+.maz-bg-danger-50 {
+  background-color: var(--maz-color-danger-50);
 }
 
 .maz-bg-warning-50 {
   background-color: var(--maz-color-warning-50);
 }
 
-.maz-bg-warning-100 {
-  background-color: var(--maz-color-warning-100);
+.maz-bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.maz-bg-warning {
-  background-color: var(--maz-color-warning);
+.maz-bg-color-lighter {
+  background-color: var(--maz-color-bg-lighter);
 }
 
-.maz-bg-danger-50 {
-  background-color: var(--maz-color-danger-50);
+.maz-bg-overlay {
+  background-color: var(--maz-bg-overlay);
 }
 
-.maz-bg-danger-100 {
-  background-color: var(--maz-color-danger-100);
+.maz-bg-color-light {
+  background-color: var(--maz-color-bg-light);
 }
 
-.maz-bg-danger {
-  background-color: var(--maz-color-danger);
+.maz-bg-bg-light {
+  background-color: var(--maz-bg-color-light);
 }
 
-.hover\:maz-bg-gray-900:hover {
+.maz-bg-gray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
 .maz-bg-clip-padding {
@@ -1569,44 +1697,39 @@ html.--backdrop-present {
   fill: currentColor;
 }
 
-.maz-p-0 {
-  padding: 0px;
+.maz-p-4 {
+  padding: 1rem;
 }
 
-.maz-p-1 {
-  padding: 0.25rem;
+.maz-p-3 {
+  padding: 0.75rem;
 }
 
 .maz-p-2 {
   padding: 0.5rem;
 }
 
-.maz-p-3 {
-  padding: 0.75rem;
-}
-
-.maz-p-4 {
-  padding: 1rem;
+.maz-p-0 {
+  padding: 0px;
 }
 
-.maz-px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
+.maz-p-1 {
+  padding: 0.25rem;
 }
 
-.maz-px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.maz-py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
-.maz-px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.maz-px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
-.maz-px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.maz-px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .maz-px-4 {
@@ -1614,29 +1737,24 @@ html.--backdrop-present {
   padding-right: 1rem;
 }
 
-.maz-px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.maz-px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.maz-px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
-.maz-py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
+.maz-px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
-.maz-py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+.maz-px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
-.maz-py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.maz-px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 .maz-py-3 {
@@ -1649,30 +1767,28 @@ html.--backdrop-present {
   padding-bottom: 1rem;
 }
 
-.maz-py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .maz-py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
-.maz-pt-2 {
-  padding-top: 0.5rem;
+.maz-py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 
-.maz-pr-1 {
-  padding-right: 0.25rem;
+.maz-py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
-.maz-pr-2 {
-  padding-right: 0.5rem;
+.maz-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-.maz-pl-2 {
-  padding-left: 0.5rem;
+.maz-pt-2 {
+  padding-top: 0.5rem;
 }
 
 .maz-pl-6 {
@@ -1683,6 +1799,18 @@ html.--backdrop-present {
   padding-left: 2.75rem;
 }
 
+.maz-pr-1 {
+  padding-right: 0.25rem;
+}
+
+.maz-pl-2 {
+  padding-left: 0.5rem;
+}
+
+.maz-pr-2 {
+  padding-right: 0.5rem;
+}
+
 .maz-text-left {
   text-align: left;
 }
@@ -1695,9 +1823,9 @@ html.--backdrop-present {
   text-align: right;
 }
 
-.maz-text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
+.maz-text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .maz-text-sm {
@@ -1705,11 +1833,6 @@ html.--backdrop-present {
   line-height: 1.25rem;
 }
 
-.maz-text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .maz-text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1720,6 +1843,11 @@ html.--backdrop-present {
   line-height: 2rem;
 }
 
+.maz-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .maz-font-medium {
   font-weight: 500;
 }
@@ -1736,20 +1864,6 @@ html.--backdrop-present {
   line-height: 2.5rem;
 }
 
-.maz-text-white {
-  color: var(--maz-color-white);
-}
-
-.maz-text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-text-opacity));
-}
-
-.maz-text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgba(55, 65, 81, var(--tw-text-opacity));
-}
-
 .maz-text-normal {
   color: var(--maz-color-text);
 }
@@ -1762,36 +1876,56 @@ html.--backdrop-present {
   color: var(--maz-color-primary);
 }
 
-.maz-text-info-contrast {
-  color: var(--maz-color-info-contrast);
+.maz-text-white {
+  color: var(--maz-color-white);
 }
 
-.maz-text-success-600 {
-  color: var(--maz-color-success-600);
+.maz-text-danger-600 {
+  color: var(--maz-color-danger-600);
 }
 
-.maz-text-success-contrast {
-  color: var(--maz-color-success-contrast);
+.maz-text-success-600 {
+  color: var(--maz-color-success-600);
 }
 
 .maz-text-warning-600 {
   color: var(--maz-color-warning-600);
 }
 
-.maz-text-warning-contrast {
-  color: var(--maz-color-warning-contrast);
+.maz-text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.maz-text-danger-600 {
-  color: var(--maz-color-danger-600);
+.maz-text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.maz-text-info-contrast {
+  color: var(--maz-color-info-contrast);
+}
+
+.maz-text-success-contrast {
+  color: var(--maz-color-success-contrast);
+}
+
+.maz-text-warning-contrast {
+  color: var(--maz-color-warning-contrast);
 }
 
 .maz-text-danger-contrast {
   color: var(--maz-color-danger-contrast);
 }
 
+.maz-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
 .maz-no-underline {
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
 .maz-opacity-0 {
@@ -1802,29 +1936,25 @@ html.--backdrop-present {
   opacity: 1;
 }
 
-*, ::before, ::after {
-  --tw-shadow: 0 0 #0000;
+.maz-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.maz-outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+.maz-shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus\:maz-outline-none:focus {
+.maz-outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-*, ::before, ::after {
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-}
-
 .maz-transition-all {
   -webkit-transition-property: all;
   transition-property: all;
@@ -1835,10 +1965,10 @@ html.--backdrop-present {
 }
 
 .maz-transition {
-  -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition-duration: 150ms;
@@ -1846,8 +1976,10 @@ html.--backdrop-present {
 }
 
 .maz-transition-colors {
-  -webkit-transition-property: background-color, border-color, color, fill, stroke;
-  transition-property: background-color, border-color, color, fill, stroke;
+  -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition-duration: 150ms;
@@ -1900,31 +2032,9 @@ html.--backdrop-present {
           justify-content: center;
 }
 
-@media (min-width: 640px) {
-}
-
-@media (min-width: 768px) {
-}
-
-@media (min-width: 1024px) {
-}
-
-@media (min-width: 1280px) {
-}
-
-@media (min-width: 1536px) {
-}
-
-@media (min-width: 320px) {
-}
-
-@media (min-width: 425px) {
-}
-
-@media (min-width: 576px) {
-}
-
-@media (min-width: 640px) {
+.focus\:maz-outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 @media (min-width: 768px) {
@@ -1940,24 +2050,3 @@ html.--backdrop-present {
     width: 20rem;
   }
 }
-
-@media (min-width: 992px) {
-}
-
-@media (min-width: 1024px) {
-}
-
-@media (min-width: 1280px) {
-}
-
-@media (min-width: 1366px) {
-}
-
-@media (min-width: 1440px) {
-}
-
-@media (min-width: 1680px) {
-}
-
-@media (min-width: 1920px) {
-}