@solid-design-system/styles 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/cdn/modules/interactive.css +1 -1
  3. package/cdn/modules/pagination.css +1 -1
  4. package/cdn/modules/prose.css +1 -1
  5. package/cdn/solid-styles.css +1 -1
  6. package/cdn-versioned/modules/chip.css +1 -1
  7. package/cdn-versioned/modules/container.css +1 -1
  8. package/cdn-versioned/modules/copyright.css +1 -1
  9. package/cdn-versioned/modules/display.css +1 -1
  10. package/cdn-versioned/modules/flag.css +1 -1
  11. package/cdn-versioned/modules/footnotes.css +1 -1
  12. package/cdn-versioned/modules/headline.css +1 -1
  13. package/cdn-versioned/modules/hidden-links.css +1 -1
  14. package/cdn-versioned/modules/interactive.css +1 -1
  15. package/cdn-versioned/modules/leadtext.css +1 -1
  16. package/cdn-versioned/modules/list.css +1 -1
  17. package/cdn-versioned/modules/mark.css +1 -1
  18. package/cdn-versioned/modules/media.css +1 -1
  19. package/cdn-versioned/modules/meta.css +1 -1
  20. package/cdn-versioned/modules/pagination.css +1 -1
  21. package/cdn-versioned/modules/paragraph.css +1 -1
  22. package/cdn-versioned/modules/prose.css +1 -1
  23. package/cdn-versioned/modules/status-badge.css +1 -1
  24. package/cdn-versioned/modules/table-cell.css +1 -1
  25. package/cdn-versioned/modules/table.css +1 -1
  26. package/cdn-versioned/solid-styles.css +1 -1
  27. package/dist/modules/interactive.css +17 -2
  28. package/dist/modules/pagination.css +144 -256
  29. package/dist/modules/prose.css +17 -2
  30. package/dist/solid-styles.css +33 -2
  31. package/dist-versioned/modules/chip.css +6 -6
  32. package/dist-versioned/modules/container.css +45 -45
  33. package/dist-versioned/modules/copyright.css +11 -11
  34. package/dist-versioned/modules/display.css +9 -9
  35. package/dist-versioned/modules/flag.css +6 -6
  36. package/dist-versioned/modules/footnotes.css +26 -26
  37. package/dist-versioned/modules/headline.css +67 -67
  38. package/dist-versioned/modules/hidden-links.css +7 -7
  39. package/dist-versioned/modules/interactive.css +53 -38
  40. package/dist-versioned/modules/leadtext.css +8 -8
  41. package/dist-versioned/modules/list.css +47 -47
  42. package/dist-versioned/modules/mark.css +2 -2
  43. package/dist-versioned/modules/media.css +7 -7
  44. package/dist-versioned/modules/meta.css +12 -12
  45. package/dist-versioned/modules/pagination.css +249 -361
  46. package/dist-versioned/modules/paragraph.css +8 -8
  47. package/dist-versioned/modules/prose.css +246 -231
  48. package/dist-versioned/modules/status-badge.css +8 -8
  49. package/dist-versioned/modules/table-cell.css +23 -23
  50. package/dist-versioned/modules/table.css +4 -4
  51. package/dist-versioned/solid-styles.css +491 -460
  52. package/package.json +1 -1
@@ -1,538 +1,426 @@
1
1
  /**
2
2
  * Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
3
- * @name sd-1-5-0-pagination
3
+ * @name sd-1-5-2-pagination
4
4
  * @status stable
5
5
  * @since 1.3
6
- * @variant { simple } sd-1-5-0-pagination--... The pagination format.
7
- * @boolean sd-1-5-0-pagination--inverted Inverts the pagination style.
6
+ * @variant { simple } sd-1-5-2-pagination--... The pagination format.
7
+ * @boolean sd-1-5-2-pagination--inverted Inverts the pagination style.
8
8
  */
9
9
 
