@solid-design-system/styles 1.5.0 → 1.5.1

package/dist/modules/pagination.css

@@ -8,147 +8,113 @@
  */
 
 .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, 1px) /* 1px */;
+      width: var(--sd-spacing-0-25, 1px) /* 1px */;
+      overflow: hidden;
 }
 
 .sd-pagination ul {
+      display: flex;
+      align-items: center;
+      gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+}
 
-    display: flex;
-
-    align-items: center;
+.sd-pagination ul li button {
+      all: unset;
+      border-width: 2px;
+      border-style: solid;
+      border-color: transparent;
+    }
 
-    gap: var(--sd-spacing-2, 0.5rem) /* 8px */
+.sd-pagination ul li button:hover:not([disabled]) {
+      cursor: pointer;
 }
 
 .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 */;
-
-    text-decoration-line: none;
-
-    transition-property: color;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 150ms
+      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 */;
+      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 */
+      
+      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 */
+      
+      color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
 }
 
 .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 */
+      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 */
+      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%
+      height: 100%;
+      width: 100%;
 }
 
 /* Numbers */
 
 .sd-pagination ul li {
-
-    display: flex;
-
-    height: var(--sd-spacing-8, 2rem) /* 32px */;
-
-    width: var(--sd-spacing-8, 2rem) /* 32px */;
-
-    align-items: center;
-
-    justify-content: center;
-
-    text-align: center
+      display: flex;
+      height: var(--sd-spacing-8, 2rem) /* 32px */;
+      width: var(--sd-spacing-8, 2rem) /* 32px */;
+      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
+      height: 100%;
+      width: 100%;
+      border-bottom-width: 2px;
+      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
- */
+      --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 */
+      
+      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 */
+      
+      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 */
@@ -157,22 +123,17 @@
     .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 */
+      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 */
+      
+      color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
 /* Numbers */
@@ -180,32 +141,25 @@
 /* Number which is not current */
 
 .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
+      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
+      display: none;
 }
 
 /* Apply ellipsis to (n + 2 && n - 1) */
 
 .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)
+      --tw-content: '...';
+      content: var(--tw-content);
 }
 
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
@@ -216,10 +170,8 @@
         .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
+      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, 
@@ -230,10 +182,8 @@
         .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
+      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,
@@ -252,8 +202,7 @@
           .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
+      display: flex !important;
 }
 
 /* When one of the first 4 pages is selected */
@@ -261,83 +210,64 @@
 /* Show until the 5th page (forward) */
 
 .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
+      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
+      display: flex;
 }
 
 /* Show ellipsis on the 6th */
 
 .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)
+      --tw-content: '...';
+      content: var(--tw-content);
 }
 
 /* When one of the first 4 pages is selected, show until the 5th page (backward) */
 
 .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
+      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
+      display: flex;
 }
 
 /* When one of the last 4 pages is selected, show the last 4 pages (forward) */
 
 .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
+      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
+      display: flex;
 }
 
 /* When one of the last 4 pages is selected, show the last 4 pages (backward) */
@@ -346,20 +276,16 @@
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-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-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
+      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(
@@ -370,8 +296,7 @@
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           ) button {
-
-    display: flex
+      display: flex;
 }
 
 /* Show ellipsis on the 6th to last */
@@ -380,159 +305,122 @@
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           ) {
-
-    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-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)
+      --tw-content: '...';
+      content: var(--tw-content);
 }
 
 /* When it only has 5 numbers + 2 prev & next buttons */
 
 .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
+      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
+      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: 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
+ */;
 }
 
 .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)
+      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-last-child(2) {
+.sd-pagination--simple ul li:nth-child(2) {
 
-    border-bottom-width: 2px;
+        border-bottom-style: solid;
+      }
 
-    border-bottom-color: transparent
+.sd-pagination--simple ul li:nth-last-child(2) {
+      border-bottom-width: 2px;
+      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 */
+      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 */
+      
+      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 */
+      
+      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 */
+      
+      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 */
+      
+      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 */
+      
+      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 */;
 }
 
 .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: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
 }
 
 .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: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 .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: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }

package/dist/solid-styles.css

@@ -630,6 +630,17 @@ Used for inverted pressed interaction text link */;
   gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
 }
 
+.sd-pagination ul li button {
+      all: unset;
+      border-width: 2px;
+      border-style: solid;
+      border-color: transparent;
+    }
+
+.sd-pagination ul li button:hover:not([disabled]) {
+  cursor: pointer;
+}
+
 .sd-pagination ul li a,
     .sd-pagination ul li button {
   display: flex;
@@ -952,6 +963,11 @@ Used for inverted pressed interaction text link */;
   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;