nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

data/src/stylesheets/nitro_kit/components/pagination.css

@@ -17,23 +17,23 @@
   }
 
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+    ) {
     display: flex;
     flex: none;
   }
 
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-ellipsis-label"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-ellipsis-label"]
+    ) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -46,19 +46,19 @@
 
 @layer nitro-kit.compound {
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-page"],
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-current"],
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-ellipsis"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-page"],
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-current"],
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-ellipsis"]
+    ) {
     min-inline-size: var(--nk-control-height-md);
     min-block-size: var(--nk-control-height-md);
     padding-inline: calc(var(--nk-space) * 2);
@@ -66,24 +66,24 @@
   }
 
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-page"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-page"]
+    ) {
     justify-content: center;
   }
 
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-page"][aria-current="page"],
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-current"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-page"][aria-current="page"],
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-current"]
+    ) {
     color: var(--nk-color-foreground);
     cursor: default;
     background: var(--nk-color-muted);
@@ -92,28 +92,37 @@
   }
 
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-current"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-current"]
+    ) {
     display: inline-grid;
     place-items: center;
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-medium);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
-    [data-nk="pagination"]
-      > [data-slot="pagination-list"]
-      > [data-slot="pagination-item"]
-      > [data-slot="pagination-ellipsis"]
-  ) {
+      [data-nk="pagination"]
+        > [data-slot="pagination-list"]
+        > [data-slot="pagination-item"]
+        > [data-slot="pagination-ellipsis"]
+    ) {
     display: inline-grid;
     place-items: center;
     color: var(--nk-color-muted-foreground);
     user-select: none;
   }
 }
+
+@layer nitro-kit.state {
+  @media (width < 48rem) {
+    :where([data-nk="pagination"] > [data-slot="pagination-list"]) {
+      inline-size: auto;
+      flex-wrap: wrap;
+    }
+  }
+}

