@solid-design-system/styles 1.5.5 → 2.0.0-next.1

package/dist/modules/pagination.css

@@ -1,430 +1,293 @@
-/**
- * Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
- * @name sd-pagination
- * @status stable
- * @since 1.3
- * @variant { simple } sd-pagination--... The pagination format.
- * @boolean sd-pagination--inverted Inverts the pagination style.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
 .sd-pagination > :not(ul) {
-      position: absolute;
-      height: var(--sd-spacing-0-25, 1px) /* 1px */;
-      width: var(--sd-spacing-0-25, 1px) /* 1px */;
-      overflow: hidden;
-}
-
+    position: absolute;
+    height: var(--sd-spacing-0\.25);
+    width: var(--sd-spacing-0\.25);
+    overflow: hidden;
+  }
 .sd-pagination ul {
-      display: flex;
-      align-items: center;
-      gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
-}
-
+    display: flex;
+    align-items: center;
+    gap: var(--sd-spacing-2);
+  }
 .sd-pagination ul li button {
       all: unset;
+      border-style: var(--tw-border-style);
       border-width: 0px;
+      --tw-border-style: solid;
       border-style: solid;
       border-color: transparent;
     }
-
 .sd-pagination ul li button:hover:not([disabled]) {
-      cursor: pointer;
-}
-
+        cursor: pointer;
+      }
 .sd-pagination ul li:has(button) {
       height: 1.875rem;
-}
-
-.sd-pagination ul li a,
-    .sd-pagination ul li button {
+    }
+.sd-pagination ul li a, .sd-pagination ul li button {
       display: flex;
       align-items: center;
       justify-content: center;
-      
-      color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+      color: var(--sd-color-text-primary);
       text-decoration-line: none;
       transition-property: color;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-}
-
-.sd-pagination ul li a:hover:not([disabled]),
-    .sd-pagination ul li button:hover:not([disabled]) {
-      
-      color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
-}
-
-.sd-pagination ul li a:active:not([disabled]),
-    .sd-pagination ul li button:active:not([disabled]) {
-      
-      color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
-}
-
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+      transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+    }
+.sd-pagination ul li a:hover:not([disabled]), .sd-pagination ul li button:hover:not([disabled]) {
+        color: var(--sd-color-text-primary-500);
+      }
+.sd-pagination ul li a:active:not([disabled]), .sd-pagination ul li button:active:not([disabled]) {
+        color: var(--sd-color-text-primary-800);
+      }
 .sd-pagination ul li a:focus-visible, .sd-pagination ul li button:focus-visible {
-      outline-style: solid;
-      outline-width: 2px;
-      outline-offset: 2px;
-      outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
-/* Previous and Next */
-
-.sd-pagination ul li:first-child,
-    .sd-pagination ul li:last-child {
-      height: var(--sd-spacing-12, 3rem) /* 48px */;
-      width: var(--sd-spacing-12, 3rem) /* 48px */;
-      font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-}
-
-.sd-pagination ul li:first-child a,
-      .sd-pagination ul li:first-child button,
-      .sd-pagination ul li:last-child a,
-      .sd-pagination ul li:last-child button {
-      height: 100%;
-      width: 100%;
-}
-
-/* Numbers */
-
+        outline-width: 1px;
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+      }
+.sd-pagination ul li:first-child, .sd-pagination ul li:last-child {
+      height: var(--sd-spacing-12);
+      width: var(--sd-spacing-12);
+      font-size: var(--sd-text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+    }
+.sd-pagination ul li:first-child a, .sd-pagination ul li:first-child button, .sd-pagination ul li:last-child a, .sd-pagination ul li:last-child button {
+        height: 100%;
+        width: 100%;
+      }
 .sd-pagination ul li {
       display: flex;
-      height: var(--sd-spacing-8, 2rem) /* 32px */;
-      width: var(--sd-spacing-8, 2rem) /* 32px */;
+      height: var(--sd-spacing-8);
+      width: var(--sd-spacing-8);
       align-items: center;
       justify-content: center;
       text-align: center;
-}
-
-.sd-pagination ul li:not(:first-child):not(:last-child) a,
-        .sd-pagination ul li:not(:first-child):not(:last-child) button {
-      height: 100%;
-      width: 100%;
-      border-bottom-width: 2px;
-      border-bottom-color: transparent;
-}
-
+    }
+.sd-pagination ul li:not(:first-child):not(:last-child) a, .sd-pagination ul li:not(:first-child):not(:last-child) button {
+          height: 100%;
+          width: 100%;
+          border-bottom-style: var(--tw-border-style);
+          border-bottom-width: var(--sd-border-width-2);
+          border-bottom-color: transparent;
+        }
 .sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
