daisyui 2.3.7-alpha.1 → 2.3.7-alpha.2

package/dist/unstyled.css

@@ -1,45 +1,52 @@
-.alert {display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: space-between;gap: 1rem
-}.alert > :not([hidden]) ~ :not([hidden]) {--tw-space-y-reverse: 0;margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
-}@media (min-width: 768px) {.alert {flex-direction: row
-    }.alert > :not([hidden]) ~ :not([hidden]) {--tw-space-y-reverse: 0;margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0px * var(--tw-space-y-reverse))
+.alert {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem
+}
+.alert > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+@media (min-width: 768px) {
+    .alert {
+        flex-direction: row
+    }
+    .alert > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-y-reverse: 0;
+        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+        margin-bottom: calc(0px * var(--tw-space-y-reverse))
     }
-}.alert > :where(*) {display: flex
-}.alert > :where(*) {align-items: center
-}.alert > :where(*) {gap: 0.5rem
+}
+  .alert > :where(*) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem
 }
 .artboard {
     width: 100%
 }
 .avatar {
     position: relative;
-    display: inline-flex;
+    display: inline-flex
 }
   .avatar > div {
     display: block;
-}
-  .avatar > div {
     aspect-ratio: 1 / 1;
-}
-  .avatar > div {
-    overflow: hidden;
+    overflow: hidden
 }
   .avatar img {
     height: 100%;
-}
-  .avatar img {
     width: 100%;
-}
-  .avatar img {
-    object-fit: cover;
+    object-fit: cover
 }
   .avatar.placeholder > div {
     display: flex;
-}
-  .avatar.placeholder > div {
     align-items: center;
-}
-  .avatar.placeholder > div {
-    justify-content: center;
+    justify-content: center
 }
 .badge {
   display: inline-flex;
@@ -57,37 +64,25 @@
 }
 .breadcrumbs {
     max-width: 100%;
-    overflow-x: auto;
+    overflow-x: auto
 }
   .breadcrumbs > ul {
     display: flex;
-}
-  .breadcrumbs > ul {
     align-items: center;
-}
-  .breadcrumbs > ul {
     white-space: nowrap;
+    min-height: min-content
 }