10
- .sd-1-5-0-pagination > :not(ul) {
11
-
12
- position: absolute;
13
-
14
- height: var(--sd-spacing-0-25, 1px) /* 1px */;
15
-
16
- width: var(--sd-spacing-0-25, 1px) /* 1px */;
17
-
18
- overflow: hidden
10
+ .sd-1-5-2-pagination > :not(ul) {
11
+ position: absolute;
12
+ height: var(--sd-spacing-0-25, 1px) /* 1px */;
13
+ width: var(--sd-spacing-0-25, 1px) /* 1px */;
14
+ overflow: hidden;
19
15
  }
20
16
 
21
- .sd-1-5-0-pagination ul {
22
-
23
- display: flex;
24
-
25
- align-items: center;
26
-
27
- gap: var(--sd-spacing-2, 0.5rem) /* 8px */
17
+ .sd-1-5-2-pagination ul {
18
+ display: flex;
19
+ align-items: center;
20
+ gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
28
21
  }
29
22
 
30
- .sd-1-5-0-pagination ul li a,
31
- .sd-1-5-0-pagination ul li button {
32
-
33
- display: flex;
23
+ .sd-1-5-2-pagination ul li button {
24
+ all: unset;
25
+ border-width: 2px;
26
+ border-style: solid;
27
+ border-color: transparent;
28
+ }
34
29
 
35
- align-items: center;
36
-
37
- justify-content: center;
38
-
39
-
40
-
41
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
42
-
43
- text-decoration-line: none;
44
-
45
- transition-property: color;
46
-
47
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
48
-
49
- transition-duration: 150ms
30
+ .sd-1-5-2-pagination ul li button:hover:not([disabled]) {
31
+ cursor: pointer;
50
32
  }
51
33
 
52
- .sd-1-5-0-pagination ul li a:hover:not([disabled]),
53
- .sd-1-5-0-pagination ul li button:hover:not([disabled]) {
54
-
55
-
56
-
57
- color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */
34
+ .sd-1-5-2-pagination ul li a,
35
+ .sd-1-5-2-pagination ul li button {
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+
40
+ color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
41
+ text-decoration-line: none;
42
+ transition-property: color;
43
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
44
+ transition-duration: 150ms;
58
45
  }
59
46
 
60
- .sd-1-5-0-pagination ul li a:active:not([disabled]),
61
- .sd-1-5-0-pagination ul li button:active:not([disabled]) {
62
-
63
-
64
-
65
- color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */
47
+ .sd-1-5-2-pagination ul li a:hover:not([disabled]),
48
+ .sd-1-5-2-pagination ul li button:hover:not([disabled]) {
49
+
50
+ color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
66
51
  }
67
52
 
68
- .sd-1-5-0-pagination ul li a:focus-visible, .sd-1-5-0-pagination ul li button:focus-visible {
69
-
70
- outline-style: solid;
71
-
72
- outline-width: 2px;
73
-
74
- outline-offset: 2px;
53
+ .sd-1-5-2-pagination ul li a:active:not([disabled]),
54
+ .sd-1-5-2-pagination ul li button:active:not([disabled]) {
55
+
56
+ color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
57
+ }
75
58
 
76
- outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */
59
+ .sd-1-5-2-pagination ul li a:focus-visible, .sd-1-5-2-pagination ul li button:focus-visible {
60
+ outline-style: solid;
61
+ outline-width: 2px;
62
+ outline-offset: 2px;
63
+ outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
77
64
  }
78
65
 
79
66
  /* Previous and Next */
80
67
 
81
- .sd-1-5-0-pagination ul li:first-child,
82
- .sd-1-5-0-pagination ul li:last-child {
83
-
84
- height: var(--sd-spacing-12, 3rem) /* 48px */;
85
-
86
- width: var(--sd-spacing-12, 3rem) /* 48px */;
87
-
88
- font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
68
+ .sd-1-5-2-pagination ul li:first-child,
69
+ .sd-1-5-2-pagination ul li:last-child {
70
+ height: var(--sd-spacing-12, 3rem) /* 48px */;
71
+ width: var(--sd-spacing-12, 3rem) /* 48px */;
72
+ font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
89
73
  }
90
74
 
91
- .sd-1-5-0-pagination ul li:first-child a,
92
- .sd-1-5-0-pagination ul li:first-child button,
93
- .sd-1-5-0-pagination ul li:last-child a,
94
- .sd-1-5-0-pagination ul li:last-child button {
95
-
96
- height: 100%;
97
-
98
- width: 100%
75
+ .sd-1-5-2-pagination ul li:first-child a,
76
+ .sd-1-5-2-pagination ul li:first-child button,
77
+ .sd-1-5-2-pagination ul li:last-child a,
78
+ .sd-1-5-2-pagination ul li:last-child button {
79
+ height: 100%;
80
+ width: 100%;
99
81
  }
100
82
 
101
83
  /* Numbers */
102
84
 
103
- .sd-1-5-0-pagination ul li {
104
-
105
- display: flex;
106
-
107
- height: var(--sd-spacing-8, 2rem) /* 32px */;
108
-
109
- width: var(--sd-spacing-8, 2rem) /* 32px */;
110
-
111
- align-items: center;
112
-
113
- justify-content: center;
114
-
115
- text-align: center
85
+ .sd-1-5-2-pagination ul li {
86
+ display: flex;
87
+ height: var(--sd-spacing-8, 2rem) /* 32px */;
88
+ width: var(--sd-spacing-8, 2rem) /* 32px */;
89
+ align-items: center;
90
+ justify-content: center;
91
+ text-align: center;
116
92
  }
117
93
 
118
- .sd-1-5-0-pagination ul li:not(:first-child):not(:last-child) a,
119
- .sd-1-5-0-pagination ul li:not(:first-child):not(:last-child) button {
120
-
121
- height: 100%;
122
-
123
- width: 100%;
124
-
125
- border-bottom-width: 2px;
126
-
127
- border-bottom-color: transparent
94
+ .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) a,
95
+ .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) button {
96
+ height: 100%;
97
+ width: 100%;
98
+ border-bottom-width: 2px;
99
+ border-bottom-color: transparent;
128
100
  }
129
101
 
130
- .sd-1-5-0-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-0-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
131
-
132
- --tw-border-opacity: 1;
133
-
134
- border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
135
- */
102
+ .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
103
+ --tw-border-opacity: 1;
104
+ border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
105
+ */;
136
106
  }
137
107
 
138
- .sd-1-5-0-pagination ul li a[aria-current],
139
- .sd-1-5-0-pagination ul li button[aria-current] {
140
-
141
-
142
-
143
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
108
+ .sd-1-5-2-pagination ul li a[aria-current],
109
+ .sd-1-5-2-pagination ul li button[aria-current] {
110
+
111
+ color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
144
112
  }
145
113
 
146
- .sd-1-5-0-pagination ul li a[aria-current]:hover:not([disabled]),
147
- .sd-1-5-0-pagination ul li button[aria-current]:hover:not([disabled]) {
148
-
149
-
150
-
151
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
114
+ .sd-1-5-2-pagination ul li a[aria-current]:hover:not([disabled]),
115
+ .sd-1-5-2-pagination ul li button[aria-current]:hover:not([disabled]) {
116
+
117
+ color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
152
118
  }
153
119
 
154
120
  /* Previous and next arrow when it has no href */
155
121
 
156
- .sd-1-5-0-pagination ul li:first-child:has(a:not([href])) a,
157
- .sd-1-5-0-pagination ul li:last-child:has(a:not([href])) a,
158
- .sd-1-5-0-pagination ul li:first-child:has(button[disabled]) button,
159
- .sd-1-5-0-pagination ul li:last-child:has(button[disabled]) button {
160
-
161
- cursor: not-allowed;
162
-
163
-
164
-
165
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */
122
+ .sd-1-5-2-pagination ul li:first-child:has(a:not([href])) a,
123
+ .sd-1-5-2-pagination ul li:last-child:has(a:not([href])) a,
124
+ .sd-1-5-2-pagination ul li:first-child:has(button[disabled]) button,
125
+ .sd-1-5-2-pagination ul li:last-child:has(button[disabled]) button {
126
+ cursor: not-allowed;
127
+
128
+ color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
166
129
  }
167
130
 
168
- .sd-1-5-0-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
169
- .sd-1-5-0-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
170
- .sd-1-5-0-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
171
- .sd-1-5-0-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
172
-
173
-
174
-
175
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */
131
+ .sd-1-5-2-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
132
+ .sd-1-5-2-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
133
+ .sd-1-5-2-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
134
+ .sd-1-5-2-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
135
+
136
+ color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
176
137
  }
177
138
 
178
139
  /* Numbers */
179
140
 
180
141
  /* Number which is not current */
181
142
 
182
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
183
-
184
- pointer-events: none;
185
-
186
- position: absolute
143
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
144
+ pointer-events: none;
145
+ position: absolute;
187
146
  }
188
147
 
189
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
190
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
191
-
192
- display: none
148
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
149
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
150
+ display: none;
193
151
  }
194
152
 
195
153
  /* Apply ellipsis to (n + 2 && n - 1) */
196
154
 
197
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
198
-
199
- pointer-events: auto !important;
200
-
201
- position: relative !important
155
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
156
+ pointer-events: auto !important;
157
+ position: relative !important;
202
158
  }
203
159
 
204
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
205
-
206
- --tw-content: '...';
207
-
208
- content: var(--tw-content)
160
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
161
+ --tw-content: '...';
162
+ content: var(--tw-content);
209
163
  }
210
164
 
211
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),
212
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),
213
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
165
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),
166
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),
167
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
214
168
  + li a[aria-current],
215
169
  + li button[aria-current]),