data/src/stylesheets/nitro_kit/components/pagination_bar.css

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="pagination-bar"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
@@ -9,7 +9,7 @@
   }
 
   :where([data-nk="pagination-bar"] > [data-slot="pagination-bar-summary"]) {
-    min-width: 0;
+    min-inline-size: 0;
     margin: 0;
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
@@ -17,24 +17,24 @@
   }
 
   :where(
-    [data-nk="pagination-bar"]
-      > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
-  ) {
+      [data-nk="pagination-bar"]
+        > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
+    ) {
     margin-inline-start: auto;
   }
 }
 
 @layer nitro-kit.state {
-  @media (max-width: 48rem) {
+  @media (width < 48rem) {
     :where([data-nk="pagination-bar"]) {
       flex-direction: column;
       align-items: stretch;
     }
 
     :where(
-      [data-nk="pagination-bar"]
-        > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
-    ) {
+        [data-nk="pagination-bar"]
+          > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
+      ) {
       margin-inline-start: 0;
     }
   }

data/src/stylesheets/nitro_kit/components/palette.css

@@ -1,113 +1,181 @@
+/* The semantic palette shared by Badge, Alert, and Toast.
+ *
+ * Every family resolves through the public `--nk-palette-*` tint axis, which
+ * samples the color scales and is already appearance-aware, so a component
+ * never restates a hue. Semantic families default to the same steps as their
+ * hue families -- `info` renders exactly like `blue` -- and an application
+ * that rethemes a tint role moves all three components at once. `-content`
+ * carries the paired foreground; the base role carries the tinting accent.
+ *
+ * Alert and Toast are the same kind of thing — a status message — so they also
+ * share one tinted surface and border. Only the components that own a different
+ * job, such as Badge's compact label, set their own tint strength.
+ */
 @layer nitro-kit.variant {
   :where(
-    [data-nk="badge"][data-color="zinc"],
-    [data-nk="badge"][data-color="neutral"],
-    [data-nk="alert"][data-variant="default"]
-  ) {
-    --_nk-palette-light: oklch(37% 0.013 285.805);
-    --_nk-palette-dark: oklch(92% 0.004 286.32);
-    --_nk-palette-tint: oklch(70.5% 0.015 286.067);
+      [data-nk="badge"][data-color="neutral"],
+      [data-nk="alert"][data-variant="default"],
+      [data-nk="toast-item"][data-variant="default"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-neutral);
+    --_nk-semantic-content: var(--nk-palette-neutral-content);
   }
 
   :where(
-    [data-nk="badge"][data-color="red"],
-    [data-nk="badge"][data-color="danger"],
-    [data-nk="alert"][data-variant="error"]
-  ) {
-    --_nk-palette-light: oklch(50.5% 0.213 27.518);
-    --_nk-palette-dark: oklch(88.5% 0.062 18.334);
-    --_nk-palette-tint: oklch(70.4% 0.191 22.216);
+      [data-nk="badge"][data-color="info"],
+      [data-nk="alert"][data-variant="info"],
+      [data-nk="toast-item"][data-variant="info"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-info);
+    --_nk-semantic-content: var(--nk-palette-info-content);
   }
-  :where([data-nk="badge"][data-color="orange"]) {
-    --_nk-palette-light: oklch(55.3% 0.195 38.402);
-    --_nk-palette-dark: oklch(90.1% 0.076 70.697);
-    --_nk-palette-tint: oklch(75% 0.183 55.934);
+
+  :where(
+      [data-nk="badge"][data-color="success"],
+      [data-nk="alert"][data-variant="success"],
+      [data-nk="toast-item"][data-variant="success"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-success);
+    --_nk-semantic-content: var(--nk-palette-success-content);
   }
+
   :where(
-    [data-nk="badge"][data-color="amber"],
-    [data-nk="badge"][data-color="warning"],
-    [data-nk="alert"][data-variant="warning"]
-  ) {
-    --_nk-palette-light: oklch(55% 0.163 48.998);
-    --_nk-palette-dark: oklch(92.4% 0.12 95.746);
-    --_nk-palette-tint: oklch(82.8% 0.189 84.429);
+      [data-nk="badge"][data-color="warning"],
+      [data-nk="alert"][data-variant="warning"],
+      [data-nk="toast-item"][data-variant="warning"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-warning);
+    --_nk-semantic-content: var(--nk-palette-warning-content);
+  }
+
+  /* Action components and Alert say `destructive`; Toast announces `error`.
+     Both spellings resolve to the destructive family, and this is the only
+     place they meet. */
+  :where(
+      [data-nk="badge"][data-color="destructive"],
+      [data-nk="alert"][data-variant="destructive"],
+      [data-nk="toast-item"][data-variant="error"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-destructive);
+    --_nk-semantic-content: var(--nk-palette-destructive-content);
+  }
+
+  /* The shared status treatment. Defined once so Alert and Toast cannot drift
+     apart again, and so a third status component inherits it by opting in. */
+  :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 12%;
+    --_nk-semantic-surface: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) var(--_nk-semantic-tint),
+      var(--nk-color-surface)
+    );
+    --_nk-semantic-border: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) 45%,
+      transparent
+    );
+  }
+
+  /* Dark appearances need a stronger tint to separate the surface from the
+     page behind it. */
+  :where([data-theme="dark"])
+    :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 20%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(:root:not([data-theme]))
+      :where([data-nk="alert"], [data-nk="toast-item"]) {
+      --_nk-semantic-tint: 20%;
+    }
+  }
+
+  /* The decorative hues. These name a color rather than a meaning, so they
+     follow `--nk-palette-*` and stay put when an application rethemes its
+     semantic families. `red` and `destructive` are deliberately different: one is
+     a color, the other is whatever destructive currently means. */
+  :where([data-nk="badge"][data-color="red"]) {
+    --_nk-semantic-accent: var(--nk-palette-red);
+    --_nk-semantic-content: var(--nk-palette-red-content);
+  }
+
+  :where([data-nk="badge"][data-color="orange"]) {
+    --_nk-semantic-accent: var(--nk-palette-orange);
+    --_nk-semantic-content: var(--nk-palette-orange-content);
   }
+
+  :where([data-nk="badge"][data-color="amber"]) {
+    --_nk-semantic-accent: var(--nk-palette-amber);
+    --_nk-semantic-content: var(--nk-palette-amber-content);
+  }
+
   :where([data-nk="badge"][data-color="yellow"]) {
-    --_nk-palette-light: oklch(47.6% 0.114 61.907);
-    --_nk-palette-dark: oklch(94.5% 0.129 101.54);
-    --_nk-palette-tint: oklch(85.2% 0.199 91.936);
+    --_nk-semantic-accent: var(--nk-palette-yellow);
+    --_nk-semantic-content: var(--nk-palette-yellow-content);
   }
+
   :where([data-nk="badge"][data-color="lime"]) {
-    --_nk-palette-light: oklch(45.3% 0.124 130.933);
-    --_nk-palette-dark: oklch(93.8% 0.127 124.321);
-    --_nk-palette-tint: oklch(84.1% 0.238 128.85);
+    --_nk-semantic-accent: var(--nk-palette-lime);
+    --_nk-semantic-content: var(--nk-palette-lime-content);
   }