-  .breadcrumbs > ul {
-    min-height: min-content;
-  }
   .breadcrumbs > ul > li {
     display: flex;
-}
-  .breadcrumbs > ul > li {
-    align-items: center;
+    align-items: center
 }
   .breadcrumbs > ul > li > a {
     display: flex;
-}
-  .breadcrumbs > ul > li > a {
     cursor: pointer;
-}
-  .breadcrumbs > ul > li > a {
-    align-items: center;
+    align-items: center
 }
   .breadcrumbs > ul > li > a:hover {
-    text-decoration-line: underline;
+    text-decoration-line: underline
 }
 .btn {
   display: inline-flex;
@@ -122,29 +117,14 @@
 
   .btn-square {
   height: 3rem;
-}
-
-  .btn-square {
   width: 3rem;
-}
-
-  .btn-square {
   padding: 0px;
 }
 
   .btn-circle {
   height: 3rem;
-}
-
-  .btn-circle {
   width: 3rem;
-}
-
-  .btn-circle {
   border-radius: 9999px;
-}
-
-  .btn-circle {
   padding: 0px;
 }
 
@@ -156,32 +136,17 @@
 
   .btn.loading:before {
   margin-right: 0.5rem;
-}
-
-  .btn.loading:before {
   height: 1rem;
-}
-
-  .btn.loading:before {
   width: 1rem;
-}
-
-  .btn.loading:before {
   border-radius: 9999px;
-}
-
-  .btn.loading:before {
   border-width: 2px;
-}
-
-  .btn.loading:before {
       animation: spin 2s linear infinite;
       content: "";
       border-top-color: transparent;
       border-left-color: transparent;
       border-bottom-color: currentColor;
       border-right-color: currentColor;
-    }
+}
 @media (prefers-reduced-motion: reduce) {
   .btn.loading:before {
     animation: spin 10s linear infinite;
@@ -210,68 +175,48 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      overflow: hidden;
+      overflow: hidden
 }
   .card:focus {
       outline: 2px solid transparent;
-      outline-offset: 2px;
+      outline-offset: 2px
 }
   .card-body {
       display: flex;
-}
-  .card-body {
       flex: 1 1 auto;
-}
-  .card-body {
-      flex-direction: column;
+      flex-direction: column
 }
   .card-body :where(p) {
-      flex-grow: 1;
+      flex-grow: 1
 }
   .card-actions {
       display: flex;
-}
-  .card-actions {
       flex-wrap: wrap;
-}
-  .card-actions {
       align-items: flex-start;
-}
-  .card-actions {
-      gap: 0.5rem;
+      gap: 0.5rem
 }
   .card figure {
       display: flex;
-}
-  .card figure {
       align-items: center;
-}
-  .card figure {
-      justify-content: center;
+      justify-content: center
 }
   .card.image-full {
-      display: grid;
+      display: grid
 }
   .card.image-full:before {
       position: relative;
+      content: ""
 }
-  .card.image-full:before {
-      content: "";
-    }
   .card.image-full:before, .card.image-full > * {
       grid-column-start: 1;
-}
-  .card.image-full:before, .card.image-full > * {
-      grid-row-start: 1;
+      grid-row-start: 1
 }
   .card.image-full > figure img {
       height: 100%;
-}
-  .card.image-full > figure img {
-      object-fit: cover;
+      object-fit: cover
 }
   .card.image-full > .card-body {
-      position: relative;
+      position: relative
 }
 .carousel {
   display: flex;
@@ -281,25 +226,15 @@
 }
   .carousel-vertical {
   flex-direction: column;
-}
-  .carousel-vertical {
   overflow-y: scroll;
-}
-  .carousel-vertical {
     scroll-snap-type: y mandatory;
-  }
-  .carousel-item {
-  box-sizing: content-box;
 }
   .carousel-item {
+  box-sizing: content-box;
   display: flex;
-}
-  .carousel-item {
   flex: none;
-}
-  .carousel-item {
     scroll-snap-align: start;
-  }
+}
   .carousel-center .carousel-item {
     scroll-snap-align: center;
   }
@@ -340,14 +275,10 @@
   display: inline-flex;
 }
 .countdown > * {
-    height: 1em
+    height: 1em;
+    display: inline-block;
+    overflow-y: hidden;
   }
-.countdown > * {
-  display: inline-block;
-}
-.countdown > * {
-  overflow-y: hidden;
-}
 .countdown > *:before {
       position: relative;
       content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
@@ -363,16 +294,10 @@
   .divider:before,
   .divider:after {
     content: "";
-  }
-  .divider:before, .divider:after {
     flex-grow: 1;
-}
-  .divider:before, .divider:after {
     height: 0.125rem;
-}
-  .divider:before, .divider:after {
     width: 100%;
-}
+  }
 .drawer {
     display: grid;
     overflow: hidden;
@@ -387,8 +312,6 @@
   .drawer.drawer-end .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
     --tw-translate-x: 100%;
     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));
-}
-  .drawer.drawer-end .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
     justify-self: end;
 }
   .drawer.drawer-end .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
@@ -404,59 +327,30 @@
 }
 .drawer-toggle ~ .drawer-content {
     z-index: 0;
-}
-.drawer-toggle ~ .drawer-content {
     grid-column-start: 1;
-}
-.drawer-toggle ~ .drawer-content {
     grid-row-start: 1;
-}
-.drawer-toggle ~ .drawer-content {
     max-height: 100vh;
-}
-.drawer-toggle ~ .drawer-content {
     overflow-y: auto;
 }
 .drawer-toggle ~ .drawer-side {
     grid-column-start: 1;
-}
-.drawer-toggle ~ .drawer-side {
     grid-row-start: 1;
-}
-.drawer-toggle ~ .drawer-side {
     display: grid;
-}
-.drawer-toggle ~ .drawer-side {
     max-height: 100vh;
 }
 .drawer-toggle ~ .drawer-side > .drawer-overlay {
     visibility: hidden;
-}
-.drawer-toggle ~ .drawer-side > .drawer-overlay {
     grid-column-start: 1;
-}
-.drawer-toggle ~ .drawer-side > .drawer-overlay {
     grid-row-start: 1;
-}
-.drawer-toggle ~ .drawer-side > .drawer-overlay {
     opacity: 0;
 }
 .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
     z-index: 10;