216
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
170
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
217
171
  a[aria-current],
218
172
  button[aria-current]) + li {
219
-
220
- pointer-events: auto !important;
221
-
222
- position: relative !important
173
+ pointer-events: auto !important;
174
+ position: relative !important;
223
175
  }
224
176
 
225
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after,
226
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after,
227
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
177
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after,
178
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after,
179
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
228
180
  + li a[aria-current],
229
181
  + li button[aria-current])::after,
230
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
182
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
231
183
  a[aria-current],
232
184
  button[aria-current]) + li::after {
233
-
234
- content: var(--tw-content) !important;
235
-
236
- display: none !important
185
+ content: var(--tw-content) !important;
186
+ display: none !important;
237
187
  }
238
188
 
239
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
240
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
241
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
242
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
243
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
189
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
190
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
191
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
192
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
193
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
244
194
  + li a[aria-current],
245
195
  + li button[aria-current]) a,
246
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
196
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
247
197
  + li a[aria-current],
248
198
  + li button[aria-current]) button,
249
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
199
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
250
200
  a[aria-current],
251
201
  button[aria-current]) + li a,
252
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):has(
202
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
253
203
  a[aria-current],
254
204
  button[aria-current]) + li button {
255
-
256
- display: flex !important
205
+ display: flex !important;
257
206
  }