-      --tw-border-opacity: 1;
-      border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
- */;
-}
-
-.sd-pagination ul li a[aria-current],
-      .sd-pagination ul li button[aria-current] {
-      
-      color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-.sd-pagination ul li a[aria-current]:hover:not([disabled]),
-      .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
-      
-      color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
-}
-
-/* Previous and next arrow when it has no href */
-
-.sd-pagination ul li:first-child:has(a:not([href])) a,
-    .sd-pagination ul li:last-child:has(a:not([href])) a,
-    .sd-pagination ul li:first-child:has(button[disabled]) button,
-    .sd-pagination ul li:last-child:has(button[disabled]) button {
+            border-bottom-color: var(--sd-color-border-accent);
+          }
+.sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
+        color: var(--sd-color-text-black);
+      }
+.sd-pagination ul li a[aria-current]:hover:not([disabled]), .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
+          color: var(--sd-color-text-black);
+        }
+.sd-pagination ul li:first-child:has(a:not([href])) a, .sd-pagination ul li:last-child:has(a:not([href])) a, .sd-pagination ul li:first-child:has(button[disabled]) button, .sd-pagination ul li:last-child:has(button[disabled]) button {
       cursor: not-allowed;
-      
-      color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-.sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
-    .sd-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
-      
-      color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
-}
-
-/* Numbers */
-
-/* Number which is not current */
-
+      color: var(--sd-color-text-neutral-500);
+    }
+.sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
+        color: var(--sd-color-text-neutral-500);
+      }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
-      pointer-events: none;
-      position: absolute;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
-      display: none;
-}
-
-/* Apply ellipsis to (n + 2 && n - 1) */
-
+          pointer-events: none;
+          position: absolute;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
+            display: none;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
-      pointer-events: auto !important;
-      position: relative !important;
-}
-
+          pointer-events: auto !important;
+          position: relative !important;
+        }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
-      --tw-content: '...';
-      content: var(--tw-content);
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current]), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li {
-      pointer-events: auto !important;
-      position: relative !important;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current])::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li::after {
-      content: var(--tw-content) !important;
-      display: none !important;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current]) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          + li a[aria-current],
-          + li button[aria-current]) button,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
-          a[aria-current],
-          button[aria-current]) + li button {
-      display: flex !important;
-}
-
-/* When one of the first 4 pages is selected */
-
-/* Show until the 5th page (forward) */
-
+            --tw-content: '...';
+            content: var(--tw-content);
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]),  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li {
+          pointer-events: auto !important;
+          position: relative !important;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current])::after, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li::after {
+            content: var(--tw-content);
+            display: none !important;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) button, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li button {
+            display: flex !important;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
-      pointer-events: auto;
-      position: relative;
-}
-
+            pointer-events: auto;
+            position: relative;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
-      content: var(--tw-content);
-      display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a,
-            .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
-      display: flex;
-}
-
-/* Show ellipsis on the 6th */
-
+              content: var(--tw-content);
+              display: none;
+            }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
+              display: flex;
+            }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
-      pointer-events: none;
-      position: relative;
-}
-
+            pointer-events: none;
+            position: relative;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
-      --tw-content: '...';
-      content: var(--tw-content);
-}
-
-/* When one of the first 4 pages is selected, show until the 5th page (backward) */
-
+              --tw-content: '...';
+              content: var(--tw-content);
+            }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
-      pointer-events: auto;
-      position: relative;
-}
-
+          pointer-events: auto;
+          position: relative;
+        }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
-      content: var(--tw-content);
-      display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
-      display: flex;
-}
-
-/* When one of the last 4 pages is selected, show the last 4 pages (forward) */
-
+            content: var(--tw-content);
+            display: none;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
+            display: flex;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
-      pointer-events: auto;
-      position: relative;
-}
-
+            pointer-events: auto;
+            position: relative;
+          }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
-      content: var(--tw-content);
-      display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a,
-            .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
-      display: flex;
-}
-
-/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) {
-      pointer-events: auto;
-      position: relative;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          )::after {
-      content: var(--tw-content);
-      display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) a,
-          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) button {
-      display: flex;
-}
-
-/* Show ellipsis on the 6th to last */
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          ) {
-      pointer-events: none;
-      position: relative;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
-            ~ :nth-last-child(-n + 5) a[aria-current],
-            ~ :nth-last-child(-n + 5) button[aria-current]
-          )::after {
-      --tw-content: '...';
-      content: var(--tw-content);
-}
-
-/* When it only has 5 numbers + 2 prev & next buttons */
-
+              content: var(--tw-content);
+              display: none;
+            }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
+              display: flex;
+            }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
+          pointer-events: auto;
+          position: relative;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
+            content: var(--tw-content);
+            display: none;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) button {
+            display: flex;
+          }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
+          pointer-events: none;
+          position: relative;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
+            --tw-content: '...';
+            content: var(--tw-content);
+          }
 .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