-}
-.drawer-toggle ~ .drawer-side > .drawer-overlay + * {
     grid-column-start: 1;
-}
-.drawer-toggle ~ .drawer-side > .drawer-overlay + * {
     grid-row-start: 1;
-}
-.drawer-toggle ~ .drawer-side > .drawer-overlay + * {
     --tw-translate-x: -100%;
     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));
 }
-.drawer-toggle ~ .drawer-side > .drawer-overlay + * {
-    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));
-}
 .drawer-toggle:checked ~ .drawer-side {
     overflow-y: auto;
 }
@@ -589,14 +483,10 @@
 }
   .footer > * {
   display: grid;
-}
-  .footer > * {
   place-items: start;
 }
   .footer-center {
   place-items: center;
-}
-  .footer-center {
   text-align: center;
 }
   .footer-center > * {
@@ -625,37 +515,23 @@
     width: 100%;
     place-items: center;
     background-size: cover;
-    background-position: center;
+    background-position: center
 }
   .hero > * {
     grid-column-start: 1;
-}
-  .hero > * {
-    grid-row-start: 1;
+    grid-row-start: 1
 }
   .hero-overlay {
     grid-column-start: 1;
-}
-  .hero-overlay {
     grid-row-start: 1;
-}
-  .hero-overlay {
     height: 100%;
-}
-  .hero-overlay {
-    width: 100%;
+    width: 100%
 }
   .hero-content {
     z-index: 0;
-}
-  .hero-content {
     display: flex;
-}
-  .hero-content {
     align-items: center;
-}
-  .hero-content {
-    justify-content: center;
+    justify-content: center
 }
 .indicator {
   position: relative;
@@ -663,91 +539,49 @@
   width: fit-content;
 }
   .indicator .indicator-item {
-    z-index: 1
+    z-index: 1;
+    position: absolute;
+    right: 0px;
+    left: auto;
+    top: 0px;
+    bottom: auto;
+    --tw-translate-x: 50%;
+    --tw-translate-y: -50%;
+    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));
   }
-  .indicator .indicator-item {
-  position: absolute;
-}
-  .indicator .indicator-item {
-  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));
-}
-  .indicator .indicator-item {
-  right: 0px;
-}
-  .indicator .indicator-item {
-  left: auto;
-}
-  .indicator .indicator-item {
-  top: 0px;
-}
-  .indicator .indicator-item {
-  bottom: auto;
-}
-  .indicator .indicator-item {
-  --tw-translate-x: 50%;
-  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));
-}
-  .indicator .indicator-item {
-  --tw-translate-y: -50%;
-  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));
-}
   .indicator .indicator-item.indicator-start {
   right: auto;
-}
-  .indicator .indicator-item.indicator-start {
   left: 0px;
-}
-  .indicator .indicator-item.indicator-start {
   --tw-translate-x: -50%;
   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));
 }
   .indicator .indicator-item.indicator-center {
   right: 50%;
-}
-  .indicator .indicator-item.indicator-center {
   left: 50%;
-}
-  .indicator .indicator-item.indicator-center {
   --tw-translate-x: -50%;
   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));
 }
   .indicator .indicator-item.indicator-end {
   right: 0px;
-}
-  .indicator .indicator-item.indicator-end {
   left: auto;
-}
-  .indicator .indicator-item.indicator-end {
   --tw-translate-x: 50%;
   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));
 }
   .indicator .indicator-item.indicator-bottom {
   top: auto;
-}
-  .indicator .indicator-item.indicator-bottom {
   bottom: 0px;
-}
-  .indicator .indicator-item.indicator-bottom {
   --tw-translate-y: 50%;
   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));
 }
   .indicator .indicator-item.indicator-middle {
   top: 50%;
-}
-  .indicator .indicator-item.indicator-middle {
   bottom: 50%;
-}
-  .indicator .indicator-item.indicator-middle {
   --tw-translate-y: -50%;
   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));
 }
   .indicator .indicator-item.indicator-top {
   top: 0px;
-}
-  .indicator .indicator-item.indicator-top {
   bottom: auto;
-}
-  .indicator .indicator-item.indicator-top {
   --tw-translate-y: -50%;
   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));
 }