258
207
 
259
208
  /* When one of the first 4 pages is selected */
260
209
 
261
210
  /* Show until the 5th page (forward) */
262
211
 
263
- .sd-1-5-0-pagination:not(.sd-1-5-0-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) {
264
-
265
- pointer-events: auto;
266
-
267
- position: relative
212
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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) {
213
+ pointer-events: auto;
214
+ position: relative;
268
215
  }
269
216
 
270
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
271
-
272
- content: var(--tw-content);
273
-
274
- display: none
217
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
218
+ content: var(--tw-content);
219
+ display: none;
275
220
  }
276
221
 
277
- .sd-1-5-0-pagination:not(.sd-1-5-0-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,
278
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
279
-
280
- display: flex
222
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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,
223
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
224
+ display: flex;
281
225
  }
282
226
 
283
227
  /* Show ellipsis on the 6th */
284
228
 
285
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
286
-
287
- pointer-events: none;
288
-
289
- position: relative
229
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
230
+ pointer-events: none;
231
+ position: relative;
290
232
  }
291
233
 
292
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
293
-
294
- --tw-content: '...';
295
-
296
- content: var(--tw-content)
234
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
235
+ --tw-content: '...';
236
+ content: var(--tw-content);
297
237
  }
298
238
 
299
239
  /* When one of the first 4 pages is selected, show until the 5th page (backward) */