-      pointer-events: auto;
-      position: relative;
-}
-
+        pointer-events: auto;
+        position: relative;
+      }
 .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
-      content: var(--tw-content);
-      display: none;
-}
-
-.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
-        .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
-      display: flex;
-}
-
+          content: var(--tw-content);
+          display: none;
+        }
+.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a, .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
+          display: flex;
+        }
 .sd-pagination--simple ul li:nth-child(2) {
-      position: relative;
-      margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
-      width: var(--sd-spacing-8, 2rem) /* 32px */;
-      border-bottom-width: 2px;
-      --tw-border-opacity: 1;
-      border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
- */;
-}
-
+        position: relative;
+        margin-inline-end: calc(var(--sd-spacing-1) * 5);
+        width: var(--sd-spacing-8);
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: var(--sd-border-width-2);
+        border-bottom-color: var(--sd-color-border-accent);
+      }
 .sd-pagination--simple ul li:nth-child(2)::after {
-      position: absolute;
-      right: -18px;
-      --tw-scale-y: 1.5;
-      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));
-      --tw-content: '/';
-      content: var(--tw-content);
-}
-
-.sd-pagination--simple ul li:nth-child(2) {
-
+          content: var(--tw-content);
+          position: absolute;
+        }
+.sd-pagination--simple ul li:nth-child(2)::after {
+          content: var(--tw-content);
+          right: calc(18px * -1);
+        }
+.sd-pagination--simple ul li:nth-child(2)::after {
+          content: var(--tw-content);
+          --tw-scale-y: 1.5;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+.sd-pagination--simple ul li:nth-child(2)::after {
+          --tw-content: '/';
+          content: var(--tw-content);
+        }
+.sd-pagination--simple ul li:nth-child(2){
         border-bottom-style: solid;
-      }
-
-.sd-pagination--simple ul li:nth-last-child(2) {
-      border-bottom-width: 2px;
-      border-bottom-color: transparent;
 }
-
+.sd-pagination--simple ul li:nth-last-child(2) {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: var(--sd-border-width-2);
+        border-bottom-color: transparent;
+      }
 .sd-pagination--inverted ul li::after {
-      content: var(--tw-content);
-      
-      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-pagination--inverted ul li:first-child:has(a:not([href])) a,
-      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a,
-      .sd-pagination--inverted ul li:first-child:has(button[disabled]) button,
-      .sd-pagination--inverted ul li:last-child:has(button[disabled]) button {
-      
-      color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
-      .sd-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
-      .sd-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
-      
-      color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
-}
-
-.sd-pagination--inverted ul li a,
-      .sd-pagination--inverted ul li a[aria-current],
-      .sd-pagination--inverted ul li button,
-      .sd-pagination--inverted ul li button[aria-current] {
-      
-      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-pagination--inverted ul li a:hover:not([disabled]),
-      .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
-      .sd-pagination--inverted ul li button:hover:not([disabled]),
-      .sd-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
-      
-      color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
-}
-
-.sd-pagination--inverted ul li a:active:not([disabled]),
-      .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]),
-      .sd-pagination--inverted ul li button:active:not([disabled]),
-      .sd-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
-      
-      color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
-Used for inverted pressed interaction text link */;
-}
-
+        content: var(--tw-content);
+        color: var(--sd-color-text-white);
+      }
+.sd-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-pagination--inverted ul li:last-child:has(button[disabled]) button {
+        color: var(--sd-color-text-neutral-600);
+      }
+.sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
+          color: var(--sd-color-text-neutral-600);
+        }
+.sd-pagination--inverted ul li a, .sd-pagination--inverted ul li a[aria-current], .sd-pagination--inverted ul li button, .sd-pagination--inverted ul li button[aria-current] {
+        color: var(--sd-color-text-white);
+      }
+.sd-pagination--inverted ul li a:hover:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-pagination--inverted ul li button:hover:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
+          color: var(--sd-color-text-primary-200);
+        }
+.sd-pagination--inverted ul li a:active:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-pagination--inverted ul li button:active:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
+          color: var(--sd-color-text-primary-400);
+        }
 .sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible, .sd-pagination--inverted ul li button:focus-visible, .sd-pagination--inverted ul li button[aria-current]:focus-visible {
-      outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
-}
-
+          outline-color: var(--color-white, #fff);
+        }
 .sd-pagination--inverted.sd-pagination--simple ul li {
-      
-      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
+      color: var(--sd-color-text-white);
+    }
 .sd-pagination--inverted.sd-pagination--simple ul li::after {
-      content: var(--tw-content);
-      
-      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+        content: var(--tw-content);
+        color: var(--sd-color-text-white);
+      }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
 }