@@ -774,42 +608,27 @@
 .input-group-md {
     font-size: 0.875rem;
     line-height: 1.25rem;
-}
-.input-group-md {
     line-height: 2;
 }
 .input-group-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
-}
-.input-group-lg {
     line-height: 2;
 }
 .input-group-sm {
     font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-.input-group-sm {
     line-height: 2rem;
 }
 .input-group-xs {
     font-size: 0.75rem;
     line-height: 1rem;
-}
-.input-group-xs {
     line-height: 1.625;
 }
 .input-group :where(span) {
     display: flex;
-}
-.input-group :where(span) {
     align-items: center;
-}
-.input-group :where(span) {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
-}
-.input-group :where(span) {
     padding-left: 1rem;
     padding-right: 1rem;
 }
@@ -847,13 +666,13 @@
 }
 .link {
     cursor: pointer;
-    text-decoration-line: underline;
+    text-decoration-line: underline
 }
   .link-hover {
-    text-decoration-line: none;
+    text-decoration-line: none
 }
   .link-hover:hover {
-    text-decoration-line: underline;
+    text-decoration-line: underline
 }
 .mask {
   -webkit-mask-size: contain;
@@ -877,94 +696,76 @@
 }
 .menu {
   display: flex;
-  flex-direction: column;
+  flex-direction: column
 }
   .menu.horizontal {
   display: inline-flex;
-}
-  .menu.horizontal {
-  flex-direction: row;
+  flex-direction: row
 }
   .menu.horizontal :where(li) {
-  flex-direction: row;
+  flex-direction: row
 }
 .menu :where(li) {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  align-items: stretch;
+  align-items: stretch
 }
 .menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
-  display: flex;
+  display: flex
 }
 .menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
   cursor: pointer;
   user-select: none;
   align-items: center;
   outline: 2px solid transparent;
-  outline-offset: 2px;
+  outline-offset: 2px
 }
 .menu > :where(li > *:not(ul):focus) {
   outline: 2px solid transparent;
-  outline-offset: 2px;
+  outline-offset: 2px
 }
 .menu > :where(li.disabled > *:not(ul):focus) {
-  cursor: auto;
+  cursor: auto
 }
 .menu > :where(li) :where(ul) {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: stretch
 }
 .menu > :where(li) > :where(ul) {
   position: absolute;
   display: none;
   top: initial;
-  left: 100%;
+  left: 100%
 }
 .menu > :where(li:hover) > :where(ul) {
-  display: flex;
+  display: flex
 }
 .menu > :where(li:focus) > :where(ul) {
-  display: flex;
+  display: flex
 }
 .mockup-code {
         position: relative;
-}
-  .mockup-code {
         overflow: hidden;
-}
-  .mockup-code {
         overflow-x: auto;
 }