300
240
 
301
- .sd-1-5-0-pagination:not(.sd-1-5-0-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]) {
302
-
303
- pointer-events: auto;
304
-
305
- position: relative
241
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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]) {
242
+ pointer-events: auto;
243
+ position: relative;
306
244
  }
307
245
 
308
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
309
-
310
- content: var(--tw-content);
311
-
312
- display: none
246
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
247
+ content: var(--tw-content);
248
+ display: none;
313
249
  }
314
250
 
315
- .sd-1-5-0-pagination:not(.sd-1-5-0-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,
316
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
317
-
318
- display: flex
251
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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,
252
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
253
+ display: flex;
319
254
  }
320
255
 
321
256
  /* When one of the last 4 pages is selected, show the last 4 pages (forward) */
322
257
 
323
- .sd-1-5-0-pagination:not(.sd-1-5-0-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) {
324
-
325
- pointer-events: auto;
326
-
327
- position: relative
258
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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) {
259
+ pointer-events: auto;
260
+ position: relative;
328
261
  }
329
262
 
330
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
331
-
332
- content: var(--tw-content);
333
-
334
- display: none
263
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
264
+ content: var(--tw-content);
265
+ display: none;
335
266
  }
336
267
 
337
- .sd-1-5-0-pagination:not(.sd-1-5-0-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,
338
- .sd-1-5-0-pagination:not(.sd-1-5-0-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 {
339
-
340
- display: flex
268
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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,
269
+ .sd-1-5-2-pagination:not(.sd-1-5-2-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 {
270
+ display: flex;
341
271
  }
342
272
 
343
273
  /* When one of the last 4 pages is selected, show the last 4 pages (backward) */
344
274
 
345
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
275
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
346
276
  ~ :nth-last-child(-n + 5) a[aria-current],
347
277
  ~ :nth-last-child(-n + 5) button[aria-current]
348
278
  ) {
349
-
350
- pointer-events: auto;
351
-
352
- position: relative
279
+ pointer-events: auto;
280
+ position: relative;
353
281
  }
354
282
 
355
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
283
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
356
284
  ~ :nth-last-child(-n + 5) a[aria-current],
357
285
  ~ :nth-last-child(-n + 5) button[aria-current]
358
286
  )::after {
359
-
360
- content: var(--tw-content);
361
-
362
- display: none
287
+ content: var(--tw-content);
288
+ display: none;
363
289
  }
364
290
 
365
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
291
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
366
292
  ~ :nth-last-child(-n + 5) a[aria-current],
367
293
  ~ :nth-last-child(-n + 5) button[aria-current]
368
294
  ) a,
369
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
295
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
370
296
  ~ :nth-last-child(-n + 5) a[aria-current],
371
297
  ~ :nth-last-child(-n + 5) button[aria-current]
372
298
  ) button {
373
-
374
- display: flex
299
+ display: flex;
375
300
  }
376
301
 
377
302
  /* Show ellipsis on the 6th to last */
378
303
 
379
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
304
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
380
305
  ~ :nth-last-child(-n + 5) a[aria-current],
381
306
  ~ :nth-last-child(-n + 5) button[aria-current]
382
307
  ) {
383
-
384
- pointer-events: none;
385
-
386
- position: relative
308
+ pointer-events: none;
309
+ position: relative;
387
310
  }
388
311
 
389
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
312
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
390
313
  ~ :nth-last-child(-n + 5) a[aria-current],
391
314
  ~ :nth-last-child(-n + 5) button[aria-current]