-  :where(
-    [data-nk="badge"][data-color="green"],
-    [data-nk="badge"][data-color="success"],
-    [data-nk="alert"][data-variant="success"]
-  ) {
-    --_nk-palette-light: oklch(44.8% 0.119 151.328);
-    --_nk-palette-dark: oklch(92.5% 0.084 155.995);
-    --_nk-palette-tint: oklch(79.2% 0.209 151.711);
+
+  :where([data-nk="badge"][data-color="green"]) {
+    --_nk-semantic-accent: var(--nk-palette-green);
+    --_nk-semantic-content: var(--nk-palette-green-content);
   }
+
   :where([data-nk="badge"][data-color="emerald"]) {
-    --_nk-palette-light: oklch(43.2% 0.095 166.913);
-    --_nk-palette-dark: oklch(90.5% 0.093 164.15);
-    --_nk-palette-tint: oklch(76.5% 0.177 163.223);
+    --_nk-semantic-accent: var(--nk-palette-emerald);
+    --_nk-semantic-content: var(--nk-palette-emerald-content);
   }
+
   :where([data-nk="badge"][data-color="teal"]) {
-    --_nk-palette-light: oklch(43.7% 0.078 188.216);
-    --_nk-palette-dark: oklch(91% 0.096 180.426);
-    --_nk-palette-tint: oklch(77.7% 0.152 181.912);
+    --_nk-semantic-accent: var(--nk-palette-teal);
+    --_nk-semantic-content: var(--nk-palette-teal-content);
   }
+
   :where([data-nk="badge"][data-color="cyan"]) {
-    --_nk-palette-light: oklch(45% 0.085 224.283);
-    --_nk-palette-dark: oklch(91.7% 0.08 205.041);
-    --_nk-palette-tint: oklch(78.9% 0.154 211.53);
+    --_nk-semantic-accent: var(--nk-palette-cyan);
+    --_nk-semantic-content: var(--nk-palette-cyan-content);
   }
+
   :where([data-nk="badge"][data-color="sky"]) {
-    --_nk-palette-light: oklch(44.3% 0.11 240.79);
-    --_nk-palette-dark: oklch(90.1% 0.058 230.902);
-    --_nk-palette-tint: oklch(74.6% 0.16 232.661);
+    --_nk-semantic-accent: var(--nk-palette-sky);
+    --_nk-semantic-content: var(--nk-palette-sky-content);
   }
-  :where(
-    [data-nk="badge"][data-color="blue"],
-    [data-nk="badge"][data-color="info"],
-    [data-nk="alert"][data-variant="info"]
-  ) {
-    --_nk-palette-light: oklch(42.4% 0.199 265.638);
-    --_nk-palette-dark: oklch(88.2% 0.059 254.128);
-    --_nk-palette-tint: oklch(70.7% 0.165 254.624);
+
+  :where([data-nk="badge"][data-color="blue"]) {
+    --_nk-semantic-accent: var(--nk-palette-blue);
+    --_nk-semantic-content: var(--nk-palette-blue-content);
   }
+
   :where([data-nk="badge"][data-color="indigo"]) {
-    --_nk-palette-light: oklch(45.7% 0.24 277.023);
-    --_nk-palette-dark: oklch(87% 0.065 274.039);
-    --_nk-palette-tint: oklch(67.3% 0.182 276.935);
+    --_nk-semantic-accent: var(--nk-palette-indigo);
+    --_nk-semantic-content: var(--nk-palette-indigo-content);
   }
+
   :where([data-nk="badge"][data-color="violet"]) {
-    --_nk-palette-light: oklch(49.1% 0.27 292.581);
-    --_nk-palette-dark: oklch(89.4% 0.057 293.283);
-    --_nk-palette-tint: oklch(70.2% 0.183 293.541);
+    --_nk-semantic-accent: var(--nk-palette-violet);
+    --_nk-semantic-content: var(--nk-palette-violet-content);
   }
+
   :where([data-nk="badge"][data-color="purple"]) {
-    --_nk-palette-light: oklch(49.6% 0.265 301.924);
-    --_nk-palette-dark: oklch(90.2% 0.063 306.703);
-    --_nk-palette-tint: oklch(71.4% 0.203 305.504);
+    --_nk-semantic-accent: var(--nk-palette-purple);
+    --_nk-semantic-content: var(--nk-palette-purple-content);
   }
+
   :where([data-nk="badge"][data-color="fuchsia"]) {
-    --_nk-palette-light: oklch(51.8% 0.253 323.949);
-    --_nk-palette-dark: oklch(90.3% 0.076 319.62);
-    --_nk-palette-tint: oklch(74% 0.238 322.16);
+    --_nk-semantic-accent: var(--nk-palette-fuchsia);
+    --_nk-semantic-content: var(--nk-palette-fuchsia-content);
   }
+
   :where([data-nk="badge"][data-color="pink"]) {
-    --_nk-palette-light: oklch(52.5% 0.223 3.958);
-    --_nk-palette-dark: oklch(89.9% 0.061 343.231);
-    --_nk-palette-tint: oklch(71.8% 0.202 349.761);
+    --_nk-semantic-accent: var(--nk-palette-pink);
+    --_nk-semantic-content: var(--nk-palette-pink-content);
   }
+
   :where([data-nk="badge"][data-color="rose"]) {
-    --_nk-palette-light: oklch(51.4% 0.222 16.935);
-    --_nk-palette-dark: oklch(89.2% 0.058 10.001);
-    --_nk-palette-tint: oklch(71.2% 0.194 13.428);
+    --_nk-semantic-accent: var(--nk-palette-rose);
+    --_nk-semantic-content: var(--nk-palette-rose-content);
   }
 }

data/src/stylesheets/nitro_kit/components/progressive_image.css

@@ -17,15 +17,17 @@
     pointer-events: none;
     content: "";
     border-radius: inherit;
-    outline: 1px solid oklch(0 0 0 / 10%);
-    outline-offset: -1px;
+    outline: var(--nk-border-width) solid
+      color-mix(in oklab, var(--nk-color-foreground) 10%, transparent);
+    outline-offset: calc(var(--nk-border-width) * -1);
   }
 
   :where(
-    [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"],
-    [data-nk="progressive-image"] > [data-slot="progressive-image-image"],
-    [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
-  ) {
+      [data-nk="progressive-image"]
+        > [data-slot="progressive-image-placeholder"],
+      [data-nk="progressive-image"] > [data-slot="progressive-image-image"],
+      [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
+    ) {
     grid-area: 1 / 1;
     inline-size: 100%;
     block-size: 100%;
@@ -33,31 +35,33 @@
   }
 
   :where(
-    [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"],
-    [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
-  ) {
+      [data-nk="progressive-image"]
+        > [data-slot="progressive-image-placeholder"],
+      [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
+    ) {
     object-fit: cover;
   }
 
   :where(
-    [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"]
-  ) {
+      [data-nk="progressive-image"]
+        > [data-slot="progressive-image-placeholder"]
+    ) {
     z-index: 1;
-    filter: blur(1rem);
+    filter: blur(calc(var(--nk-space) * 4));
     opacity: 0;
     transform: scale(1.05);
   }
 
   :where(
-    [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
-  ) {
+      [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
+    ) {
     z-index: 2;
     opacity: 1;
   }
 
   :where(
-    [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
-  ) {
+      [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
+    ) {
     display: grid;
     min-block-size: 10rem;
     padding: calc(var(--nk-space) * 6);
@@ -71,68 +75,54 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="progressive-image"][data-enhanced="true"]
-      > [data-slot="progressive-image-placeholder"],
-    [data-nk="progressive-image"][data-enhanced="true"]
-      > [data-slot="progressive-image-image"]
-  ) {
+      [data-nk="progressive-image"][data-enhanced="true"]
+        > [data-slot="progressive-image-placeholder"],
+      [data-nk="progressive-image"][data-enhanced="true"]
+        > [data-slot="progressive-image-image"]
+    ) {
     transition: opacity var(--nk-duration-slow) var(--nk-ease);
   }
 
   :where(
-    [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
-      > [data-slot="progressive-image-placeholder"]
-  ) {
+      [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
+        > [data-slot="progressive-image-placeholder"]
+    ) {
     opacity: 1;
   }
 
   :where(
-    [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
-      > [data-slot="progressive-image-image"]
-  ) {
+      [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
+        > [data-slot="progressive-image-image"]
+    ) {
     opacity: 0;
   }
 
   :where(
-    [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
-      > [data-slot="progressive-image-image"]
-  ) {
+      [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
+        > [data-slot="progressive-image-image"]
+    ) {
     opacity: 1;
   }
 
   :where(
-    [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
-      > [data-slot="progressive-image-placeholder"],
-    [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
-      > [data-slot="progressive-image-placeholder"],
-    [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
-      > [data-slot="progressive-image-image"]
-  ) {
+      [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
+        > [data-slot="progressive-image-placeholder"],
+      [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
+        > [data-slot="progressive-image-placeholder"],
+      [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
+        > [data-slot="progressive-image-image"]
+    ) {
     opacity: 0;
   }
 }
 
-@layer nitro-kit.state {
-  :where([data-theme="dark"] [data-nk="progressive-image"])::after {
-    outline-color: oklch(1 0 0 / 10%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :where(
-      :root:not([data-theme="light"]) [data-nk="progressive-image"]
-    )::after {
-      outline-color: oklch(1 0 0 / 10%);
-    }
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   @layer nitro-kit.state {
     :where(
-      [data-nk="progressive-image"]
-        > [data-slot="progressive-image-placeholder"],
-      [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
-    ) {
+        [data-nk="progressive-image"]
+          > [data-slot="progressive-image-placeholder"],
+        [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
+      ) {
       transition-duration: 0s;
     }
   }