-  .mockup-code pre[data-prefix]:before {
+    .mockup-code pre[data-prefix]:before {
         content: attr(data-prefix);
-      }
-  .mockup-code pre[data-prefix]:before {
         display: inline-block;
-}
-  .mockup-code pre[data-prefix]:before {
         text-align: right;
-}
+      }
   .mockup-window {
         position: relative;
-}
-  .mockup-window {
         overflow: hidden;
-}
-  .mockup-window {
         overflow-x: auto;
 }
   .mockup-window pre[data-prefix]:before {
         content: attr(data-prefix);
-      }
-  .mockup-window pre[data-prefix]:before {
         display: inline-block;
-}
-  .mockup-window pre[data-prefix]:before {
         text-align: right;
-}
+      }
 .modal {
   pointer-events: none;
   visibility: hidden;
@@ -1007,8 +808,6 @@
 }
   .navbar > * {
   display: flex;
-}
-  .navbar > * {
   align-items: center;
 }
 .navbar-start {
@@ -1081,10 +880,10 @@
   }
 .rating {
     position: relative;
-    display: inline-flex;
+    display: inline-flex
 }
   .rating :where(input) {
-    cursor: pointer;
+    cursor: pointer
 }
 .select {
 
@@ -1110,28 +909,24 @@
 
     line-height: 2;
 
-    min-height: 3rem;
+    min-height: 3rem
 }
 
   /* disabled */
 
   .select-disabled, .select[disabled] {
 
-    pointer-events: none;
+    pointer-events: none
 }
 .stack {
     display: inline-grid;
 }
   .stack > * {
     grid-column-start: 1;
-}
-  .stack > * {
     grid-row-start: 1;
-}
-  .stack > * {
     transform: translateY(1rem) scale(0.9);
     z-index: 1;
-  }
+}
   .stack > *:nth-child(2) {
     transform: translateY(0.5rem) scale(0.95);
     z-index: 2;
@@ -1141,54 +936,38 @@
     z-index: 3;
   }
 .stats {
-  display: inline-grid;
+  display: inline-grid
 }
 :where(.stats) {
-  grid-auto-flow: column;
+  grid-auto-flow: column
 }
 .stat {
   display: inline-grid;
   width: 100%;
-  grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: repeat(1, 1fr)
 }
 .stat-figure {
   grid-column-start: 2;
-}
-.stat-figure {
   grid-row: span 3 / span 3;
-}
-.stat-figure {
   grid-row-start: 1;
-}
-.stat-figure {
   place-self: center;
-}
-.stat-figure {
-  justify-self: end;
+  justify-self: end
 }
 .stat-title {
   grid-column-start: 1;
-}
-.stat-title {
-  white-space: nowrap;
+  white-space: nowrap
 }
 .stat-value {
   grid-column-start: 1;
-}
-.stat-value {
-  white-space: nowrap;
+  white-space: nowrap
 }
 .stat-desc {
   grid-column-start: 1;
-}
-.stat-desc {
-  white-space: nowrap;
+  white-space: nowrap
 }
 .stat-actions {
   grid-column-start: 1;
-}
-.stat-actions {
-  white-space: nowrap;
+  white-space: nowrap
 }
 /* .stats.grid-flow-row {
   @apply auto-rows-fr;
@@ -1199,22 +978,14 @@
   overflow: hidden;
   overflow-x: auto;
   counter-reset: step;
-  grid-auto-columns: 1fr;
+  grid-auto-columns: 1fr
 }
   .steps .step {
   display: grid;
-}
-  .steps .step {
   grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-  .steps .step {
   grid-template-rows: repeat(2, minmax(0, 1fr));
-}
-  .steps .step {
   place-items: center;
-}
-  .steps .step {
-  text-align: center;
+  text-align: center
 }
 .swap {
 
@@ -1274,44 +1045,28 @@
   --tab-padding: 1rem
 }
 .table {
-    position: relative;
+    position: relative
 }
   .table th:first-child {
     position: sticky;
-}
-  .table th:first-child {
     left: 0px;
-}
-  .table th:first-child {
     z-index: 11;
-}
-  .table th:first-child {
     /* because safari */
-    position: -webkit-sticky;
-  }
+    position: -webkit-sticky
+}
 .textarea {
     flex-shrink: 1;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-  .textarea {
     padding-left: 1rem;
     padding-right: 1rem;
-}
-  .textarea {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-}
-  .textarea {
     font-size: 0.875rem;
     line-height: 1.25rem;
-}
-  .textarea {
     line-height: 2;
-}
-  .textarea {
-    min-height: 3rem;
+    min-height: 3rem
 }
 .toggle {
   flex-shrink: 0;
@@ -1325,14 +1080,12 @@
   position: absolute;
   pointer-events: none;
   content: attr(data-tip);
-}
-.tooltip:before {
     transform: translateX(-50%);
     top: auto;
     left: 50%;
     right: auto;
     bottom: var(--tooltip-offset);
-  }
+}
 .tooltip-bottom:before {
     transform: translateX(-50%);
     top: var(--tooltip-offset);