392
315
  )::after {
393
-
394
- --tw-content: '...';
395
-
396
- content: var(--tw-content)
316
+ --tw-content: '...';
317
+ content: var(--tw-content);
397
318
  }
398
319
 
399
320
  /* When it only has 5 numbers + 2 prev & next buttons */
400
321
 
401
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
402
-
403
- pointer-events: auto;
404
-
405
- position: relative
322
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
323
+ pointer-events: auto;
324
+ position: relative;
406
325
  }
407
326
 
408
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
409
-
410
- content: var(--tw-content);
411
-
412
- display: none
327
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
328
+ content: var(--tw-content);
329
+ display: none;
413
330
  }
414
331
 
415
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
416
- .sd-1-5-0-pagination:not(.sd-1-5-0-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
417
-
418
- display: flex
332
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
333
+ .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
334
+ display: flex;
419
335
  }
420
336
 
421
- .sd-1-5-0-pagination--simple ul li:nth-child(2) {
422
-
423
- position: relative;
424
-
425
- margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
426
-
427
- width: var(--sd-spacing-8, 2rem) /* 32px */;
428
-
429
- border-bottom-width: 2px;
430
-
431
- --tw-border-opacity: 1;
432
-
433
- border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
434
- */
337
+ .sd-1-5-2-pagination--simple ul li:nth-child(2) {
338
+ position: relative;
339
+ margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
340
+ width: var(--sd-spacing-8, 2rem) /* 32px */;
341
+ border-bottom-width: 2px;
342
+ --tw-border-opacity: 1;
343
+ border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
344
+ */;
435
345
  }
436
346
 
437
- .sd-1-5-0-pagination--simple ul li:nth-child(2)::after {
438
-
439
- position: absolute;
440
-
441
- right: -18px;
442
-
443
- --tw-scale-y: 1.5;
444
-
445
- 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));
446
-
447
- --tw-content: '/';
448
-
449
- content: var(--tw-content)
347
+ .sd-1-5-2-pagination--simple ul li:nth-child(2)::after {
348
+ position: absolute;
349
+ right: -18px;
350
+ --tw-scale-y: 1.5;
351
+ 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));
352
+ --tw-content: '/';
353
+ content: var(--tw-content);
450
354
  }
451
355
 
452
- .sd-1-5-0-pagination--simple ul li:nth-last-child(2) {
356
+ .sd-1-5-2-pagination--simple ul li:nth-child(2) {
453
357
 
454
- border-bottom-width: 2px;
358
+ border-bottom-style: solid;
359
+ }
455
360
 
456
- border-bottom-color: transparent
361
+ .sd-1-5-2-pagination--simple ul li:nth-last-child(2) {
362
+ border-bottom-width: 2px;
363
+ border-bottom-color: transparent;
457
364
  }
458
365
 
459
- .sd-1-5-0-pagination--inverted ul li::after {
460
-
461
- content: var(--tw-content);
462
-
463
-
464
-
465
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
366
+ .sd-1-5-2-pagination--inverted ul li::after {
367
+ content: var(--tw-content);
368
+
369
+ color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
466
370
  }
467
371
 
468
- .sd-1-5-0-pagination--inverted ul li:first-child:has(a:not([href])) a,
469
- .sd-1-5-0-pagination--inverted ul li:last-child:has(a:not([href])) a,
470
- .sd-1-5-0-pagination--inverted ul li:first-child:has(button[disabled]) button,
471
- .sd-1-5-0-pagination--inverted ul li:last-child:has(button[disabled]) button {
472
-
473
-
474
-
475
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
372
+ .sd-1-5-2-pagination--inverted ul li:first-child:has(a:not([href])) a,
373
+ .sd-1-5-2-pagination--inverted ul li:last-child:has(a:not([href])) a,
374
+ .sd-1-5-2-pagination--inverted ul li:first-child:has(button[disabled]) button,
375
+ .sd-1-5-2-pagination--inverted ul li:last-child:has(button[disabled]) button {
376
+
377
+ color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
476
378
  }
477
379
 
478
- .sd-1-5-0-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
479
- .sd-1-5-0-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
480
- .sd-1-5-0-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
481
- .sd-1-5-0-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
482
-
483
-
484
-
485
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
380
+ .sd-1-5-2-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
381
+ .sd-1-5-2-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
382
+ .sd-1-5-2-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
383
+ .sd-1-5-2-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
384
+
385
+ color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
486
386
  }
487
387
 
488
- .sd-1-5-0-pagination--inverted ul li a,
489
- .sd-1-5-0-pagination--inverted ul li a[aria-current],
490
- .sd-1-5-0-pagination--inverted ul li button,
491
- .sd-1-5-0-pagination--inverted ul li button[aria-current] {
492
-
493
-
494
-
495
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
388
+ .sd-1-5-2-pagination--inverted ul li a,
389
+ .sd-1-5-2-pagination--inverted ul li a[aria-current],
390
+ .sd-1-5-2-pagination--inverted ul li button,
391
+ .sd-1-5-2-pagination--inverted ul li button[aria-current] {
392
+
393
+ color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
496
394
  }
497
395
 
498
- .sd-1-5-0-pagination--inverted ul li a:hover:not([disabled]),
499
- .sd-1-5-0-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
500
- .sd-1-5-0-pagination--inverted ul li button:hover:not([disabled]),
501
- .sd-1-5-0-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
502
-
503
-
504
-
505
- 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 */
396
+ .sd-1-5-2-pagination--inverted ul li a:hover:not([disabled]),
397
+ .sd-1-5-2-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
398
+ .sd-1-5-2-pagination--inverted ul li button:hover:not([disabled]),
399
+ .sd-1-5-2-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
400
+
401
+ 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 */;
506
402
  }
507
403
 
508
- .sd-1-5-0-pagination--inverted ul li a:active:not([disabled]),
509
- .sd-1-5-0-pagination--inverted ul li a[aria-current]:active:not([disabled]),
510
- .sd-1-5-0-pagination--inverted ul li button:active:not([disabled]),
511
- .sd-1-5-0-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
512
-
513
-
514
-
515
- color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
516
- Used for inverted pressed interaction text link */
404
+ .sd-1-5-2-pagination--inverted ul li a:active:not([disabled]),
405
+ .sd-1-5-2-pagination--inverted ul li a[aria-current]:active:not([disabled]),
406
+ .sd-1-5-2-pagination--inverted ul li button:active:not([disabled]),
407
+ .sd-1-5-2-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
408
+
409
+ color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
410
+ Used for inverted pressed interaction text link */;
517
411
  }
518
412
 
519
- .sd-1-5-0-pagination--inverted ul li a:focus-visible, .sd-1-5-0-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-0-pagination--inverted ul li button:focus-visible, .sd-1-5-0-pagination--inverted ul li button[aria-current]:focus-visible {
520
-
521
- outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */
413
+ .sd-1-5-2-pagination--inverted ul li a:focus-visible, .sd-1-5-2-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-2-pagination--inverted ul li button:focus-visible, .sd-1-5-2-pagination--inverted ul li button[aria-current]:focus-visible {
414
+ outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
522
415
  }
523
416
 
524
- .sd-1-5-0-pagination--inverted.sd-1-5-0-pagination--simple ul li {
525
-
526
-
527
-
528
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
417
+ .sd-1-5-2-pagination--inverted.sd-1-5-2-pagination--simple ul li {
418
+
419
+ color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
529
420
  }
530
421
 
531
- .sd-1-5-0-pagination--inverted.sd-1-5-0-pagination--simple ul li::after {
532
-
533
- content: var(--tw-content);
534
-
535
-
536
-
537
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
422
+ .sd-1-5-2-pagination--inverted.sd-1-5-2-pagination--simple ul li::after {
423
+ content: var(--tw-content);
424
+
425
+ color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
538
426
  }