@bi-digital/css 0.11.10 → 0.12.0

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 (36) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +52 -114
  3. package/dist/components/avatar.css +11 -59
  4. package/dist/components/badge.css +25 -92
  5. package/dist/components/button.css +108 -131
  6. package/dist/components/card.css +232 -309
  7. package/dist/components/checkbox-subsection.css +13 -17
  8. package/dist/components/chip.css +41 -185
  9. package/dist/components/details.css +86 -105
  10. package/dist/components/dialog.css +97 -102
  11. package/dist/components/dropdown.css +19 -30
  12. package/dist/components/field.css +203 -219
  13. package/dist/components/fieldset.css +18 -26
  14. package/dist/components/filter-group.css +76 -94
  15. package/dist/components/footer.css +104 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +188 -206
  18. package/dist/components/label.css +15 -21
  19. package/dist/components/link.css +36 -56
  20. package/dist/components/logo.css +45 -41
  21. package/dist/components/navbar.css +49 -52
  22. package/dist/components/pagination.css +27 -30
  23. package/dist/components/popover.css +37 -46
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +25 -25
  29. package/dist/components/tabs.css +105 -121
  30. package/dist/components/tooltip.css +32 -32
  31. package/dist/components/validation-message.css +11 -11
  32. package/dist/components.css +1695 -2281
  33. package/dist/index.css +509 -10
  34. package/dist/salesforce.css +2200 -2289
  35. package/dist/tokens.css +505 -8
  36. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -1,20 +1,18 @@
1
1
  .bi-alert {
2
- --bic-alert-background: var(--bi-primary-5);
3
- --bic-alert-border-color: var(--bi-primary-10);
2
+ --bic-alert-background: var(--bi-color-primary-surface-strong);
3
+ --bic-alert-border-color: var(--bi-color-primary-stroke);
4
4
  --bic-alert-border-width: var(--bi-stroke-thin);
5
- --bic-alert-color: var(--bi-primary-90);
5
+ --bic-alert-color: var(--bi-color-primary-text-subtle);
6
6
  --bic-alert-icon-size: var(--bi-icon-medium);
7
7
  --bic-alert-gap: var(--bi-scale-1x);
8
8
  --bic-alert-padding: var(--bi-scale-2x);
9
- }
10
9
 
11
- .bi-alert[data-dark="true"] {
12
- --bic-alert-background: var(--bi-primary-95);
13
- --bic-alert-border-color: var(--bi-primary-85);
14
- --bic-alert-color: var(--bi-primary-5);
15
- }
10
+ &[data-color] {
11
+ --bic-alert-background: var(--bi-color-surface-strong);
12
+ --bic-alert-border-color: var(--bi-color-stroke);
13
+ --bic-alert-color: var(--bi-color-text-subtle);
14
+ }
16
15
 
17
- .bi-alert {
18
16
  background: var(--bic-alert-background);
19
17
  color: var(--bic-alert-color);
20
18
  border: var(--bic-alert-border-width) solid var(--bic-alert-border-color);
@@ -25,126 +23,58 @@
25
23
  width: fit-content;
26
24
  display: grid;
27
25
  position: relative;
28
- }
29
-
30
- .bi-alert > svg {
31
- font-size: var(--bic-alert-icon-size);
32
- }
33
-
34
- .bi-alert:has( > svg:first-child) {
35
- grid-template-columns: auto 1fr;
36
- }
37
-
38
- .bi-alert:has( > .bi-button:last-child) {
39
- grid-template-columns: 1fr auto;
40
- }
41
-
42
- .bi-alert:has( > .bi-button:last-child):has( > svg:first-child) {
43
- grid-template-columns: auto 1fr auto;
44
- }
45
-
46
- .bi-alert > .bi-button {
47
- margin: calc(var(--bic-alert-padding) * -1);
48
- grid-area: 1 / 3;
49
- margin-left: 0;
50
- }
51
-
52
- .bi-alert[data-size="small"] {
53
- --bic-alert-icon-size: var(--bi-icon-small);
54
- --bic-alert-padding: var(--bi-scale-1x);
55
- --bic-alert-gap: var(--bi-scale-1x);
56
- }
57
-
58
- .bi-alert[data-size="large"] {
59
- --bic-alert-padding: var(--bi-scale-3x);
60
- --bic-alert-gap: var(--bi-scale-2x);
61
- }
62
-
63
- .bi-alert[data-variant="success"] {
64
- --bic-alert-background: var(--bi-success-5);
65
- --bic-alert-border-color: var(--bi-success-10);
66
- --bic-alert-color: var(--bi-success-90);
67
- }
68
-
69
- .bi-alert[data-variant="success"][data-dark="true"] {
70
- --bic-alert-background: var(--bi-success-95);
71
- --bic-alert-border-color: var(--bi-success-85);
72
- --bic-alert-color: var(--bi-success-5);
73
- }
74
26
 
75
- .bi-alert[data-variant="alert"] {
76
- --bic-alert-background: var(--bi-alert-10);
77
- --bic-alert-border-color: var(--bi-alert-15);
78
- --bic-alert-color: var(--bi-alert-90);
79
- }
80
-
81
- .bi-alert[data-variant="alert"][data-dark="true"] {
82
- --bic-alert-background: var(--bi-alert-95);
83
- --bic-alert-border-color: var(--bi-alert-85);
84
- --bic-alert-color: var(--bi-alert-5);
85
- }
27
+ & > svg {
28
+ font-size: var(--bic-alert-icon-size);
29
+ }
86
30
 
87
- .bi-alert[data-variant="warning"] {
88
- --bic-alert-background: var(--bi-warning-10);
89
- --bic-alert-border-color: var(--bi-warning-15);
90
- --bic-alert-color: var(--bi-warning-90);
91
- }
31
+ &:has( > svg:first-child) {
32
+ grid-template-columns: auto 1fr;
33
+ }
92
34
 
93
- .bi-alert[data-variant="warning"][data-dark="true"] {
94
- --bic-alert-background: var(--bi-warning-95);
95
- --bic-alert-border-color: var(--bi-warning-85);
96
- --bic-alert-color: var(--bi-warning-5);
97
- }
35
+ &:has( > .bi-button:last-child) {
36
+ grid-template-columns: 1fr auto;
98
37
 
99
- .bi-alert[data-variant="info"] {
100
- --bic-alert-background: var(--bi-info-5);
101
- --bic-alert-border-color: var(--bi-info-10);
102
- --bic-alert-color: var(--bi-info-90);
103
- }
38
+ &:has( > svg:first-child) {
39
+ grid-template-columns: auto 1fr auto;
40
+ }
41
+ }
104
42
 
105
- .bi-alert[data-variant="info"][data-dark="true"] {
106
- --bic-alert-background: var(--bi-info-90);
107
- --bic-alert-border-color: var(--bi-info-80);
108
- --bic-alert-color: var(--bi-info-10);
109
- }
43
+ & > .bi-button {
44
+ margin: calc(var(--bic-alert-padding) * -1);
45
+ grid-area: 1 / 3;
46
+ margin-left: 0;
47
+ }
110
48
 
111
- .bi-alert[data-variant="neutral"] {
112
- --bic-alert-background: var(--bi-neutral-10);
113
- --bic-alert-border-color: var(--bi-neutral-15);
114
- --bic-alert-color: var(--bi-neutral-95);
115
- }
49
+ &[data-size="small"] {
50
+ --bic-alert-icon-size: var(--bi-icon-small);
51
+ --bic-alert-padding: var(--bi-scale-1x);
52
+ --bic-alert-gap: var(--bi-scale-1x);
53
+ }
116
54
 
117
- .bi-alert[data-variant="neutral"][data-dark="true"] {
118
- --bic-alert-background: var(--bi-neutral-90);
119
- --bic-alert-border-color: var(--bi-neutral-90);
120
- --bic-alert-color: var(--bi-neutral-30);
121
- }
55
+ &[data-size="large"] {
56
+ --bic-alert-padding: var(--bi-scale-3x);
57
+ --bic-alert-gap: var(--bi-scale-2x);
58
+ }
122
59
 
123
- .bi-alert:has( > .bi-alert--footer) {
124
- width: 100%;
125
- }
60
+ &:has( > .bi-alert--footer) {
61
+ width: 100%;
62
+ }
126
63
 
127
- .bi-alert .bi-alert--footer {
128
- justify-content: flex-end;
129
- align-items: center;
130
- gap: var(--bic-alert-gap);
131
- grid-column: 1 / -1;
132
- display: flex;
64
+ & .bi-alert--footer {
65
+ justify-content: flex-end;
66
+ align-items: center;
67
+ gap: var(--bic-alert-gap);
68
+ grid-column: 1 / -1;
69
+ display: flex;
70
+ }
133
71
  }
134
72
 
135
73
  .bi-avatar {
136
- --bic-avatar-background-color: var(--bi-primary-10);
137
- --bic-avatar-color: var(--bi-primary-90);
74
+ --bic-avatar-background-color: var(--bi-color-surface-strong);
75
+ --bic-avatar-color: var(--bi-color-text-subtle);
138
76
  --bic-avatar-size: var(--bi-scale-24x);
139
77
  --bic-avatar-font-size: 1.75rem;
140
- }
141
-
142
- .bi-avatar[data-dark="true"] {
143
- --bic-avatar-background-color: var(--bi-primary-85);
144
- --bic-avatar-color: var(--bi-primary-10);
145
- }
146
-
147
- .bi-avatar {
148
78
  border-radius: var(--bi-radius-full);
149
79
  background-color: var(--bic-avatar-background-color);
150
80
  color: var(--bic-avatar-color);
@@ -164,68 +94,33 @@
164
94
  text-decoration: none;
165
95
  display: flex;
166
96
  overflow: hidden;
167
- }
168
-
169
- .bi-avatar[data-color="info"] {
170
- --bic-avatar-background-color: var(--bi-info-10);
171
- --bic-avatar-color: var(--bi-info-90);
172
- }
173
-
174
- .bi-avatar[data-color="info"][data-dark="true"] {
175
- --bic-avatar-background-color: var(--bi-info-85);
176
- --bic-avatar-color: var(--bi-info-10);
177
- }
178
-
179
- .bi-avatar[data-color="warning"] {
180
- --bic-avatar-background-color: var(--bi-warning-10);
181
- --bic-avatar-color: var(--bi-warning-90);
182
- }
183
-
184
- .bi-avatar[data-color="warning"][data-dark="true"] {
185
- --bic-avatar-background-color: var(--bi-warning-85);
186
- --bic-avatar-color: var(--bi-warning-10);
187
- }
188
-
189
- .bi-avatar[data-color="success"] {
190
- --bic-avatar-background-color: var(--bi-success-10);
191
- --bic-avatar-color: var(--bi-success-90);
192
- }
193
-
194
- .bi-avatar[data-color="success"][data-dark="true"] {
195
- --bic-avatar-background-color: var(--bi-success-85);
196
- --bic-avatar-color: var(--bi-success-10);
197
- }
198
-
199
- .bi-avatar[data-color="alert"] {
200
- --bic-avatar-background-color: var(--bi-alert-10);
201
- --bic-avatar-color: var(--bi-alert-90);
202
- }
203
-
204
- .bi-avatar[data-color="alert"][data-dark="true"] {
205
- --bic-avatar-background-color: var(--bi-alert-85);
206
- --bic-avatar-color: var(--bi-alert-10);
207
- }
208
97
 
209
- .bi-avatar[data-size="small"] {
210
- --bic-avatar-size: var(--bi-scale-16x);
211
- --bic-avatar-font-size: 1.25rem;
212
- }
98
+ &[data-size="small"] {
99
+ --bic-avatar-size: var(--bi-scale-16x);
100
+ --bic-avatar-font-size: 1.25rem;
101
+ }
213
102
 
214
- .bi-avatar > img {
215
- object-fit: cover;
216
- width: 100%;
217
- height: 100%;
103
+ & > img {
104
+ object-fit: cover;
105
+ width: 100%;
106
+ height: 100%;
107
+ }
218
108
  }
219
109
 
220
110
  .bi-badge {
221
- --bic-badge-background: transparent;
222
- --bic-badge-color: var(--bi-neutral-60);
223
- --bic-badge-border-color: var(--bi-neutral-25);
111
+ --bic-badge-background: var(--bi-color-neutral-fill);
112
+ --bic-badge-color: var(--bi-color-neutral-on-fill);
224
113
  --bic-badge-border-radius: var(--bi-radius-medium);
225
114
  --bic-badge-border-width: var(--bi-stroke-thin);
226
115
  --bic-badge-height: var(--bi-scale-6x);
227
116
  --bic-badge-font: var(--bi-font-body-medium);
228
117
  --bic-badge-padding: 0 var(--bi-scale-1-5x);
118
+
119
+ &[data-color] {
120
+ --bic-badge-background: var(--bi-color-fill);
121
+ --bic-badge-color: var(--bi-color-on-fill);
122
+ }
123
+
229
124
  padding: var(--bic-badge-padding);
230
125
  border-radius: var(--bic-badge-border-radius);
231
126
  background-color: var(--bic-badge-background);
@@ -234,100 +129,28 @@
234
129
  width: max-content;
235
130
  height: fit-content;
236
131
  min-height: var(--bic-badge-height);
237
- box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
238
132
  word-break: break-word;
239
133
  justify-content: center;
240
134
  align-items: center;
241
135
  display: inline-flex;
242
- }
243
-
244
- .bi-badge[data-dark="true"] {
245
- --bic-badge-border-color: var(--bi-neutral-50);
246
- --bic-badge-color: var(--bi-neutral-10);
247
- }
248
-
249
- .bi-badge[data-single-letter="true"]:not([data-size="xs"]) {
250
- --bic-badge-border-radius: var(--bi-radius-full);
251
- min-width: var(--bic-badge-height);
252
- }
253
-
254
- .bi-badge[data-size="xs"] {
255
- --bic-badge-padding: 0 var(--bi-scale-0-50x);
256
- --bic-badge-font: var(--bi-font-body-xs);
257
- --bic-badge-border-radius: var(--bi-radius-small);
258
- --bic-badge-height: var(--bi-scale-4x);
259
- }
260
-
261
- .bi-badge[data-size="small"] {
262
- --bic-badge-padding: 0 var(--bi-scale-1x);
263
- --bic-badge-font: var(--bi-font-body-xs);
264
- --bic-badge-height: var(--bi-scale-5x);
265
- }
266
-
267
- .bi-badge[data-color="warning"] {
268
- --bic-badge-background: var(--bi-secondary-10);
269
- --bic-badge-color: var(--bi-secondary-95);
270
- --bic-badge-border-color: var(--bic-badge-background);
271
- }
272
-
273
- .bi-badge[data-color="warning"][data-dark="true"] {
274
- --bic-badge-background: var(--bi-secondary-100);
275
- --bic-badge-color: var(--bi-secondary-10);
276
- }
277
-
278
- .bi-badge[data-color="alert"] {
279
- --bic-badge-background: var(--bi-alert-10);
280
- --bic-badge-color: var(--bi-alert-85);
281
- --bic-badge-border-color: var(--bic-badge-background);
282
- }
283
-
284
- .bi-badge[data-color="alert"][data-dark="true"] {
285
- --bic-badge-background: var(--bi-alert-100);
286
- --bic-badge-color: var(--bi-alert-10);
287
- }
288
-
289
- .bi-badge[data-color="success"] {
290
- --bic-badge-background: var(--bi-success-10);
291
- --bic-badge-color: var(--bi-success-95);
292
- --bic-badge-border-color: var(--bic-badge-background);
293
- }
294
-
295
- .bi-badge[data-color="success"][data-dark="true"] {
296
- --bic-badge-background: var(--bi-success-100);
297
- --bic-badge-color: var(--bi-success-10);
298
- }
299
-
300
- .bi-badge[data-color="brand"] {
301
- --bic-badge-background: var(--bi-primary-10);
302
- --bic-badge-color: var(--bi-primary-85);
303
- --bic-badge-border-color: var(--bic-badge-background);
304
- }
305
-
306
- .bi-badge[data-color="brand"][data-dark="true"] {
307
- --bic-badge-background: var(--bi-primary-100);
308
- --bic-badge-color: var(--bi-primary-10);
309
- }
310
-
311
- .bi-badge[data-color="info"] {
312
- --bic-badge-background: var(--bi-info-10);
313
- --bic-badge-color: var(--bi-info-9);
314
- --bic-badge-border-color: var(--bic-badge-background);
315
- }
316
136
 
317
- .bi-badge[data-color="info"][data-dark="true"] {
318
- --bic-badge-background: var(--bi-info-100);
319
- --bic-badge-color: var(--bi-info-10);
320
- }
137
+ &[data-single-letter="true"]:not([data-size="xs"]) {
138
+ --bic-badge-border-radius: var(--bi-radius-full);
139
+ min-width: var(--bic-badge-height);
140
+ }
321
141
 
322
- .bi-badge[data-color="negative"] {
323
- --bic-badge-background: var(--bi-neutral-90);
324
- --bic-badge-color: var(--bi-basic-white);
325
- --bic-badge-border-color: var(--bic-badge-background);
326
- }
142
+ &[data-size="xs"] {
143
+ --bic-badge-padding: 0 var(--bi-scale-0-50x);
144
+ --bic-badge-font: var(--bi-font-body-xs);
145
+ --bic-badge-border-radius: var(--bi-radius-small);
146
+ --bic-badge-height: var(--bi-scale-4x);
147
+ }
327
148
 
328
- .bi-badge[data-color="negative"][data-dark="true"] {
329
- --bic-badge-background: var(--bi-neutral-100);
330
- --bic-badge-color: var(--bi-neutral-10);
149
+ &[data-size="small"] {
150
+ --bic-badge-padding: 0 var(--bi-scale-1x);
151
+ --bic-badge-font: var(--bi-font-body-xs);
152
+ --bic-badge-height: var(--bi-scale-5x);
153
+ }
331
154
  }
332
155
 
333
156
  .bi-button {
@@ -338,13 +161,17 @@
338
161
  --bic-button-size: var(--bi-scale-11x);
339
162
  --bic-button-font-size: 1rem;
340
163
  --bic-button-line-height: 1.5;
341
- --bic-button-color: var(--bi-basic-white);
342
- --bic-button-background: transparent;
343
- --bic-button-background-hover: transparent;
344
- --bic-button-background-press: transparent;
345
- --bic-button-active-color: var(--bi-primary-50);
346
- --bic-button-focus-shadow-color: var(--bi-basic-white);
347
- --bic-button-focus-outline-color: var(--bi-primary-50);
164
+ --bic-button-color: var(--bi-color-primary-on-fill);
165
+ --bic-button-background: var(--bi-color-primary-fill);
166
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-button-background);
167
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-button-background);
168
+ --bic-button-active-color: var(--bi-states-focus);
169
+
170
+ &[data-color] {
171
+ --bic-button-color: var(--bi-color-on-fill);
172
+ --bic-button-background: var(--bi-color-fill);
173
+ }
174
+
348
175
  font-family: var(--bi-font-family-plain);
349
176
  font-size: var(--bic-button-font-size);
350
177
  line-height: var(--bic-button-line-height);
@@ -372,167 +199,139 @@
372
199
  display: flex;
373
200
  position: relative;
374
201
  overflow: hidden;
375
- }
376
-
377
- .bi-button[data-dark="true"] {
378
- --bic-button-active-color: var(--bi-primary-30);
379
- --bic-button-focus-shadow-color: var(--bi-neutral-95);
380
- --bic-button-focus-outline-color: var(--bi-primary-30);
381
- }
382
202
 
383
- .bi-button[data-fullwidth="true"] {
384
- width: 100%;
385
- }
203
+ &[data-fullwidth="true"] {
204
+ width: 100%;
205
+ }
386
206
 
387
- .bi-button[data-active="true"], .bi-button[aria-expanded="true"] {
388
- box-shadow: 0px 0px 0px 1.5px var(--bic-button-active-color) inset;
389
- }
207
+ &[data-active="true"], &[aria-expanded="true"] {
208
+ box-shadow: 0px 0px 0px 1.5px var(--bic-button-active-color) inset;
209
+ }
390
210
 
391
- .bi-button:focus-visible {
392
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-button-focus-shadow-color), var(--bic-button-box-shadow));
393
- outline: var(--_bi--focus, 3px solid var(--bic-button-focus-outline-color));
394
- outline-offset: var(--_bi--focus, 2px);
395
- }
211
+ &:focus-visible {
212
+ box-shadow: var(--bic-button-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
213
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
214
+ outline-offset: var(--_bi--focus, 2px);
396
215
 
397
- .bi-button:focus-visible * {
398
- --_bi--focus: ;
399
- }
216
+ & * {
217
+ --_bi--focus: ;
218
+ }
219
+ }
400
220
 
401
- .bi-button[data-size="small"] {
402
- --bic-button-font-size: .875rem;
403
- --bic-button-line-height: 1.25rem;
404
- --bic-button-padding-block: var(--bi-scale-1-5x);
405
- --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
406
- --bic-button-icon-size: var(--bi-icon-small);
407
- --bic-button-size: var(--bi-scale-8x);
408
- }
221
+ &[data-size="small"] {
222
+ --bic-button-font-size: .875rem;
223
+ --bic-button-line-height: 1.25rem;
224
+ --bic-button-padding-block: var(--bi-scale-1-5x);
225
+ --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
226
+ --bic-button-icon-size: var(--bi-icon-small);
227
+ --bic-button-size: var(--bi-scale-8x);
228
+ }
409
229
 
410
- .bi-button[data-size="large"] {
411
- --bic-button-padding-block: var(--bi-scale-2x);
412
- --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
413
- --bic-button-icon-size: var(--bi-icon-large);
414
- --bic-button-size: var(--bi-scale-14x);
415
- }
230
+ &[data-size="large"] {
231
+ --bic-button-padding-block: var(--bi-scale-2x);
232
+ --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
233
+ --bic-button-icon-size: var(--bi-icon-large);
234
+ --bic-button-size: var(--bi-scale-14x);
235
+ }
416
236
 
417
- .bi-button[data-icon] {
418
- width: var(--bic-button-size);
419
- height: var(--bic-button-size);
420
- --bic-button-font-size: var(--bic-button-icon-size);
421
- padding: 0;
422
- }
237
+ &[data-icon] {
238
+ width: var(--bic-button-size);
239
+ height: var(--bic-button-size);
240
+ --bic-button-font-size: var(--bic-button-icon-size);
241
+ padding: 0;
242
+ }
423
243
 
424
- .bi-button[data-skewed] {
425
- --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
426
- --bic-button-padding-inline: var(--_bic-button-skew-dist);
427
- }
244
+ &[data-skewed] {
245
+ --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
246
+ --bic-button-padding-inline: var(--_bic-button-skew-dist);
428
247
 
429
- .bi-button[data-skewed][data-skewed="start"] {
430
- margin-left: calc(var(--_bic-button-skew-dist) * -1);
431
- }
248
+ &[data-skewed="start"] {
249
+ margin-left: calc(var(--_bic-button-skew-dist) * -1);
432
250
 
433
- .bi-button[data-skewed][data-skewed="start"]:has(.bi-button--start-icon) {
434
- --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
435
- }
251
+ &:has(.bi-button--start-icon) {
252
+ --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
253
+ }
254
+ }
436
255
 
437
- .bi-button[data-skewed][data-skewed="end"] {
438
- margin-right: calc(var(--_bic-button-skew-dist) * -1);
439
- }
256
+ &[data-skewed="end"] {
257
+ margin-right: calc(var(--_bic-button-skew-dist) * -1);
440
258
 
441
- .bi-button[data-skewed][data-skewed="end"]:has(.bi-button--end-icon) {
442
- --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
443
- }
259
+ &:has(.bi-button--end-icon) {
260
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
261
+ }
262
+ }
263
+ }
444
264
 
445
- .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
446
- --bic-button-color: var(--bi-basic-white);
447
- --bic-button-background: var(--bi-primary-50);
448
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
449
- var(--bic-button-background);
450
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
451
- var(--bic-button-background);
452
- --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
265
+ &:not([data-variant]), &[data-variant="filled"] {
266
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
453
267
  0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
454
- }
455
-
456
- .bi-button[data-variant="outlined"] {
457
- --bic-button-color: var(--bi-primary-50);
458
- --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
459
- --bic-button-background-hover: var(--bi-states-hover-dark);
460
- --bic-button-background-press: var(--bi-states-press-dark);
461
- }
268
+ }
462
269
 
463
- .bi-button[data-variant="outlined"][data-dark="true"] {
464
- --bic-button-color: var(--bi-basic-white);
465
- --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-basic-white) inset;
466
- --bic-button-background-hover: var(--bi-states-hover-light);
467
- --bic-button-background-press: var(--bi-states-press-light);
468
- }
270
+ &[data-variant="outlined"] {
271
+ --bic-button-color: var(--bi-color-primary-contrast);
272
+ --bic-button-background: transparent;
273
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bic-button-color) inset;
274
+ --bic-button-background-hover: var(--bi-states-hover);
275
+ --bic-button-background-press: var(--bi-states-press);
469
276
 
470
- .bi-button[data-variant="text"] {
471
- --bic-button-color: var(--bi-neutral-90);
472
- --bic-button-background-hover: var(--bi-states-hover-dark);
473
- --bic-button-background-press: var(--bi-states-press-dark);
474
- }
277
+ &[data-color] {
278
+ --bic-button-color: var(--bi-color-contrast);
279
+ }
280
+ }
475
281
 
476
- .bi-button[data-variant="text"][data-dark="true"] {
477
- --bic-button-color: var(--bi-basic-white);
478
- --bic-button-background-hover: var(--bi-states-hover-light);
479
- --bic-button-background-press: var(--bi-states-press-light);
480
- }
282
+ &[data-variant="text"] {
283
+ --bic-button-color: var(--bi-color-text);
284
+ --bic-button-background: transparent;
285
+ --bic-button-background-hover: var(--bi-states-hover);
286
+ --bic-button-background-press: var(--bi-states-press);
287
+ }
481
288
 
482
- .bi-button[data-variant="flat"] {
483
- --bic-button-color: var(--bi-primary-90);
484
- --bic-button-background: var(--bi-primary-5);
485
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
486
- var(--bic-button-background);
487
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
488
- var(--bic-button-background);
489
- }
289
+ &[data-variant="flat"] {
290
+ --bic-button-color: var(--bi-color-primary-text);
291
+ --bic-button-background: var(--bi-color-primary-surface-strong);
490
292
 
491
- .bi-button[data-variant="flat"][data-dark="true"] {
492
- --bic-button-color: var(--bi-basic-white);
493
- --bic-button-background: #ffffff1a;
494
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
495
- var(--bic-button-background);
496
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
497
- var(--bic-button-background);
498
- }
293
+ &[data-color] {
294
+ --bic-button-color: var(--bi-color-text);
295
+ --bic-button-background: var(--bi-color-surface-strong);
296
+ }
297
+ }
499
298
 
500
- @media (hover: hover) and (pointer: fine) {
501
- .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
502
- background: var(--bic-button-background-hover);
299
+ @media (hover: hover) and (pointer: fine) {
300
+ &:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
301
+ background: var(--bic-button-background-hover);
302
+ }
503
303
  }
504
- }
505
304
 
506
- .bi-button[aria-busy="true"] {
507
- cursor: progress;
508
- }
305
+ &[aria-busy="true"] {
306
+ cursor: progress;
307
+ }
509
308
 
510
- .bi-button:is(:disabled, [aria-disabled="true"]) {
511
- cursor: not-allowed;
512
- }
309
+ &:is(:disabled, [aria-disabled="true"]) {
310
+ cursor: not-allowed;
513
311
 
514
- .bi-button:is(:disabled, [aria-disabled="true"])[aria-busy="true"] {
515
- cursor: progress;
516
- }
312
+ &[aria-busy="true"] {
313
+ cursor: progress;
314
+ }
315
+ }
517
316
 
518
- .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
519
- background: var(--bic-button-background-press);
520
- }
317
+ &:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
318
+ background: var(--bic-button-background-press);
319
+ }
521
320
 
522
- .bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
523
- display: inherit;
524
- font-size: var(--bic-button-icon-size);
321
+ & .bi-button--start-icon, & .bi-button--end-icon {
322
+ display: inherit;
323
+ font-size: var(--bic-button-icon-size);
324
+ }
525
325
  }
526
326
 
527
327
  .bi-card {
528
- --bic-card-background-color: var(--bi-basic-white);
529
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
530
- --bic-card-border-color: var(--bi-neutral-15);
531
- --bic-card-color: var(--bi-neutral-95);
532
- --bic-card-header-title-color: var(--bi-neutral-95);
533
- --bic-card-header-bold-color: var(--bi-primary-60);
534
- --bic-card-header-label-color: var(--bi-neutral-50);
535
- --bic-card-content-color: var(--bi-neutral-50);
328
+ --bic-card-background-color: var(--bi-color-surface-subtle);
329
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-color-stroke);
330
+ --bic-card-color: var(--bi-color-text-secondary);
331
+ --bic-card-header-title-color: var(--bi-color-text);
332
+ --bic-card-header-bold-color: var(--bi-color-text-accent);
333
+ --bic-card-header-label-color: var(--bi-color-text-secondary);
334
+ --bic-card-content-color: var(--bi-color-text-secondary);
536
335
  --bic-card-content-padding: var(--bi-scale-4x);
537
336
  --bic-card-border-radius: var(--bi-radius-medium);
538
337
  --bic-card-content-lines: 2;
@@ -540,42 +339,11 @@
540
339
  --bic-card-media-date-width: 3.1875rem;
541
340
  --bic-card-media-date-height: 2.875rem;
542
341
  --bic-card-actions-flex-direction: column;
543
- --bic-card-actions-background-color: var(--bi-neutral-10);
544
- --bic-card-actions-icon-color: var(--bi-primary-50);
545
- --bic-card-border-hover-color: var(--bi-neutral-50);
342
+ --bic-card-actions-background-color: var(--bi-color-surface-strong);
343
+ --bic-card-actions-icon-color: var(--bi-color-contrast);
344
+ --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
546
345
  --bic-card-box-shadow-hover-color: #0000000d;
547
- --bic-card-box-shadow-focus-color: var(--bi-primary-50);
548
- --bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
549
- --bic-card-box-shadow-focus-outer-border: 6px;
550
- --bic-card-box-shadow-focus-inner-border: 4px;
551
- --bic-card-border-active-color: var(--bi-primary-50);
552
346
  --bic-card-box-shadow-active-color: #0000000d;
553
- --bic-card-box-shadow-active-outer-border: 20px;
554
- --bic-card-box-shadow-active-inner-border: 10px;
555
- }
556
-
557
- .bi-card[data-dark="true"] {
558
- --bic-card-background-color: var(--bi-neutral-90);
559
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
560
- --bic-card-border-color: var(--bi-neutral-70);
561
- --bic-card-color: var(--bi-neutral-5);
562
- --bic-card-header-title-color: var(--bi-neutral-5);
563
- --bic-card-header-bold-color: var(--bi-primary-20);
564
- --bic-card-header-label-color: var(--bi-neutral-30);
565
- --bic-card-content-color: var(--bi-neutral-30);
566
- --bic-card-actions-background-color: var(--bi-neutral-75);
567
- --bic-card-actions-icon-color: var(--bi-neutral-10);
568
- --bic-card-border-hover-color: var(--bi-neutral-25);
569
- --bic-card-box-shadow-hover-color: #b2cdf40d;
570
- --bic-card-box-shadow-focus-color: var(--bi-primary-30);
571
- --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
572
- --bic-card-box-shadow-focus-outer-border: 4.5px;
573
- --bic-card-box-shadow-focus-inner-border: 4px;
574
- --bic-card-border-active-color: var(--bi-primary-50);
575
- --bic-card-box-shadow-active-color: #b2cdf40d;
576
- }
577
-
578
- .bi-card {
579
347
  width: 100%;
580
348
  box-shadow: var(--bic-card-box-shadow);
581
349
  border-radius: var(--bic-card-border-radius);
@@ -583,331 +351,280 @@
583
351
  color: var(--bic-card-color);
584
352
  flex-direction: row;
585
353
  display: flex;
586
- }
587
354
 
588
- .bi-card[data-orientation="horizontal"] > div:first-child {
589
- border-top-left-radius: var(--bic-card-border-radius);
590
- border-bottom-left-radius: var(--bic-card-border-radius);
591
- }
355
+ &[data-orientation="horizontal"] {
356
+ & > div:first-child {
357
+ border-top-left-radius: var(--bic-card-border-radius);
358
+ border-bottom-left-radius: var(--bic-card-border-radius);
359
+ }
592
360
 
593
- .bi-card[data-orientation="horizontal"] > div:last-child {
594
- border-top-right-radius: var(--bic-card-border-radius);
595
- border-bottom-right-radius: var(--bic-card-border-radius);
596
- }
361
+ & > div:last-child {
362
+ border-top-right-radius: var(--bic-card-border-radius);
363
+ border-bottom-right-radius: var(--bic-card-border-radius);
364
+ }
597
365
 
598
- .bi-card[data-orientation="horizontal"] {
599
- --bic-card-media-width: 15.75rem;
600
- }
366
+ --bic-card-media-width: 15.75rem;
601
367
 
602
- @media (width < 1024px) {
603
- .bi-card[data-orientation="horizontal"] {
604
- --bic-card-media-width: 14.5rem;
605
- }
606
- }
368
+ @media (width < 1024px) {
369
+ --bic-card-media-width: 14.5rem;
370
+ }
607
371
 
608
- @media (width < 600px) {
609
- .bi-card[data-orientation="horizontal"] {
610
- --bic-card-media-width: 8.4375rem;
372
+ @media (width < 600px) {
373
+ --bic-card-media-width: 8.4375rem;
374
+ }
611
375
  }
612
- }
613
-
614
- .bi-card[data-orientation="vertical"] {
615
- --bic-card-actions-flex-direction: row;
616
- --bic-card-content-lines: 4;
617
- --bic-card-media-date-width: 4rem;
618
- --bic-card-media-date-height: 3.5625rem;
619
- flex-direction: column;
620
- }
621
376
 
622
- .bi-card[data-orientation="vertical"] > div:first-child {
623
- border-top-left-radius: var(--bic-card-border-radius);
624
- border-top-right-radius: var(--bic-card-border-radius);
625
- }
377
+ &[data-orientation="vertical"] {
378
+ --bic-card-actions-flex-direction: row;
379
+ --bic-card-content-lines: 4;
380
+ --bic-card-media-date-width: 4rem;
381
+ --bic-card-media-date-height: 3.5625rem;
382
+ flex-direction: column;
626
383
 
627
- .bi-card[data-orientation="vertical"] > div:last-child {
628
- border-bottom-left-radius: var(--bic-card-border-radius);
629
- border-bottom-right-radius: var(--bic-card-border-radius);
630
- }
384
+ & > div:first-child {
385
+ border-top-left-radius: var(--bic-card-border-radius);
386
+ border-top-right-radius: var(--bic-card-border-radius);
387
+ }
631
388
 
632
- .bi-card[data-orientation="vertical"] .bi-card--actions {
633
- width: 100%;
634
- }
389
+ & > div:last-child {
390
+ border-bottom-left-radius: var(--bic-card-border-radius);
391
+ border-bottom-right-radius: var(--bic-card-border-radius);
392
+ }
635
393
 
636
- .bi-card[data-color="info"] {
637
- --bic-card-background-color: var(--bi-info-5);
638
- --bic-card-color: var(--bi-info-90);
639
- --bic-card-border-color: var(--bi-info-15);
640
- --bic-card-header-title-color: var(--bi-info-90);
641
- --bic-card-header-bold-color: var(--bi-info-90);
642
- --bic-card-header-label-color: var(--bi-info-90);
643
- }
394
+ & .bi-card--actions {
395
+ width: 100%;
396
+ }
397
+ }
644
398
 
645
- .bi-card[data-color="warning"] {
646
- --bic-card-background-color: var(--bi-warning-10);
647
- --bic-card-color: var(--bi-warning-90);
648
- --bic-card-border-color: var(--bi-warning-15);
649
- --bic-card-header-title-color: var(--bi-warning-90);
650
- --bic-card-header-bold-color: var(--bi-warning-90);
651
- --bic-card-header-label-color: var(--bi-warning-90);
652
- }
399
+ &[data-error="true"] {
400
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-color-alert-fill);
401
+ }
653
402
 
654
- .bi-card[data-color="primary"][data-dark="true"] {
655
- --bic-card-background-color: var(--bi-primary-90);
656
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
657
- --bic-card-border-color: var(--bi-primary-75);
658
- --bic-card-color: var(--bi-neutral-5);
659
- --bic-card-header-title-color: var(--bi-neutral-5);
660
- --bic-card-header-bold-color: var(--bi-primary-20);
661
- --bic-card-header-label-color: var(--bi-neutral-30);
662
- --bic-card-content-color: var(--bi-neutral-30);
663
- --bic-card-actions-background-color: var(--bi-primary-85);
664
- --bic-card-actions-icon-color: var(--bi-primary-10);
665
- --bic-card-border-hover-color: var(--bi-primary-40);
666
- --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
667
- --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
668
- --bic-card-border-active-color: var(--bi-primary-10);
669
- }
403
+ & .bi-card--content {
404
+ padding: var(--bic-card-content-padding);
405
+ gap: var(--bi-scale-4x);
406
+ border-radius: inherit;
407
+ background: none;
408
+ border: none;
409
+ flex-direction: column;
410
+ flex: auto;
411
+ display: flex;
412
+ overflow: hidden;
413
+
414
+ & > p {
415
+ color: var(--bic-card-content-color);
416
+ font: var(--bi-font-body-medium);
417
+ white-space: break-spaces;
418
+ text-overflow: ellipsis;
419
+ -webkit-line-clamp: var(--bic-card-content-lines);
420
+ line-clamp: var(--bic-card-content-lines);
421
+ -webkit-box-orient: vertical;
422
+ margin: 0;
423
+ display: -webkit-box;
424
+ overflow: hidden;
425
+ }
670
426
 
671
- .bi-card[data-error="true"] {
672
- box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
673
- --bic-card-border-color: transparent;
674
- }
427
+ @media (width < 600px) {
428
+ --bic-card-content-padding: var(--bi-scale-3x);
429
+ gap: var(--bi-scale-3x);
430
+ }
431
+ }
675
432
 
676
- .bi-card .bi-card--content {
677
- padding: var(--bic-card-content-padding);
678
- gap: var(--bi-scale-4x);
679
- border-radius: inherit;
680
- background: none;
681
- border: none;
682
- flex-direction: column;
683
- flex: auto;
684
- display: flex;
685
- overflow: hidden;
686
- }
433
+ &, & .bi-card--content {
434
+ &:is(a, button) {
435
+ cursor: pointer;
436
+ text-decoration: none;
437
+ transition: box-shadow .25s ease-in-out;
438
+ position: relative;
439
+
440
+ &:not(.disabled) {
441
+ &:focus-visible {
442
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
443
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
444
+ outline-offset: var(--_bi--focus, 2px);
445
+
446
+ & * {
447
+ --_bi--focus: ;
448
+ }
449
+ }
450
+
451
+ @media (hover: hover) and (pointer: fine) {
452
+ &:hover {
453
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
454
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
455
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
456
+ }
457
+ }
687
458
 
688
- .bi-card .bi-card--content > p {
689
- color: var(--bic-card-content-color);
690
- font: var(--bi-font-body-medium);
691
- white-space: break-spaces;
692
- text-overflow: ellipsis;
693
- -webkit-line-clamp: var(--bic-card-content-lines);
694
- line-clamp: var(--bic-card-content-lines);
695
- -webkit-box-orient: vertical;
696
- margin: 0;
697
- display: -webkit-box;
698
- overflow: hidden;
699
- }
459
+ &:active {
460
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
461
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
462
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
463
+ }
464
+ }
700
465
 
701
- @media (width < 600px) {
702
- .bi-card .bi-card--content {
703
- --bic-card-content-padding: var(--bi-scale-3x);
704
- gap: var(--bi-scale-3x);
466
+ &:disabled {
467
+ cursor: not-allowed;
468
+ }
469
+ }
705
470
  }
706
- }
707
471
 
708
- :is(.bi-card, .bi-card .bi-card--content):is(a, button) {
709
- cursor: pointer;
710
- text-decoration: none;
711
- transition: box-shadow .25s ease-in-out;
712
- position: relative;
713
- }
472
+ & .bi-card--actions {
473
+ flex-direction: var(--bic-card-actions-flex-direction, column);
474
+ justify-content: center;
475
+ gap: var(--bi-scale-1x);
476
+ width: var(--bi-scale-14x);
477
+ background-color: var(--bic-card-actions-background-color);
478
+ display: flex;
714
479
 
715
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
716
- box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
717
- 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
718
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
719
- outline-offset: var(--_bi--focus, 2px);
720
- }
480
+ @media (width < 600px) {
481
+ width: var(--bi-scale-11x);
482
+ }
721
483
 
722
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
723
- --_bi--focus: ;
724
- }
484
+ & .bi-card--action {
485
+ --bic-button-font-size: var(--bi-icon-medium);
486
+ --bic-button-color: var(--bic-card-actions-icon-color);
487
+ --bic-button-size: var(--bi-scale-14x);
488
+ flex: 1;
725
489
 
726
- @media (hover: hover) and (pointer: fine) {
727
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
728
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
729
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
730
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
490
+ @media (width < 600px) {
491
+ --bic-button-size: var(--bi-scale-11x);
492
+ }
493
+
494
+ &[data-color] {
495
+ --bic-card-actions-icon-color: var(--bi-color-contrast);
496
+ }
497
+ }
731
498
  }
732
- }
733
499
 
734
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
735
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
736
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
737
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
738
- }
500
+ & .bi-card--header {
501
+ font: var(--bi-font-body-medium);
502
+ gap: var(--bi-scale-0-50x);
503
+ word-wrap: break-word;
504
+ word-break: break-word;
505
+ flex-direction: column;
506
+ width: 100%;
507
+ display: flex;
508
+
509
+ & .bi-card--header-label {
510
+ color: var(--bic-card-header-label-color);
511
+ margin: 0;
512
+
513
+ @media (width < 600px) {
514
+ font: var(--bi-font-body-small);
515
+ }
516
+
517
+ & .bi-card--header-bold {
518
+ color: var(--bic-card-header-bold-color);
519
+ font-weight: var(--bi-font-weight-bold);
520
+ }
521
+
522
+ & .bi-card--header-dot {
523
+ width: var(--bi-scale-0-50x);
524
+ height: var(--bi-scale-0-50x);
525
+ margin: auto var(--bi-scale-1x);
526
+ vertical-align: middle;
527
+ background-color: currentColor;
528
+ border-radius: 50%;
529
+ display: inline-block;
530
+ }
531
+ }
739
532
 
740
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
741
- cursor: not-allowed;
742
- }
533
+ & .bi-card--header-title {
534
+ font: var(--bi-font-title-bold-small);
535
+ color: var(--bic-card-header-title-color);
536
+ text-overflow: ellipsis;
537
+ -webkit-line-clamp: 2;
538
+ line-clamp: 2;
539
+ -webkit-box-orient: vertical;
540
+ margin: 0;
541
+ display: -webkit-box;
542
+ overflow: hidden;
543
+
544
+ @media (width < 600px) {
545
+ font: var(--bi-font-title-bold-xs);
546
+ }
547
+ }
548
+ }
743
549
 
744
- .bi-card .bi-card--actions {
745
- flex-direction: var(--bic-card-actions-flex-direction, column);
746
- justify-content: center;
747
- gap: var(--bi-scale-1x);
748
- width: var(--bi-scale-14x);
749
- background-color: var(--bic-card-actions-background-color);
750
- display: flex;
751
- }
550
+ & .bi-card--media {
551
+ width: var(--bic-card-media-width);
552
+ min-width: var(--bic-card-media-width);
553
+ display: block;
554
+ position: relative;
555
+
556
+ & > :is(audio, figure, iframe, img, video) {
557
+ border-radius: inherit;
558
+ object-fit: cover;
559
+ aspect-ratio: 4 / 3;
560
+ width: 100%;
561
+ display: block;
562
+
563
+ @media (width < 600px) {
564
+ aspect-ratio: 3 / 2;
565
+ }
566
+ }
752
567
 
753
- @media (width < 600px) {
754
- .bi-card .bi-card--actions {
755
- width: var(--bi-scale-11x);
568
+ & .bi-card--media-overlay {
569
+ top: var(--bi-scale-4x);
570
+ left: var(--bi-scale-4x);
571
+ right: var(--bi-scale-4x);
572
+ flex-wrap: wrap;
573
+ width: fit-content;
574
+ display: flex;
575
+ position: absolute;
576
+ }
756
577
  }
757
- }
758
578
 
759
- .bi-card .bi-card--actions .bi-card--action {
760
- --bic-button-font-size: var(--bi-icon-medium);
761
- --bic-button-color: var(--bic-card-actions-icon-color);
762
- --bic-button-size: var(--bi-scale-14x);
763
- flex: 1;
764
- }
765
-
766
- @media (width < 600px) {
767
- .bi-card .bi-card--actions .bi-card--action {
768
- --bic-button-size: var(--bi-scale-11x);
579
+ & .bi-card--date {
580
+ width: var(--bic-card-media-date-width);
581
+ height: var(--bic-card-media-date-height);
582
+ padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
583
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
584
+ background: var(--bic-card-background-color);
585
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
586
+ 0px 4px 6px 0px #26333f0d;
587
+ color: var(--bic-card-header-title-color);
588
+ text-align: center;
589
+ font: var(--bi-font-title-bold-medium);
590
+ flex-direction: column;
591
+ justify-content: center;
592
+ align-items: center;
593
+ margin: 0;
594
+ display: flex;
595
+
596
+ & span {
597
+ color: var(--bic-card-header-bold-color);
598
+ font-size: .8125rem;
599
+ line-height: 1.15;
600
+ }
769
601
  }
770
602
  }
771
603
 
772
- .bi-card .bi-card--header {
773
- font: var(--bi-font-body-medium);
774
- gap: var(--bi-scale-0-50x);
775
- word-wrap: break-word;
776
- word-break: break-word;
777
- flex-direction: column;
778
- width: 100%;
604
+ .bi-checkbox-subsection {
605
+ --bic-checkbox-subsection-line-bg: var(--bi-color-neutral-stroke-strong);
779
606
  display: flex;
780
- }
781
607
 
782
- .bi-card .bi-card--header .bi-card--header-label {
783
- color: var(--bic-card-header-label-color);
784
- margin: 0;
785
- }
608
+ & > div:first-child {
609
+ margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
610
+ background-color: var(--bic-checkbox-subsection-line-bg);
611
+ width: var(--bi-stroke-medium);
612
+ }
786
613
 
787
- @media (width < 600px) {
788
- .bi-card .bi-card--header .bi-card--header-label {
789
- font: var(--bi-font-body-small);
614
+ & > div:last-child {
615
+ align-items: flex-start;
616
+ gap: var(--bi-scale-0-50x);
617
+ flex-direction: column;
618
+ flex: 1;
619
+ display: flex;
790
620
  }
791
621
  }
792
622
 
793
- .bi-card .bi-card--header .bi-card--header-label .bi-card--header-bold {
794
- color: var(--bic-card-header-bold-color);
795
- font-weight: var(--bi-font-weight-bold);
796
- }
797
-
798
- .bi-card .bi-card--header .bi-card--header-label .bi-card--header-dot {
799
- width: var(--bi-scale-0-50x);
800
- height: var(--bi-scale-0-50x);
801
- margin: auto var(--bi-scale-1x);
802
- vertical-align: middle;
803
- background-color: currentColor;
804
- border-radius: 50%;
805
- display: inline-block;
806
- }
807
-
808
- .bi-card .bi-card--header .bi-card--header-title {
809
- font: var(--bi-font-title-bold-small);
810
- color: var(--bic-card-header-title-color);
811
- text-overflow: ellipsis;
812
- -webkit-line-clamp: 2;
813
- line-clamp: 2;
814
- -webkit-box-orient: vertical;
815
- margin: 0;
816
- display: -webkit-box;
817
- overflow: hidden;
818
- }
819
-
820
- @media (width < 600px) {
821
- .bi-card .bi-card--header .bi-card--header-title {
822
- font: var(--bi-font-title-bold-xs);
823
- }
824
- }
825
-
826
- .bi-card .bi-card--media {
827
- width: var(--bic-card-media-width);
828
- min-width: var(--bic-card-media-width);
829
- display: block;
830
- position: relative;
831
- }
832
-
833
- .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
834
- border-radius: inherit;
835
- object-fit: cover;
836
- aspect-ratio: 4 / 3;
837
- width: 100%;
838
- display: block;
839
- }
840
-
841
- @media (width < 600px) {
842
- .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
843
- aspect-ratio: 3 / 2;
844
- }
845
- }
846
-
847
- .bi-card .bi-card--media .bi-card--media-overlay {
848
- top: var(--bi-scale-4x);
849
- left: var(--bi-scale-4x);
850
- right: var(--bi-scale-4x);
851
- flex-wrap: wrap;
852
- width: fit-content;
853
- display: flex;
854
- position: absolute;
855
- }
856
-
857
- .bi-card .bi-card--date {
858
- width: var(--bic-card-media-date-width);
859
- height: var(--bic-card-media-date-height);
860
- padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
861
- border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
862
- background: var(--bic-card-background-color);
863
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
864
- 0px 4px 6px 0px #26333f0d;
865
- color: var(--bic-card-header-title-color);
866
- text-align: center;
867
- font: var(--bi-font-title-bold-medium);
868
- flex-direction: column;
869
- justify-content: center;
870
- align-items: center;
871
- margin: 0;
872
- display: flex;
873
- }
874
-
875
- .bi-card .bi-card--date span {
876
- color: var(--bic-card-header-bold-color);
877
- font-size: .8125rem;
878
- line-height: 1.15;
879
- }
880
-
881
- .bi-checkbox-subsection {
882
- --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
883
- display: flex;
884
- }
885
-
886
- .bi-checkbox-subsection[data-dark="true"] {
887
- --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
888
- }
889
-
890
- .bi-checkbox-subsection > div:first-child {
891
- margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
892
- background-color: var(--bic-checkbox-subsection-line-bg);
893
- width: var(--bi-stroke-medium);
894
- }
895
-
896
- .bi-checkbox-subsection > div:last-child {
897
- align-items: flex-start;
898
- gap: var(--bi-scale-0-50x);
899
- flex-direction: column;
900
- flex: 1;
901
- display: flex;
902
- }
903
-
904
623
  .bi-chip {
905
- --bic-chip-background: var(--bi-primary-5);
906
- --bic-chip-focus-inner: var(--bi-basic-white);
907
- --bic-chip-focus-outer: var(--bi-primary-50);
908
- --bic-chip-background-hover: var(--bi-states-hover-dark);
909
- --bic-chip-background-press: var(--bi-states-press-dark);
910
- --bic-chip-text-color: var(--bi-neutral-90);
624
+ --bic-chip-background: var(--bi-color-surface);
625
+ --bic-chip-background-selected: var(--bi-color-fill);
626
+ --bic-chip-text-color: var(--bi-color-text-subtle);
627
+ --bic-chip-text-color-selected: var(--bi-color-on-fill);
911
628
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
912
629
  --bic-chip-icon-size: var(--bi-scale-6x);
913
630
  --bic-chip-font: var(--bi-font-body-medium);
@@ -922,219 +639,59 @@
922
639
  align-items: center;
923
640
  display: inline-flex;
924
641
  overflow: hidden;
925
- }
926
-
927
- .bi-chip[data-size="small"] {
928
- --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
929
- --bic-chip-font: var(--bi-font-body-small);
930
- --bic-chip-icon-size: var(--bi-scale-5x);
931
- }
932
-
933
- .bi-chip[data-size="large"] {
934
- --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
935
- --bic-chip-font: var(--bi-font-body-large);
936
- }
937
-
938
- .bi-chip[data-dark="true"] {
939
- --bic-chip-focus-inner: var(--bi-neutral-95);
940
- --bic-chip-focus-outer: var(--bi-primary-30);
941
- --bic-chip-background-hover: var(--bi-states-hover-light);
942
- --bic-chip-background-press: var(--bi-states-press-light);
943
- }
944
-
945
- .bi-chip[data-selected="true"] {
946
- --bic-chip-background-hover: var(--bi-states-hover-light);
947
- --bic-chip-background-press: var(--bi-states-press-light);
948
- }
949
-
950
- .bi-chip[data-color="white"] {
951
- --bic-chip-background: var(--bi-basic-white);
952
- }
953
-
954
- .bi-chip[data-color="white"][data-selected="true"] {
955
- --bic-chip-background: var(--bi-neutral-60);
956
- --bic-chip-text-color: var(--bi-basic-white);
957
- }
958
-
959
- .bi-chip[data-color="white"][data-dark="true"] {
960
- --bic-chip-background: var(--bi-neutral-100);
961
- --bic-chip-text-color: var(--bi-basic-white);
962
- }
963
-
964
- .bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
965
- --bic-chip-background: var(--bi-neutral-50);
966
- --bic-chip-text-color: var(--bi-basic-white);
967
- }
968
-
969
- .bi-chip[data-color="neutral"] {
970
- --bic-chip-background: var(--bi-neutral-5);
971
- }
972
-
973
- .bi-chip[data-color="neutral"][data-selected="true"] {
974
- --bic-chip-background: var(--bi-neutral-60);
975
- --bic-chip-text-color: var(--bi-basic-white);
976
- }
977
-
978
- .bi-chip[data-color="neutral"][data-dark="true"] {
979
- --bic-chip-background: var(--bi-neutral-95);
980
- --bic-chip-text-color: var(--bi-basic-white);
981
- }
982
-
983
- .bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
984
- --bic-chip-background: var(--bi-neutral-50);
985
- --bic-chip-text-color: var(--bi-basic-white);
986
- }
987
-
988
- .bi-chip[data-color="primary"] {
989
- --bic-chip-background: var(--bi-primary-5);
990
- }
991
-
992
- .bi-chip[data-color="primary"][data-selected="true"] {
993
- --bic-chip-background: var(--bi-primary-50);
994
- --bic-chip-text-color: var(--bi-basic-white);
995
- }
996
-
997
- .bi-chip[data-color="primary"][data-dark="true"] {
998
- --bic-chip-background: var(--bi-primary-85);
999
- --bic-chip-text-color: var(--bi-primary-10);
1000
- }
1001
-
1002
- .bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
1003
- --bic-chip-background: var(--bi-primary-50);
1004
- --bic-chip-text-color: var(--bi-basic-white);
1005
- }
1006
-
1007
- .bi-chip[data-color="info"] {
1008
- --bic-chip-background: var(--bi-info-5);
1009
- }
1010
-
1011
- .bi-chip[data-color="info"][data-selected="true"] {
1012
- --bic-chip-background: var(--bi-info-50);
1013
- --bic-chip-text-color: var(--bi-basic-white);
1014
- }
1015
-
1016
- .bi-chip[data-color="info"][data-dark="true"] {
1017
- --bic-chip-background: var(--bi-info-95);
1018
- --bic-chip-text-color: var(--bi-info-15);
1019
- }
1020
-
1021
- .bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
1022
- --bic-chip-background: var(--bi-info-50);
1023
- --bic-chip-text-color: var(--bi-basic-white);
1024
- }
1025
-
1026
- .bi-chip[data-color="alert"] {
1027
- --bic-chip-background: var(--bi-alert-10);
1028
- }
1029
-
1030
- .bi-chip[data-color="alert"][data-selected="true"] {
1031
- --bic-chip-background: var(--bi-alert-60);
1032
- --bic-chip-text-color: var(--bi-basic-white);
1033
- }
1034
-
1035
- .bi-chip[data-color="alert"][data-dark="true"] {
1036
- --bic-chip-background: var(--bi-alert-95);
1037
- --bic-chip-text-color: var(--bi-alert-15);
1038
- }
1039
-
1040
- .bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
1041
- --bic-chip-background: var(--bi-alert-60);
1042
- --bic-chip-text-color: var(--bi-basic-white);
1043
- }
1044
-
1045
- .bi-chip[data-color="warning"] {
1046
- --bic-chip-background: var(--bi-warning-10);
1047
- }
1048
-
1049
- .bi-chip[data-color="warning"][data-selected="true"] {
1050
- --bic-chip-background: var(--bi-warning-75);
1051
- --bic-chip-text-color: var(--bi-basic-white);
1052
- }
1053
-
1054
- .bi-chip[data-color="warning"][data-dark="true"] {
1055
- --bic-chip-background: var(--bi-warning-90);
1056
- --bic-chip-text-color: var(--bi-warning-15);
1057
- }
1058
-
1059
- .bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
1060
- --bic-chip-background: var(--bi-warning-70);
1061
- --bic-chip-text-color: var(--bi-basic-white);
1062
- }
1063
642
 
1064
- .bi-chip[data-color="success"] {
1065
- --bic-chip-background: var(--bi-success-5);
1066
- }
643
+ &[data-size="small"] {
644
+ --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
645
+ --bic-chip-font: var(--bi-font-body-small);
646
+ --bic-chip-icon-size: var(--bi-scale-5x);
647
+ }
1067
648
 
1068
- .bi-chip[data-color="success"][data-selected="true"] {
1069
- --bic-chip-background: var(--bi-success-70);
1070
- --bic-chip-text-color: var(--bi-basic-white);
1071
- }
649
+ &[data-size="large"] {
650
+ --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
651
+ --bic-chip-font: var(--bi-font-body-large);
652
+ }
1072
653
 
1073
- .bi-chip[data-color="success"][data-dark="true"] {
1074
- --bic-chip-background: var(--bi-success-90);
1075
- --bic-chip-text-color: var(--bi-success-10);
1076
- }
654
+ &[data-selected="true"] {
655
+ --bic-chip-background: var(--bic-chip-background-selected);
656
+ color: var(--bic-chip-text-color-selected);
657
+ }
1077
658
 
1078
- .bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
1079
- --bic-chip-background: var(--bi-success-70);
1080
- --bic-chip-text-color: var(--bi-basic-white);
1081
- }
659
+ &:is(button), &:is(a) {
660
+ cursor: pointer;
661
+ border: none;
662
+ text-decoration: none;
1082
663
 
1083
- .bi-chip:is(button), .bi-chip:is(a) {
1084
- cursor: pointer;
1085
- border: none;
1086
- text-decoration: none;
1087
- }
664
+ &:focus-visible {
665
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
666
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
667
+ outline-offset: var(--_bi--focus, 2px);
668
+ }
1088
669
 
1089
- :is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
1090
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1091
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1092
- outline-offset: var(--_bi--focus, 2px);
1093
- }
670
+ @media (hover: hover) and (pointer: fine) {
671
+ &:hover {
672
+ background: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-chip-background);
673
+ }
674
+ }
1094
675
 
1095
- @media (hover: hover) and (pointer: fine) {
1096
- :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
1097
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
1098
- var(--bic-chip-background);
676
+ &:active {
677
+ background: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-chip-background);
678
+ }
1099
679
  }
1100
- }
1101
-
1102
- :is(.bi-chip:is(button), .bi-chip:is(a)):active {
1103
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
1104
- var(--bic-chip-background);
1105
- }
1106
680
 
1107
- .bi-chip > svg {
1108
- display: inherit;
1109
- font-size: var(--bic-chip-icon-size);
681
+ & > svg {
682
+ display: inherit;
683
+ font-size: var(--bic-chip-icon-size);
684
+ }
1110
685
  }
1111
686
 
1112
687
  details.bi-details {
1113
- --bic-details-background: var(--bi-basic-white);
1114
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
1115
- var(--bic-details-background);
1116
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
1117
- var(--bic-details-background);
1118
- --bic-details-color: var(--bi-neutral-90);
1119
- --bic-details-border-color: var(--bi-neutral-15);
688
+ --bic-details-background: transparent;
689
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-details-background);
690
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-details-background);
691
+ --bic-details-color: var(--bi-color-text-secondary);
692
+ --bic-details-summary-color: var(--bi-color-text);
693
+ --bic-details-border-color: var(--bi-color-stroke);
1120
694
  --bic-details-padding: var(--bi-scale-4x);
1121
- --bic-details-focus-shadow-color: var(--bi-basic-white);
1122
- --bic-details-focus-outline-color: var(--bi-primary-50);
1123
- }
1124
-
1125
- details.bi-details[data-dark="true"] {
1126
- --bic-details-background: var(--bi-neutral-90);
1127
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
1128
- var(--bic-details-background);
1129
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
1130
- var(--bic-details-background);
1131
- --bic-details-border-color: var(--bi-neutral-70);
1132
- --bic-details-color: var(--bi-basic-white);
1133
- --bic-details-focus-shadow-color: var(--bi-neutral-95);
1134
- --bic-details-focus-outline-color: var(--bi-primary-30);
1135
- }
1136
-
1137
- details.bi-details {
1138
695
  font: var(--bi-font-body-large);
1139
696
  background-color: var(--bic-details-background);
1140
697
  color: var(--bic-details-color);
@@ -1143,113 +700,112 @@ details.bi-details {
1143
700
  border-style: solid;
1144
701
  border-top-width: var(--bi-stroke-thin);
1145
702
  border-bottom-width: var(--bi-stroke-thin);
1146
- }
1147
-
1148
- details.bi-details + :is(details.bi-details) {
1149
- border-top: 0;
1150
- }
1151
-
1152
- details.bi-details summary {
1153
- padding: var(--bic-details-padding);
1154
- cursor: pointer;
1155
- justify-content: space-between;
1156
- align-items: center;
1157
- gap: var(--bi-scale-2x);
1158
- -webkit-user-select: none;
1159
- user-select: none;
1160
- font-weight: var(--bi-font-weight-bold);
1161
- flex-direction: row;
1162
- list-style: none;
1163
- display: flex;
1164
- position: relative;
1165
- }
1166
703
 
1167
- @media (hover: hover) and (pointer: fine) {
1168
- details.bi-details summary:hover {
1169
- background: var(--bic-details-background-hover);
704
+ & + & {
705
+ border-top: 0;
1170
706
  }
1171
- }
1172
707
 
1173
- details.bi-details summary:active {
1174
- background: var(--bic-details-background-press);
1175
- }
708
+ & summary {
709
+ padding: var(--bic-details-padding);
710
+ color: var(--bic-details-summary-color);
711
+ cursor: pointer;
712
+ justify-content: space-between;
713
+ align-items: center;
714
+ gap: var(--bi-scale-2x);
715
+ -webkit-user-select: none;
716
+ user-select: none;
717
+ font-weight: var(--bi-font-weight-bold);
718
+ flex-direction: row;
719
+ list-style: none;
720
+ display: flex;
721
+ position: relative;
722
+
723
+ @media (hover: hover) and (pointer: fine) {
724
+ &:hover {
725
+ background: var(--bic-details-background-hover);
726
+ }
727
+ }
1176
728
 
1177
- details.bi-details summary:focus-visible {
1178
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
1179
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
1180
- outline-offset: var(--_bi--focus, -2px);
1181
- border-radius: var(--bi-radius-medium);
1182
- }
729
+ &:active {
730
+ background: var(--bic-details-background-press);
731
+ }
1183
732
 
1184
- details.bi-details summary:focus-visible * {
1185
- --_bi--focus: ;
1186
- }
733
+ &:focus-visible {
734
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
735
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-states-focus));
736
+ outline-offset: var(--_bi--focus, -2px);
737
+ border-radius: var(--bi-radius-medium);
1187
738
 
1188
- details.bi-details summary::marker {
1189
- display: none;
1190
- }
739
+ & * {
740
+ --_bi--focus: ;
741
+ }
742
+ }
1191
743
 
1192
- details.bi-details summary::-webkit-details-marker {
1193
- display: none;
1194
- }
744
+ &::marker {
745
+ display: none;
746
+ }
1195
747
 
1196
- details.bi-details summary > svg {
1197
- font-size: var(--bi-icon-medium);
1198
- width: var(--bi-scale-6x);
1199
- height: var(--bi-scale-6x);
1200
- flex-shrink: 0;
1201
- margin-left: auto;
1202
- }
748
+ &::-webkit-details-marker {
749
+ display: none;
750
+ }
1203
751
 
1204
- @media (prefers-reduced-motion: no-preference) {
1205
- details.bi-details summary > svg {
1206
- transition: transform .2s ease-in-out;
752
+ & > svg {
753
+ font-size: var(--bi-icon-medium);
754
+ width: var(--bi-scale-6x);
755
+ height: var(--bi-scale-6x);
756
+ flex-shrink: 0;
757
+ margin-left: auto;
758
+
759
+ @media (prefers-reduced-motion: no-preference) {
760
+ transition: transform .2s ease-in-out;
761
+ }
762
+ }
1207
763
  }
1208
- }
1209
764
 
1210
- details.bi-details[open] summary > svg {
1211
- transform: rotate(180deg);
1212
- }
765
+ &[open] summary > svg {
766
+ transform: rotate(180deg);
767
+ }
1213
768
 
1214
- @supports (interpolate-size: allow-keywords) and selector(::details-content) {
1215
- @media (prefers-reduced-motion: no-preference) {
1216
- details.bi-details {
769
+ @supports (interpolate-size: allow-keywords) and selector(::details-content) {
770
+ @media (prefers-reduced-motion: no-preference) {
1217
771
  interpolate-size: allow-keywords;
1218
772
  }
1219
- }
1220
773
 
1221
- details.bi-details::details-content {
1222
- transition: height .2s ease-in-out,
774
+ &::details-content {
775
+ transition: height .2s ease-in-out,
1223
776
  content-visibility .2s ease-in-out allow-discrete;
1224
- height: 0;
1225
- overflow: clip;
1226
- }
777
+ height: 0;
778
+ overflow: clip;
779
+ }
1227
780
 
1228
- details.bi-details[open]::details-content {
1229
- height: auto;
781
+ &[open]::details-content {
782
+ height: auto;
783
+ }
1230
784
  }
1231
- }
1232
785
 
1233
- details.bi-details > * {
1234
- padding: var(--bic-details-padding);
1235
- margin: 0;
1236
- overflow: clip;
1237
- }
786
+ & > * {
787
+ padding: var(--bic-details-padding);
788
+ margin: 0;
789
+ overflow: clip;
1238
790
 
1239
- details.bi-details > *:not(summary) + * {
1240
- padding-top: 0;
791
+ &:not(summary) + * {
792
+ padding-top: 0;
793
+ }
794
+ }
1241
795
  }
1242
796
 
1243
797
  .bi-card:has( > .bi-details) {
1244
798
  overflow: clip;
1245
- }
1246
799
 
1247
- .bi-card:has( > .bi-details) > .bi-details:first-child {
1248
- border-top: 0;
1249
- }
800
+ & > .bi-details {
801
+ &:first-child {
802
+ border-top: 0;
803
+ }
1250
804
 
1251
- .bi-card:has( > .bi-details) > .bi-details:last-child {
1252
- border-bottom: 0;
805
+ &:last-child {
806
+ border-bottom: 0;
807
+ }
808
+ }
1253
809
  }
1254
810
 
1255
811
  .bi-dialog {
@@ -1260,23 +816,14 @@ details.bi-details > *:not(summary) + * {
1260
816
  --bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
1261
817
  --bic-dialog-animation-duration: .2s;
1262
818
  --bic-dialog-backdrop-background: #00000080;
1263
- --bic-dialog-background: var(--bi-basic-white);
819
+ --bic-dialog-background: var(--bi-color-background);
1264
820
  --bic-dialog-border-radius: var(--bi-radius-large);
1265
- --bic-dialog-border-color: var(--bi-neutral-15);
821
+ --bic-dialog-border-color: var(--bi-color-stroke);
1266
822
  --bic-dialog-icon-spacing: .625rem;
1267
- --bic-dialog-color: var(--bi-neutral-90);
823
+ --bic-dialog-color: var(--bi-color-text);
1268
824
  --bic-dialog-max-height: 80vh;
1269
825
  --bic-dialog-max-width: 40rem;
1270
826
  --bic-dialog-padding: var(--bi-scale-4x);
1271
- }
1272
-
1273
- .bi-dialog[data-dark="true"] {
1274
- --bic-dialog-background: var(--bi-primary-95);
1275
- --bic-dialog-border-color: var(--bi-neutral-70);
1276
- --bic-dialog-color: var(--bi-basic-white);
1277
- }
1278
-
1279
- .bi-dialog {
1280
827
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
1281
828
  background: var(--bic-dialog-background);
1282
829
  border-radius: var(--bic-dialog-border-radius);
@@ -1292,116 +839,120 @@ details.bi-details > *:not(summary) + * {
1292
839
  position: fixed;
1293
840
  inset: 0;
1294
841
  overflow: auto;
1295
- }
1296
842
 
1297
- .bi-dialog::backdrop {
1298
- animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
1299
- background: var(--bic-dialog-backdrop-background, #00000080);
1300
- }
843
+ &::backdrop {
844
+ animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
845
+ background: var(--bic-dialog-backdrop-background, #00000080);
846
+ }
1301
847
 
1302
- .bi-dialog[open] {
1303
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
848
+ &[open] {
849
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
1304
850
  bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
1305
- display: flex;
1306
- }
851
+ display: flex;
852
+ }
1307
853
 
1308
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
1309
- --bic-dialog-max-height: unset;
1310
- border-radius: var(--bic-dialog-anchor-border-radius);
1311
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
854
+ &:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
855
+ --bic-dialog-max-height: unset;
856
+ border-radius: var(--bic-dialog-anchor-border-radius);
857
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
1312
858
  overlay var(--bic-dialog-animation-duration) allow-discrete;
1313
- transform: translate(var(--bic-dialog-anchor-closed-translate));
1314
- animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1315
- }
859
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
860
+ animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1316
861
 
1317
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
1318
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1319
- transform: translate(0);
1320
- }
862
+ &[open] {
863
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
864
+ transform: translate(0);
865
+ }
866
+ }
1321
867
 
1322
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
1323
- min-height: var(--bic-dialog-anchor-block-min-height);
1324
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1325
- max-width: 100dvw;
1326
- }
868
+ &:where([data-anchor="bottom"], [data-anchor="top"]) {
869
+ min-height: var(--bic-dialog-anchor-block-min-height);
870
+ max-height: calc(100dvh - var(--bi-layout-navbar-height));
871
+ max-width: 100dvw;
872
+ }
1327
873
 
1328
- .bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
1329
- min-width: var(--bic-dialog-anchor-inline-min-width);
1330
- max-width: var(--bic-dialog-anchor-inline-max-width);
1331
- width: fit-content;
1332
- height: 100dvh;
1333
- }
874
+ &:where([data-anchor="left"], [data-anchor="right"]) {
875
+ min-width: var(--bic-dialog-anchor-inline-min-width);
876
+ max-width: var(--bic-dialog-anchor-inline-max-width);
877
+ width: fit-content;
878
+ height: 100dvh;
879
+ }
1334
880
 
1335
- .bi-dialog[data-anchor="bottom"] {
1336
- --bic-dialog-anchor-closed-translate: 0, 100%;
1337
- border-bottom-right-radius: 0;
1338
- border-bottom-left-radius: 0;
1339
- top: auto;
1340
- }
881
+ &[data-anchor="bottom"] {
882
+ --bic-dialog-anchor-closed-translate: 0, 100%;
883
+ border-bottom-right-radius: 0;
884
+ border-bottom-left-radius: 0;
885
+ top: auto;
886
+ }
1341
887
 
1342
- .bi-dialog[data-anchor="top"] {
1343
- --bic-dialog-anchor-closed-translate: 0, -100%;
1344
- border-top-left-radius: 0;
1345
- border-top-right-radius: 0;
1346
- bottom: auto;
1347
- }
888
+ &[data-anchor="top"] {
889
+ --bic-dialog-anchor-closed-translate: 0, -100%;
890
+ border-top-left-radius: 0;
891
+ border-top-right-radius: 0;
892
+ bottom: auto;
893
+ }
1348
894
 
1349
- .bi-dialog[data-anchor="left"] {
1350
- --bic-dialog-anchor-closed-translate: -100%, 0;
1351
- border-top-left-radius: 0;
1352
- border-bottom-left-radius: 0;
1353
- right: auto;
1354
- }
895
+ &[data-anchor="left"] {
896
+ --bic-dialog-anchor-closed-translate: -100%, 0;
897
+ border-top-left-radius: 0;
898
+ border-bottom-left-radius: 0;
899
+ right: auto;
900
+ }
1355
901
 
1356
- .bi-dialog[data-anchor="right"] {
1357
- --bic-dialog-anchor-closed-translate: 100%, 0;
1358
- border-top-right-radius: 0;
1359
- border-bottom-right-radius: 0;
1360
- left: auto;
1361
- }
902
+ &[data-anchor="right"] {
903
+ --bic-dialog-anchor-closed-translate: 100%, 0;
904
+ border-top-right-radius: 0;
905
+ border-bottom-right-radius: 0;
906
+ left: auto;
907
+ }
1362
908
 
1363
- @media (prefers-reduced-motion: reduce) {
1364
- .bi-dialog[open], .bi-dialog::backdrop {
1365
- animation: none;
909
+ @media (prefers-reduced-motion: reduce) {
910
+ &[open], &::backdrop {
911
+ animation: none;
912
+ }
1366
913
  }
1367
- }
1368
914
 
1369
- .bi-dialog > button.bi-dialog--close {
1370
- top: var(--bic-dialog-icon-spacing);
1371
- right: var(--bic-dialog-icon-spacing);
1372
- position: absolute;
1373
- }
915
+ & > button.bi-dialog--close {
916
+ top: var(--bic-dialog-icon-spacing);
917
+ right: var(--bic-dialog-icon-spacing);
918
+ position: absolute;
919
+ }
1374
920
 
1375
- .bi-dialog .bi-dialog--header {
1376
- padding: var(--bic-dialog-padding);
1377
- min-height: var(--bi-scale-16x);
1378
- font: var(--bi-font-title-bold-medium);
1379
- align-items: center;
1380
- margin: 0;
1381
- display: flex;
1382
- }
921
+ & .bi-dialog--header {
922
+ padding: var(--bic-dialog-padding);
923
+ min-height: var(--bi-scale-16x);
924
+ font: var(--bi-font-title-bold-medium);
925
+ align-items: center;
926
+ margin: 0;
927
+ display: flex;
928
+ }
1383
929
 
1384
- .bi-dialog:has( > button.bi-dialog--close) .bi-dialog--header {
1385
- padding-right: var(--bi-scale-14x);
1386
- }
930
+ &:has( > button.bi-dialog--close) {
931
+ & .bi-dialog--header {
932
+ padding-right: var(--bi-scale-14x);
933
+ }
934
+ }
1387
935
 
1388
- .bi-dialog .bi-dialog--content {
1389
- padding: var(--bic-dialog-padding);
1390
- overflow-behavior: contain;
1391
- overflow: auto;
1392
- }
936
+ & .bi-dialog--content {
937
+ padding: var(--bic-dialog-padding);
938
+ overflow-behavior: contain;
939
+ overflow: auto;
940
+ }
1393
941
 
1394
- .bi-dialog .bi-dialog--footer {
1395
- padding: var(--bic-dialog-padding);
1396
- justify-content: flex-end;
1397
- align-items: center;
1398
- gap: var(--bi-scale-4x);
1399
- margin-top: auto;
1400
- display: flex;
1401
- }
942
+ & .bi-dialog--footer {
943
+ padding: var(--bic-dialog-padding);
944
+ justify-content: flex-end;
945
+ align-items: center;
946
+ gap: var(--bi-scale-4x);
947
+ margin-top: auto;
948
+ display: flex;
949
+ }
1402
950
 
1403
- :is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
1404
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
951
+ & .bi-dialog--header, & .bi-dialog--content, & .bi-dialog--footer {
952
+ &:not([data-no-border="true"]):not(:first-child) {
953
+ border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
954
+ }
955
+ }
1405
956
  }
1406
957
 
1407
958
  body:has(.bi-dialog:modal) {
@@ -1438,27 +989,16 @@ body:has(.bi-dialog:modal) {
1438
989
 
1439
990
  .bi-popover {
1440
991
  --bic-popover-arrow-size: var(--bi-scale-3x);
1441
- --bic-popover-background: var(--bi-basic-white);
992
+ --bic-popover-background: var(--bi-color-surface-subtle);
1442
993
  --bic-popover-border-width: var(--bi-stroke-thin);
1443
994
  --bic-popover-border-style: solid;
1444
- --bic-popover-border-color: var(--bi-neutral-15);
1445
- --bic-popover-color: var(--bi-neutral-90);
995
+ --bic-popover-border-color: var(--bi-color-stroke);
996
+ --bic-popover-color: var(--bi-color-text);
1446
997
  --bic-popover-border-radius: var(--bi-radius-medium);
1447
998
  --bic-popover-max-width: 300px;
1448
999
  --bic-popover-padding: var(--bi-scale-1x);
1449
1000
  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1450
1001
  0px 2px 2px -1px #26333f0a;
1451
- }
1452
-
1453
- .bi-popover[data-dark="true"] {
1454
- --bic-popover-background: var(--bi-neutral-95);
1455
- --bic-popover-border-color: var(--bi-neutral-70);
1456
- --bic-popover-color: var(--bi-neutral-5);
1457
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1458
- 0px 2px 2px -1px #26333f0a;
1459
- }
1460
-
1461
- .bi-popover {
1462
1002
  background: var(--bic-popover-background);
1463
1003
  border-radius: var(--bic-popover-border-radius);
1464
1004
  border-width: var(--bic-popover-border-width);
@@ -1474,41 +1014,43 @@ body:has(.bi-dialog:modal) {
1474
1014
  position: fixed;
1475
1015
  inset: 0 auto auto 0;
1476
1016
  overflow: visible;
1477
- }
1478
1017
 
1479
- .bi-popover[aria-hidden="false"] {
1480
- display: block;
1481
- }
1018
+ &[aria-hidden="false"] {
1019
+ display: block;
1020
+ }
1482
1021
 
1483
- .bi-popover[data-arrow="true"]:before {
1484
- background: var(--bic-popover-background);
1485
- border: inherit;
1486
- box-sizing: border-box;
1487
- content: "";
1488
- height: var(--bic-popover-arrow-size);
1489
- left: var(--bic-popover-arrow-x);
1490
- top: var(--bic-popover-arrow-y);
1491
- width: var(--bic-popover-arrow-size);
1492
- border-top-color: #0000;
1493
- border-left-color: #0000;
1494
- position: absolute;
1495
- translate: -50% -50%;
1496
- }
1022
+ &[data-arrow="true"] {
1023
+ &:before {
1024
+ background: var(--bic-popover-background);
1025
+ border: inherit;
1026
+ box-sizing: border-box;
1027
+ content: "";
1028
+ height: var(--bic-popover-arrow-size);
1029
+ left: var(--bic-popover-arrow-x);
1030
+ top: var(--bic-popover-arrow-y);
1031
+ width: var(--bic-popover-arrow-size);
1032
+ border-top-color: #0000;
1033
+ border-left-color: #0000;
1034
+ position: absolute;
1035
+ translate: -50% -50%;
1036
+ }
1497
1037
 
1498
- .bi-popover[data-arrow="true"][data-placement="top"]:before {
1499
- rotate: 45deg;
1500
- }
1038
+ &[data-placement="top"]:before {
1039
+ rotate: 45deg;
1040
+ }
1501
1041
 
1502
- .bi-popover[data-arrow="true"][data-placement="left"]:before {
1503
- rotate: -45deg;
1504
- }
1042
+ &[data-placement="left"]:before {
1043
+ rotate: -45deg;
1044
+ }
1505
1045
 
1506
- .bi-popover[data-arrow="true"][data-placement="right"]:before {
1507
- rotate: 135deg;
1508
- }
1046
+ &[data-placement="right"]:before {
1047
+ rotate: 135deg;
1048
+ }
1509
1049
 
1510
- .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
1511
- rotate: -135deg;
1050
+ &[data-placement="bottom"]:before {
1051
+ rotate: -135deg;
1052
+ }
1053
+ }
1512
1054
  }
1513
1055
 
1514
1056
  [data-popover="inline"] {
@@ -1518,34 +1060,23 @@ body:has(.bi-dialog:modal) {
1518
1060
  font-size: inherit;
1519
1061
  -webkit-text-decoration: underline dotted;
1520
1062
  text-decoration: underline dotted;
1521
- }
1522
1063
 
1523
- [data-popover="inline"]:not([hidden]) {
1524
- display: inline;
1064
+ &:not([hidden]) {
1065
+ display: inline;
1066
+ }
1525
1067
  }
1526
1068
 
1527
1069
  .bi-dropdown {
1528
1070
  --bic-dropdown-padding: var(--bi-scale-1x);
1529
1071
  --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
1530
1072
  --bic-dropdown-item-size: var(--bi-scale-11x);
1531
- --bic-dropdown-background: var(--bi-basic-white);
1073
+ --bic-dropdown-background: var(--bi-color-surface-subtle);
1532
1074
  --bic-dropdown-border-width: var(--bi-stroke-thin);
1533
1075
  --bic-dropdown-border-style: solid;
1534
- --bic-dropdown-border-color: var(--bi-neutral-15);
1076
+ --bic-dropdown-border-color: var(--bi-color-stroke);
1535
1077
  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1536
1078
  0px 2px 2px -1px #26333f0a;
1537
1079
  --bic-dropdown-min-width: var(--bi-scale-64x);
1538
- }
1539
-
1540
- .bi-dropdown[data-dark="true"] {
1541
- --bic-dropdown-background: var(--bi-neutral-100);
1542
- --bic-dropdown-border-color: var(--bi-neutral-90);
1543
- --bic-dropdown-color: var(--bi-neutral-5);
1544
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1545
- 0px 2px 2px -1px #26333f0a;
1546
- }
1547
-
1548
- .bi-dropdown {
1549
1080
  background: var(--bic-dropdown-background);
1550
1081
  border-radius: var(--bi-radius-medium);
1551
1082
  border-width: var(--bic-dropdown-border-width);
@@ -1556,26 +1087,34 @@ body:has(.bi-dialog:modal) {
1556
1087
  min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
1557
1088
  padding: var(--bic-dropdown-padding);
1558
1089
  list-style: none;
1559
- }
1560
1090
 
1561
- .bi-dropdown ul {
1562
- gap: var(--bi-scale-1x);
1563
- flex-direction: column;
1564
- margin: 0;
1565
- padding: 0;
1566
- list-style: none;
1567
- display: flex;
1091
+ & ul {
1092
+ gap: var(--bi-scale-1x);
1093
+ flex-direction: column;
1094
+ margin: 0;
1095
+ padding: 0;
1096
+ list-style: none;
1097
+ display: flex;
1098
+ }
1099
+
1100
+ & :is(a, button, [role="button"]) {
1101
+ padding: var(--bic-dropdown-item-padding);
1102
+ min-height: var(--bic-dropdown-item-size);
1103
+ justify-content: start;
1104
+ width: 100%;
1105
+
1106
+ & .bi-button--end-icon {
1107
+ margin-left: auto;
1108
+ }
1109
+ }
1568
1110
  }
1569
1111
 
1570
- .bi-dropdown :is(a, button, [role="button"]) {
1571
- padding: var(--bic-dropdown-item-padding);
1572
- min-height: var(--bic-dropdown-item-size);
1573
- justify-content: start;
1574
- width: 100%;
1112
+ :root, [data-color-scheme="light"] {
1113
+ --_bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1575
1114
  }
1576
1115
 
1577
- .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1578
- margin-left: auto;
1116
+ [data-color-scheme="dark"] {
1117
+ --_bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1579
1118
  }
1580
1119
 
1581
1120
  :where(.bi-input) {
@@ -1583,44 +1122,24 @@ body:has(.bi-dialog:modal) {
1583
1122
  }
1584
1123
 
1585
1124
  .bi-input {
1586
- --bic-input-border-color-invalid: var(--bi-alert-50);
1587
1125
  --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
1588
- --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
1589
- --bic-input-caret-color: var(--bi-primary-50);
1126
+ --bic-input-caret-color: var(--bi-color-primary-fill);
1590
1127
  --bic-input-font-size: 1rem;
1591
1128
  --bic-input-padding: var(--bi-scale-3x);
1592
1129
  --bic-input-size: var(--bi-scale-11x);
1593
- --bic-input-toggle-background: var(--bi-primary-50);
1594
- --bic-input-toggle-color: var(--bi-basic-white);
1130
+ --bic-input-toggle-background: var(--bi-color-primary-fill);
1131
+ --bic-input-toggle-color: var(--bi-color-primary-on-fill);
1595
1132
  --bic-input-toggle-size: 1.125rem;
1596
- --bic-input-background: var(--bi-basic-white);
1597
- --bic-input-background-readonly: var(--bi-neutral-10);
1598
- --bic-input-border-color: var(--bi-neutral-50);
1599
- --bic-input-border-color-hover: var(--bi-neutral-50);
1600
- --bic-input-border-color-readonly: var(--bi-neutral-50);
1601
- --bic-input-color-readonly: var(--bi-neutral-95);
1602
- --bic-input-color: var(--bi-neutral-95);
1603
- --bic-input-disabled-color: var(--bi-neutral-50);
1604
- --bic-input-placeholder-color: var(--bi-neutral-60);
1605
- --bic-input-focus-outline-color: var(--bi-primary-50);
1606
- --bic-input-focus-shadow-color: var(--bi-basic-white);
1607
- --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1608
- }
1609
-
1610
- .bi-input[data-dark="true"] {
1611
- --bic-input-background: var(--bi-neutral-95);
1612
- --bic-input-background-readonly: var(--bi-neutral-50);
1613
- --bic-input-border-color-hover: var(--bi-neutral-25);
1614
- --bic-input-color-readonly: var(--bi-basic-white);
1615
- --bic-input-color: var(--bi-basic-white);
1616
- --bic-input-disabled-color: var(--bi-neutral-40);
1617
- --bic-input-placeholder-color: var(--bi-neutral-30);
1618
- --bic-input-focus-outline-color: var(--bi-primary-30);
1619
- --bic-input-focus-shadow-color: var(--bi-neutral-95);
1620
- --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1621
- }
1622
-
1623
- .bi-input {
1133
+ --bic-input-background: var(--bi-color-surface-subtle);
1134
+ --bic-input-background-readonly: var(--bi-color-surface);
1135
+ --bic-input-border-color: var(--bi-color-stroke-contrast);
1136
+ --bic-input-border-color-invalid: var(--bi-color-alert-stroke-contrast);
1137
+ --bic-input-color-readonly: var(--bi-color-text-subtle);
1138
+ --bic-input-color: var(--bi-color-text);
1139
+ --bic-input-disabled-color: var(--bi-color-text-subtle);
1140
+ --bic-input-placeholder-color: var(--bi-color-text-secondary);
1141
+ --bic-input-focus-outline-color: var(--bi-states-focus);
1142
+ --bic-input-focus-shadow-color: var(--bi-states-focus-background);
1624
1143
  appearance: none;
1625
1144
  background: var(--bic-input-background);
1626
1145
  border-radius: var(--bi-radius-medium);
@@ -1638,570 +1157,526 @@ body:has(.bi-dialog:modal) {
1638
1157
  border: none;
1639
1158
  line-height: 1;
1640
1159
  position: relative;
1641
- }
1642
1160
 
1643
- .bi-input[data-size="large"] {
1644
- --bic-input-size: var(--bi-scale-14x);
1645
- --bic-input-font-size: 1.25rem;
1646
- }
1161
+ &[data-size="large"] {
1162
+ --bic-input-size: var(--bi-scale-14x);
1163
+ --bic-input-font-size: 1.25rem;
1164
+ }
1647
1165
 
1648
- .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
1649
- box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
1650
- }
1166
+ &:where(:not([type="checkbox"], [type="radio"])) {
1167
+ &:hover {
1168
+ background: var(--_bi--hover, linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%),
1169
+ var(--bic-input-background));
1170
+ }
1651
1171
 
1652
- .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
1653
- --bic-input-border-color: var(--bic-input-focus-outline-color);
1654
- }
1172
+ &:focus-visible {
1173
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
1174
+ background: var(--_bi--focus, var(--bic-input-background));
1175
+ }
1176
+ }
1655
1177
 
1656
- .bi-input:focus-visible {
1657
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1658
- outline-offset: 0;
1659
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1178
+ &:focus-visible {
1179
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1180
+ outline-offset: 0;
1181
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1660
1182
  0px 0px 10px 0px #0000000d);
1661
- }
1662
-
1663
- .bi-input:focus-visible * {
1664
- --_bi--focus: ;
1665
- }
1666
-
1667
- .bi-input::placeholder {
1668
- color: var(--bic-input-placeholder-color);
1669
- }
1670
-
1671
- .bi-input:not([size], [cols]) {
1672
- width: 100%;
1673
- }
1674
-
1675
- .bi-input:disabled, .bi-input[aria-disabled="true"] {
1676
- cursor: not-allowed;
1677
- }
1678
-
1679
- .bi-input[aria-invalid="true"] {
1680
- --bic-input-border-color: var(--bic-input-border-color-invalid);
1681
- }
1682
-
1683
- .bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
1684
- background: var(--bic-input-background-readonly);
1685
- --bic-input-border-color: var(--bic-input-border-color-readonly);
1686
- color: var(--bic-input-color-readonly);
1687
- }
1688
-
1689
- .bi-input:is(textarea) {
1690
- height: auto;
1691
- min-height: calc(var(--bic-input-size) * 2);
1692
- resize: vertical;
1693
- }
1694
-
1695
- .bi-input:is(textarea):not([rows]) {
1696
- field-sizing: content;
1697
- }
1698
-
1699
- .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
1700
- cursor: pointer;
1701
- }
1702
-
1703
- .bi-input:is(select) {
1704
- background-image: var(--bic-input-select-chevron);
1705
- background-position: calc(100% - .5em);
1706
- background-repeat: no-repeat;
1707
- background-size: 1.5em;
1708
- }
1709
-
1710
- .bi-input[type="checkbox"], .bi-input[type="radio"] {
1711
- padding: var(--bi-scale-0-50x);
1712
- line-height: inherit;
1713
- height: var(--bic-input-toggle-size);
1714
- width: var(--bic-input-toggle-size);
1715
- box-shadow: none;
1716
- border-width: var(--bi-stroke-medium);
1717
- border-style: solid;
1718
- border-color: var(--bic-input-border-color);
1719
- background: none;
1720
- flex-shrink: 0;
1721
- }
1722
-
1723
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
1724
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
1725
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1726
- outline-offset: var(--_bi--focus, 3px);
1727
- }
1183
+ }
1728
1184
 
1729
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
1730
- --_bi--focus: ;
1731
- }
1185
+ &::placeholder {
1186
+ color: var(--bic-input-placeholder-color);
1187
+ }
1732
1188
 
1733
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
1734
- cursor: pointer;
1735
- }
1189
+ &:not([size], [cols]) {
1190
+ width: 100%;
1191
+ }
1736
1192
 
1737
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
1738
- border-radius: var(--bi-radius-full);
1739
- }
1193
+ &:disabled, &[aria-disabled="true"] {
1194
+ cursor: not-allowed;
1195
+ }
1740
1196
 
1741
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
1742
- content: "";
1743
- background-color: var(--bic-input-toggle-background);
1744
- border-radius: 100%;
1745
- width: 0;
1746
- height: 0;
1747
- transition: width .1s ease-in-out, height .1s ease-in-out;
1748
- display: block;
1749
- position: absolute;
1750
- top: 50%;
1751
- left: 50%;
1752
- transform: translate(-50%, -50%);
1753
- }
1197
+ &[aria-invalid="true"] {
1198
+ --bic-input-border-color: var(--bic-input-border-color-invalid);
1199
+ --bic-input-focus-outline-color: var(--bic-input-border-color-invalid);
1200
+ }
1754
1201
 
1755
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
1756
- --bic-input-border-color: var(--bic-input-toggle-background);
1757
- }
1202
+ &[readonly], &:disabled, &[aria-disabled="true"] {
1203
+ background: var(--bic-input-background-readonly);
1204
+ color: var(--bic-input-color-readonly);
1205
+ }
1758
1206
 
1759
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
1760
- width: 12px;
1761
- height: 12px;
1762
- }
1207
+ &:is(textarea) {
1208
+ height: auto;
1209
+ min-height: calc(var(--bic-input-size) * 2);
1210
+ resize: vertical;
1763
1211
 
1764
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
1765
- border-radius: var(--bi-radius-small);
1766
- place-content: center;
1767
- display: grid;
1768
- }
1212
+ &:not([rows]) {
1213
+ field-sizing: content;
1214
+ }
1215
+ }
1769
1216
 
1770
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
1771
- content: "";
1772
- width: .7em;
1773
- height: .7em;
1774
- box-shadow: inset 1em 1em var(--bic-input-toggle-color);
1775
- transform-origin: center;
1776
- clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
1777
- transition: transform .2s ease-in-out;
1778
- transform: scale(0);
1779
- }
1217
+ &:is(select) {
1218
+ &:not([readonly], [aria-disabled="true"], :disabled) {
1219
+ cursor: pointer;
1220
+ }
1780
1221
 
1781
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
1782
- background: var(--bic-input-toggle-background);
1783
- --bic-input-border-color: var(--bic-input-toggle-background);
1784
- }
1222
+ background-image: var(--_bic-input-select-chevron);
1223
+ background-position: calc(100% - .5em);
1224
+ background-repeat: no-repeat;
1225
+ background-size: 1.5em;
1226
+ }
1785
1227
 
1786
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
1787
- transform: scale(1);
1788
- }
1228
+ &[type="checkbox"], &[type="radio"] {
1229
+ padding: var(--bi-scale-0-50x);
1230
+ line-height: inherit;
1231
+ height: var(--bic-input-toggle-size);
1232
+ width: var(--bic-input-toggle-size);
1233
+ box-shadow: none;
1234
+ border-width: var(--bi-stroke-medium);
1235
+ border-style: solid;
1236
+ border-color: var(--bic-input-border-color);
1237
+ background: none;
1238
+ flex-shrink: 0;
1239
+
1240
+ &:focus-visible {
1241
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
1242
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1243
+ outline-offset: var(--_bi--focus, 3px);
1244
+ }
1789
1245
 
1790
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
1791
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
1792
- }
1246
+ &:read-only:not([readonly], [aria-disabled="true"], :disabled) {
1247
+ cursor: pointer;
1248
+ }
1793
1249
 
1794
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
1795
- --_bic-input-circle-position-x: var(--bi-scale-0-50x);
1796
- background: var(--bi-neutral-50);
1797
- }
1250
+ &[type="radio"] {
1251
+ border-radius: var(--bi-radius-full);
1252
+
1253
+ &:before {
1254
+ content: "";
1255
+ background-color: var(--bic-input-toggle-background);
1256
+ border-radius: 100%;
1257
+ width: 0;
1258
+ height: 0;
1259
+ transition: width .1s ease-in-out, height .1s ease-in-out;
1260
+ display: block;
1261
+ position: absolute;
1262
+ top: 50%;
1263
+ left: 50%;
1264
+ transform: translate(-50%, -50%);
1265
+ }
1266
+
1267
+ &:checked {
1268
+ --bic-input-border-color: var(--bic-input-toggle-background);
1269
+
1270
+ &:before {
1271
+ width: 12px;
1272
+ height: 12px;
1273
+ }
1274
+ }
1275
+ }
1798
1276
 
1799
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
1800
- --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
1801
- background: var(--bic-input-toggle-background);
1802
- --bic-input-border-color: var(--bic-input-toggle-background);
1803
- }
1277
+ &[type="checkbox"]:not([role="switch"]) {
1278
+ border-radius: var(--bi-radius-small);
1279
+ place-content: center;
1280
+ display: grid;
1281
+
1282
+ &:before {
1283
+ content: "";
1284
+ width: .7em;
1285
+ height: .7em;
1286
+ box-shadow: inset 1em 1em var(--bic-input-toggle-color);
1287
+ transform-origin: center;
1288
+ clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
1289
+ transition: transform .2s ease-in-out;
1290
+ transform: scale(0);
1291
+ }
1292
+
1293
+ &:where(:checked, :indeterminate) {
1294
+ background: var(--bic-input-toggle-background);
1295
+ --bic-input-border-color: var(--bic-input-toggle-background);
1296
+
1297
+ &:before {
1298
+ transform: scale(1);
1299
+ }
1300
+ }
1301
+
1302
+ &:indeterminate:before {
1303
+ clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
1304
+ }
1305
+ }
1804
1306
 
1805
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
1806
- background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
1807
- background-origin: content-box;
1808
- background-position: var(--_bic-input-circle-position-x);
1809
- background-repeat: no-repeat;
1810
- background-size: calc(var(--bic-input-toggle-size)) 100%;
1811
- border-radius: var(--bi-radius-full);
1812
- width: var(--bi-scale-11x);
1813
- height: var(--bi-scale-6x);
1814
- padding-inline: 0;
1815
- transition: background-position .2s;
1307
+ &[type="checkbox"][role="switch"] {
1308
+ --_bic-input-circle-position-x: var(--bi-scale-0-50x);
1309
+ background: var(--bi-neutral-50);
1310
+
1311
+ &:where(:checked) {
1312
+ --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
1313
+ background: var(--bic-input-toggle-background);
1314
+ --bic-input-border-color: var(--bic-input-toggle-background);
1315
+ }
1316
+
1317
+ background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
1318
+ background-origin: content-box;
1319
+ background-position: var(--_bic-input-circle-position-x);
1320
+ background-repeat: no-repeat;
1321
+ background-size: calc(var(--bic-input-toggle-size)) 100%;
1322
+ border-radius: var(--bi-radius-full);
1323
+ width: var(--bi-scale-11x);
1324
+ height: var(--bi-scale-6x);
1325
+ padding-inline: 0;
1326
+ transition: background-position .2s;
1327
+ }
1328
+ }
1816
1329
  }
1817
1330
 
1818
1331
  .bi-field {
1819
- --bic-field-border-color-invalid: var(--bi-alert-50);
1820
1332
  --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
1821
- --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
1822
1333
  --bic-field-content-spacing: var(--bi-scale-0-50x);
1823
1334
  --bic-field-padding-inline: var(--bi-scale-3x);
1824
- --bic-field-affix-color: var(--bi-neutral-60);
1825
- --bic-field-background: var(--bi-basic-white);
1826
- --bic-field-background-hover: var(--bi-states-hover-dark);
1827
- --bic-field-background-press: var(--bi-states-press-dark);
1828
- --bic-field-background-readonly: var(--bi-neutral-10);
1829
- --bic-field-border-color: var(--bi-neutral-50);
1830
- --bic-field-border-color-hover: var(--bi-neutral-50);
1831
- --bic-field-border-color-readonly: var(--bi-neutral-50);
1832
- --bic-field-disabled-color: var(--bi-neutral-50);
1833
- --bic-field-description-color: var(--bi-neutral-60);
1834
- --bic-field-label-color: var(--bi-neutral-95);
1835
- --bic-field-label-required-color: var(--bi-primary-50);
1836
- --bic-field-focus-outline-color: var(--bi-primary-50);
1837
- --bic-field-focus-shadow-color: var(--bi-basic-white);
1838
- }
1839
-
1840
- .bi-field[data-dark="true"] {
1841
- --bic-field-affix-color: var(--bi-neutral-30);
1842
- --bic-field-background: var(--bi-neutral-95);
1843
- --bic-field-background-hover: var(--bi-states-hover-light);
1844
- --bic-field-background-press: var(--bi-states-press-light);
1845
- --bic-field-background-readonly: var(--bi-neutral-50);
1846
- --bic-field-border-color-hover: var(--bi-neutral-25);
1847
- --bic-field-disabled-color: var(--bi-neutral-40);
1848
- --bic-field-description-color: var(--bi-neutral-15);
1849
- --bic-field-label-color: var(--bi-basic-white);
1850
- --bic-field-label-required-color: var(--bi-secondary-50);
1851
- --bic-field-focus-outline-color: var(--bi-primary-30);
1852
- --bic-field-focus-shadow-color: var(--bi-neutral-95);
1853
- }
1854
-
1855
- .bi-field > * {
1856
- margin-block: 0;
1857
- }
1858
-
1859
- .bi-field > * + * {
1860
- margin-top: var(--bic-field-content-spacing);
1861
- }
1862
-
1863
- .bi-field .bi-field--description {
1864
- color: var(--bic-field-description-color);
1865
- font: var(--bi-font-body-small);
1866
- line-height: 1.15;
1867
- }
1335
+ --bic-field-affix-color: var(--bi-color-text);
1336
+ --bic-field-background: var(--bi-color-surface-subtle);
1337
+ --bic-field-background-hover: var(--bi-states-hover);
1338
+ --bic-field-background-press: var(--bi-states-press);
1339
+ --bic-field-border-color: var(--bi-color-stroke-contrast);
1340
+ --bic-field-border-color-invalid: var(--bi-color-alert-stroke-contrast);
1341
+ --bic-field-disabled-color: var(--bi-color-text-subtle);
1342
+ --bic-field-description-color: var(--bi-color-text-secondary);
1343
+ --bic-field-label-color: var(--bi-color-text);
1344
+ --bic-field-label-required-color: var(--bi-states-required);
1345
+ --bic-field-focus-outline-color: var(--bi-states-focus);
1346
+ --bic-field-focus-shadow-color: var(--bi-states-focus-background);
1347
+
1348
+ & > * {
1349
+ margin-block: 0;
1350
+ }
1868
1351
 
1869
- .bi-field .bi-input:where(:not([hidden])) {
1870
- display: block;
1871
- }
1352
+ & > * + * {
1353
+ margin-top: var(--bic-field-content-spacing);
1354
+ }
1872
1355
 
1873
- .bi-field:has(.bi-input[aria-invalid="true"]) {
1874
- --bic-field-border-color: var(--bic-field-border-color-invalid);
1875
- }
1356
+ & .bi-field--description {
1357
+ color: var(--bic-field-description-color);
1358
+ font: var(--bi-font-body-small);
1359
+ line-height: 1.15;
1360
+ }
1876
1361
 
1877
- .bi-field:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
1878
- cursor: not-allowed;
1879
- --bic-field-label-color: var(--bic-field-disabled-color);
1880
- --bic-field-description-color: var(--bic-field-disabled-color);
1881
- --bic-field-affix-color: var(--bic-field-disabled-color);
1882
- --bic-input-toggle-background: var(--bic-field-disabled-color);
1883
- }
1362
+ & .bi-input:where(:not([hidden])) {
1363
+ display: block;
1364
+ }
1884
1365
 
1885
- .bi-field[data-fullwidth="true"] {
1886
- width: 100%;
1887
- }
1366
+ &:has(.bi-input[aria-invalid="true"]) {
1367
+ --bic-field-border-color: var(--bic-field-border-color-invalid);
1368
+ --bic-field-focus-outline-color: var(--bic-field-border-color-invalid);
1369
+ }
1888
1370
 
1889
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
1890
- border-radius: var(--bi-radius-medium);
1891
- gap: 0 var(--bi-scale-3x);
1892
- width: fit-content;
1893
- padding: var(--bi-scale-2x) var(--bi-scale-3x);
1894
- grid-template-columns: auto 1fr;
1895
- grid-template-areas: "input content";
1896
- align-items: center;
1897
- }
1371
+ &:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
1372
+ cursor: not-allowed;
1373
+ --bic-field-label-color: var(--bic-field-disabled-color);
1374
+ --bic-field-description-color: var(--bic-field-disabled-color);
1375
+ --bic-field-affix-color: var(--bic-field-disabled-color);
1376
+ --bic-input-toggle-background: var(--bic-field-disabled-color);
1377
+ }
1898
1378
 
1899
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
1900
- display: grid;
1901
- }
1379
+ &[data-fullwidth="true"] {
1380
+ width: 100%;
1381
+ }
1902
1382
 
1903
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
1904
- width: 100%;
1905
- }
1383
+ &:has(.bi-input:is([type="radio"], [type="checkbox"])) {
1384
+ border-radius: var(--bi-radius-medium);
1385
+ gap: 0 var(--bi-scale-3x);
1386
+ width: fit-content;
1387
+ padding: var(--bi-scale-2x) var(--bi-scale-3x);
1388
+ grid-template-columns: auto 1fr;
1389
+ grid-template-areas: "input content";
1390
+ align-items: center;
1391
+
1392
+ &:not([hidden]) {
1393
+ display: grid;
1394
+ }
1906
1395
 
1907
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
1908
- border-radius: var(--bi-scale-24x);
1909
- padding: var(--bi-scale-1x) var(--bi-scale-2x);
1910
- }
1396
+ &[data-fullwidth="true"] {
1397
+ width: 100%;
1398
+ }
1911
1399
 
1912
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
1913
- padding-inline-end: var(--bi-scale-4x);
1914
- }
1400
+ &:has(.bi-input[role="switch"]) {
1401
+ border-radius: var(--bi-scale-24x);
1402
+ padding: var(--bi-scale-1x) var(--bi-scale-2x);
1915
1403
 
1916
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
1917
- padding-inline-start: var(--bi-scale-4x);
1918
- }
1404
+ &:has(.bi-label) {
1405
+ &[data-position="start"] {
1406
+ padding-inline-end: var(--bi-scale-4x);
1407
+ }
1919
1408
 
1920
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
1921
- grid-column: content;
1922
- margin-block: 0;
1923
- }
1409
+ &[data-position="end"] {
1410
+ padding-inline-start: var(--bi-scale-4x);
1411
+ }
1412
+ }
1413
+ }
1924
1414
 
1925
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
1926
- margin: var(--bi-scale-0-50x) 0;
1927
- -webkit-user-select: none;
1928
- user-select: none;
1929
- font-size: 1rem;
1930
- line-height: 1.5;
1931
- }
1415
+ & > * {
1416
+ grid-column: content;
1417
+ margin-block: 0;
1418
+ }
1932
1419
 
1933
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-input {
1934
- margin: var(--bi-scale-1x) auto;
1935
- grid-area: 1 / input;
1936
- align-self: flex-start;
1937
- }
1420
+ & .bi-label {
1421
+ margin: var(--bi-scale-0-50x) 0;
1422
+ -webkit-user-select: none;
1423
+ user-select: none;
1424
+ font-size: 1rem;
1425
+ line-height: 1.5;
1426
+ }
1938
1427
 
1939
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
1940
- cursor: pointer;
1941
- }
1428
+ & .bi-input {
1429
+ margin: var(--bi-scale-1x) auto;
1430
+ grid-area: 1 / input;
1431
+ align-self: flex-start;
1432
+ }
1942
1433
 
1943
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
1944
- gap: 0;
1945
- }
1434
+ &:is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
1435
+ cursor: pointer;
1436
+ }
1946
1437
 
1947
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
1948
- background: var(--_bi--hover, var(--bic-field-background-hover));
1949
- }
1438
+ &:has(input:only-child) {
1439
+ gap: 0;
1440
+ }
1950
1441
 
1951
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
1952
- --_bi--hover: ;
1953
- }
1442
+ &:hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
1443
+ background: var(--_bi--hover, var(--bic-field-background-hover));
1954
1444
 
1955
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
1956
- background: var(--_bi--hover, var(--bic-field-background-press));
1957
- }
1445
+ & * {
1446
+ --_bi--hover: ;
1447
+ }
1448
+ }
1958
1449
 
1959
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
1960
- --_bi--hover: ;
1961
- }
1450
+ &:active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
1451
+ background: var(--_bi--hover, var(--bic-field-background-press));
1962
1452
 
1963
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1964
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1965
- outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1966
- outline-offset: var(--_bi--focus, 2px);
1967
- }
1453
+ & * {
1454
+ --_bi--hover: ;
1455
+ }
1456
+ }
1968
1457
 
1969
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
1970
- --_bi--focus: ;
1971
- }
1458
+ &:has(.bi-input:focus-visible) {
1459
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1460
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1461
+ outline-offset: var(--_bi--focus, 2px);
1972
1462
 
1973
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
1974
- grid-template-columns: 1fr auto;
1975
- grid-template-areas: "content input";
1976
- }
1463
+ & * {
1464
+ --_bi--focus: ;
1465
+ }
1466
+ }
1977
1467
 
1978
- .bi-field .bi-field--affixes {
1979
- background: var(--bic-field-background);
1980
- border-radius: var(--bi-radius-medium);
1981
- box-sizing: border-box;
1982
- white-space: nowrap;
1983
- max-width: 100%;
1984
- box-shadow: var(--bic-field-box-shadow);
1985
- }
1468
+ &[data-position="end"] {
1469
+ grid-template-columns: 1fr auto;
1470
+ grid-template-areas: "content input";
1471
+ }
1472
+ }
1986
1473
 
1987
- .bi-field .bi-field--affixes .bi-input {
1988
- --bic-input-background: ;
1989
- --bic-input-box-shadow: ;
1990
- flex: auto;
1991
- }
1474
+ & .bi-field--affixes {
1475
+ background: var(--bic-field-background);
1476
+ border-radius: var(--bi-radius-medium);
1477
+ box-sizing: border-box;
1478
+ white-space: nowrap;
1479
+ max-width: 100%;
1480
+ box-shadow: var(--bic-field-box-shadow);
1481
+
1482
+ & .bi-input {
1483
+ --bic-input-background: ;
1484
+ --bic-input-box-shadow: ;
1485
+ flex: auto;
1486
+ }
1992
1487
 
1993
- .bi-field .bi-field--affixes:not([hidden]) {
1994
- display: flex;
1995
- }
1488
+ &:not([hidden]) {
1489
+ display: flex;
1490
+ }
1996
1491
 
1997
- .bi-field .bi-field--affixes:has(.bi-input[size]) {
1998
- width: fit-content;
1999
- }
1492
+ &:has(.bi-input[size]) {
1493
+ width: fit-content;
1494
+ }
2000
1495
 
2001
- .bi-field .bi-field--affixes:hover {
2002
- box-shadow: var(--_bi--hover, var(--bic-field-box-shadow-hover));
2003
- }
1496
+ &:hover {
1497
+ background: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-field-background);
2004
1498
 
2005
- .bi-field .bi-field--affixes:hover * {
2006
- --_bi--hover: ;
2007
- }
1499
+ & * {
1500
+ --_bi--hover: ;
1501
+ }
1502
+ }
2008
1503
 
2009
- .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
2010
- outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2011
- outline-offset: 0;
2012
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1504
+ &:has(.bi-input:focus-visible) {
1505
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1506
+ outline-offset: 0;
1507
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
2013
1508
  0px 0px 10px 0px #0000000d);
2014
- }
2015
-
2016
- .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
2017
- --_bi--focus: ;
2018
- }
2019
-
2020
- .bi-field .bi-field--affixes .bi-field--affix {
2021
- padding-inline: var(--bic-field-padding-inline);
2022
- color: var(--bic-field-affix-color);
2023
- flex-shrink: 0;
2024
- align-items: center;
2025
- }
2026
-
2027
- .bi-field .bi-field--affixes .bi-field--affix:not([hidden]) {
2028
- display: flex;
2029
- }
2030
-
2031
- .bi-field .bi-field--affixes .bi-field--affix:first-child {
2032
- border-inline-end: 0;
2033
- border-start-start-radius: inherit;
2034
- border-end-start-radius: inherit;
2035
- padding-inline-end: 0;
2036
- }
2037
-
2038
- .bi-field .bi-field--affixes .bi-field--affix:last-child {
2039
- border-inline-start: 0;
2040
- border-start-end-radius: inherit;
2041
- border-end-end-radius: inherit;
2042
- padding-inline-start: 0;
2043
- }
2044
1509
 
2045
- .bi-fieldset {
2046
- --bic-fieldset-color: var(--bi-neutral-95);
2047
- --bic-fieldset-description-color: var(--bi-neutral-60);
2048
- }
1510
+ & * {
1511
+ --_bi--focus: ;
1512
+ }
1513
+ }
2049
1514
 
2050
- .bi-fieldset[data-dark="true"] {
2051
- --bic-fieldset-color: var(--bi-basic-white);
2052
- --bic-fieldset-description-color: var(--bi-neutral-15);
1515
+ & .bi-field--affix {
1516
+ padding-inline: var(--bic-field-padding-inline);
1517
+ color: var(--bic-field-affix-color);
1518
+ flex-shrink: 0;
1519
+ align-items: center;
1520
+
1521
+ &:not([hidden]) {
1522
+ display: flex;
1523
+ }
1524
+
1525
+ &:first-child {
1526
+ border-inline-end: 0;
1527
+ border-start-start-radius: inherit;
1528
+ border-end-start-radius: inherit;
1529
+ padding-inline-end: 0;
1530
+ }
1531
+
1532
+ &:last-child {
1533
+ border-inline-start: 0;
1534
+ border-start-end-radius: inherit;
1535
+ border-end-end-radius: inherit;
1536
+ padding-inline-start: 0;
1537
+ }
1538
+ }
1539
+ }
2053
1540
  }
2054
1541
 
2055
1542
  .bi-fieldset {
1543
+ --bic-fieldset-color: var(--bi-color-text);
1544
+ --bic-fieldset-description-color: var(--bi-color-text-subtle);
2056
1545
  border: 0;
2057
1546
  min-width: 0;
2058
1547
  margin: 0;
2059
1548
  padding: 0;
2060
- }
2061
-
2062
- .bi-fieldset > legend {
2063
- color: var(--bic-fieldset-color);
2064
- padding: 0;
2065
- font-size: 1rem;
2066
- }
2067
-
2068
- .bi-fieldset > * + * {
2069
- margin-block-start: var(--bi-scale-1x);
2070
- }
2071
1549
 
2072
- .bi-fieldset > legend + p {
2073
- margin-block: var(--bi-scale-1x) 0;
2074
- color: var(--bic-fieldset-description-color);
2075
- font: var(--bi-font-body-large);
2076
- }
1550
+ & > legend {
1551
+ color: var(--bic-fieldset-color);
1552
+ padding: 0;
1553
+ font-size: 1rem;
1554
+ }
2077
1555
 
2078
- .bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
2079
- opacity: var(--ds-opacity-disabled);
2080
- }
1556
+ & > * + * {
1557
+ margin-block-start: var(--bi-scale-1x);
1558
+ }
2081
1559
 
2082
- .bi-filter-group {
2083
- --bic-filter-group-background: var(--bi-basic-white);
2084
- --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
2085
- var(--bic-filter-group-background);
2086
- --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
2087
- var(--bic-filter-group-background);
2088
- --bic-filter-group-background-expanded: var(--bi-neutral-15);
2089
- --bic-filter-group-border-color: var(--bi-neutral-15);
2090
- --bic-filter-group-text-color: var(--bi-neutral-90);
2091
- --bic-filter-focus-shadow-color: var(--bi-basic-white);
2092
- --bic-filter-focus-outline-color: var(--bi-primary-50);
2093
- }
1560
+ & > legend + p {
1561
+ margin-block: var(--bi-scale-1x) 0;
1562
+ color: var(--bic-fieldset-description-color);
1563
+ font: var(--bi-font-body-large);
1564
+ }
2094
1565
 
2095
- .bi-filter-group[data-dark="true"] {
2096
- --bic-filter-group-background: var(--bi-neutral-90);
2097
- --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
2098
- var(--bic-filter-group-background);
2099
- --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
2100
- var(--bic-filter-group-background);
2101
- --bic-filter-group-background-expanded: var(--bi-neutral-80);
2102
- --bic-filter-group-border-color: var(--bi-neutral-70);
2103
- --bic-filter-group-text-color: var(--bi-basic-white);
2104
- --bic-filter-focus-shadow-color: var(--bi-neutral-95);
2105
- --bic-filter-focus-outline-color: var(--bi-primary-30);
1566
+ &:disabled > legend, &:disabled > legend + p {
1567
+ opacity: var(--ds-opacity-disabled);
1568
+ }
2106
1569
  }
2107
1570
 
2108
1571
  .bi-filter-group {
1572
+ --bic-filter-group-background: var(--bi-color-surface-subtle);
1573
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-filter-group-background);
1574
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-filter-group-background);
1575
+ --bic-filter-group-background-expanded: var(--bi-color-surface-active);
1576
+ --bic-filter-group-border-color: var(--bi-color-stroke);
1577
+ --bic-filter-group-text-color: var(--bi-color-text);
2109
1578
  flex-direction: column;
2110
1579
  display: flex;
2111
- }
2112
1580
 
2113
- .bi-filter-group > button {
2114
- border: none;
2115
- border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
2116
- height: var(--bi-scale-12x);
2117
- color: var(--bic-filter-group-text-color);
2118
- align-items: center;
2119
- gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2120
- width: 100%;
2121
- padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
2122
- background: var(--bic-filter-group-background);
2123
- cursor: pointer;
2124
- border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
2125
- -webkit-user-select: none;
2126
- user-select: none;
2127
- flex-direction: row;
2128
- display: flex;
2129
- }
2130
-
2131
- @media (hover: hover) and (pointer: fine) {
2132
- .bi-filter-group > button:hover {
2133
- background: var(--bic-filter-group-background-hover);
2134
- }
2135
- }
1581
+ & > button {
1582
+ border: none;
1583
+ border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
1584
+ height: var(--bi-scale-12x);
1585
+ color: var(--bic-filter-group-text-color);
1586
+ align-items: center;
1587
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1588
+ width: 100%;
1589
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1590
+ background: var(--bic-filter-group-background);
1591
+ cursor: pointer;
1592
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1593
+ -webkit-user-select: none;
1594
+ user-select: none;
1595
+ flex-direction: row;
1596
+ display: flex;
1597
+
1598
+ @media (hover: hover) and (pointer: fine) {
1599
+ &:hover {
1600
+ background: var(--bic-filter-group-background-hover);
1601
+ }
1602
+ }
2136
1603
 
2137
- .bi-filter-group > button:active {
2138
- background: var(--bic-filter-group-background-press);
2139
- }
1604
+ &:active {
1605
+ background: var(--bic-filter-group-background-press);
1606
+ }
2140
1607
 
2141
- .bi-filter-group > button:focus-visible {
2142
- box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
2143
- outline: 3px solid var(--bic-filter-focus-outline-color);
2144
- outline-offset: 3px;
2145
- border-radius: var(--bi-radius-small);
2146
- }
1608
+ &:focus-visible {
1609
+ box-shadow: 0 0 0 4.5px var(--bi-states-focus-background);
1610
+ outline: 3px solid var(--bi-states-focus);
1611
+ outline-offset: 3px;
1612
+ border-radius: var(--bi-radius-small);
1613
+ }
2147
1614
 
2148
- .bi-filter-group > button > svg {
2149
- width: var(--bi-scale-6x);
2150
- height: var(--bi-scale-6x);
2151
- font-size: var(--bi-icon-medium);
2152
- }
1615
+ & > svg {
1616
+ width: var(--bi-scale-6x);
1617
+ height: var(--bi-scale-6x);
1618
+ font-size: var(--bi-icon-medium);
1619
+ }
2153
1620
 
2154
- .bi-filter-group > button > h3 {
2155
- text-align: left;
2156
- font: var(--bi-font-title-bold-xs);
2157
- flex: 1;
2158
- margin: 0;
2159
- }
1621
+ & > h3 {
1622
+ text-align: left;
1623
+ font: var(--bi-font-title-bold-xs);
1624
+ flex: 1;
1625
+ margin: 0;
1626
+ }
1627
+ }
2160
1628
 
2161
- .bi-filter-group > div {
2162
- gap: var(--bi-scale-2x);
2163
- padding: var(--bi-scale-2x) 0 var(--bi-scale-8x);
2164
- flex-direction: column;
2165
- display: none;
2166
- }
1629
+ & > div {
1630
+ gap: var(--bi-scale-2x);
1631
+ padding: var(--bi-scale-2x) 0 var(--bi-scale-8x);
1632
+ flex-direction: column;
1633
+ display: none;
2167
1634
 
2168
- .bi-filter-group > div > .bi-field:has(.bi-input[type="checkbox"]) {
2169
- width: 100%;
2170
- }
1635
+ & > .bi-field:has(.bi-input[type="checkbox"]) {
1636
+ width: 100%;
1637
+ }
1638
+ }
2171
1639
 
2172
- .bi-filter-group:last-of-type > button {
2173
- border-radius: var(--bi-radius-small);
2174
- border-bottom-color: #0000;
2175
- }
1640
+ &:last-of-type {
1641
+ & > button {
1642
+ border-radius: var(--bi-radius-small);
1643
+ border-bottom-color: #0000;
1644
+ }
2176
1645
 
2177
- .bi-filter-group:last-of-type > div {
2178
- padding: var(--bi-scale-2x) 0;
2179
- }
1646
+ & > div {
1647
+ padding: var(--bi-scale-2x) 0;
1648
+ }
1649
+ }
2180
1650
 
2181
- .bi-filter-group[data-expanded="true"] {
2182
- --bic-filter-group-background: var(--bic-filter-group-background-expanded);
2183
- }
1651
+ &[data-expanded="true"] {
1652
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
2184
1653
 
2185
- .bi-filter-group[data-expanded="true"] > button {
2186
- border-radius: var(--bi-radius-small);
2187
- border-bottom-color: #0000;
2188
- }
1654
+ & > button {
1655
+ border-radius: var(--bi-radius-small);
1656
+ border-bottom-color: #0000;
1657
+ }
2189
1658
 
2190
- .bi-filter-group[data-expanded="true"] > div {
2191
- display: flex;
1659
+ & > div {
1660
+ display: flex;
1661
+ }
1662
+ }
2192
1663
  }
2193
1664
 
2194
- .bi-footer {
2195
- --bic-footer-color: var(--bi-basic-key);
2196
- --bic-footer-background: var(--bi-basic-white);
1665
+ :root, [data-color-scheme="light"] {
1666
+ --_bic-footer-aacsb-logo: url("./assets/accreditations/aacsb.svg");
1667
+ --_bic-footer-amba-logo: url("./assets/accreditations/amba.svg");
1668
+ --_bic-footer-equis-logo: url("./assets/accreditations/equis.svg");
2197
1669
  }
2198
1670
 
2199
- .bi-footer[data-dark="true"] {
2200
- --bic-footer-color: var(--bi-basic-white);
2201
- --bic-footer-background: var(--bi-primary-95);
1671
+ [data-color-scheme="dark"] {
1672
+ --_bic-footer-aacsb-logo: url("./assets/accreditations/aacsb-neg.svg");
1673
+ --_bic-footer-amba-logo: url("./assets/accreditations/amba-neg.svg");
1674
+ --_bic-footer-equis-logo: url("./assets/accreditations/equis-neg.svg");
2202
1675
  }
2203
1676
 
2204
1677
  .bi-footer {
1678
+ --bic-footer-color: var(--bi-color-neutral-text);
1679
+ --bic-footer-background: var(--bi-color-neutral-surface-subtle);
2205
1680
  width: 100%;
2206
1681
  color: var(--bic-footer-color);
2207
1682
  background-color: var(--bic-footer-background);
@@ -2215,299 +1690,255 @@ body:has(.bi-dialog:modal) {
2215
1690
  width: 100%;
2216
1691
  margin-top: -1px;
2217
1692
  display: flex;
2218
- }
2219
1693
 
2220
- .bi-footer .bi-footer--links-container {
2221
- gap: var(--bi-scale-4x) var(--bi-scale-14x);
2222
- flex-wrap: wrap;
2223
- justify-content: center;
2224
- display: flex;
2225
- }
2226
-
2227
- @media (width < 768px) {
2228
- .bi-footer .bi-footer--links-container {
2229
- flex-direction: column;
2230
- }
2231
- }
1694
+ & .bi-footer--links-container {
1695
+ gap: var(--bi-scale-4x) var(--bi-scale-14x);
1696
+ flex-wrap: wrap;
1697
+ justify-content: center;
1698
+ display: flex;
2232
1699
 
2233
- .bi-footer .bi-footer--links-container .bi-footer--links {
2234
- min-height: 44px;
2235
- font: var(--bi-font-label-large);
2236
- flex-direction: row;
2237
- justify-content: center;
2238
- align-items: center;
2239
- margin: auto;
2240
- display: flex;
2241
- }
1700
+ @media (width < 768px) {
1701
+ flex-direction: column;
1702
+ }
2242
1703
 
2243
- @media (width < 768px) {
2244
- .bi-footer .bi-footer--links-container .bi-footer--links {
2245
- flex-direction: column;
1704
+ & .bi-footer--links {
1705
+ min-height: 44px;
1706
+ font: var(--bi-font-label-large);
1707
+ flex-direction: row;
1708
+ justify-content: center;
1709
+ align-items: center;
1710
+ margin: auto;
1711
+ display: flex;
1712
+
1713
+ @media (width < 768px) {
1714
+ flex-direction: column;
1715
+ }
1716
+
1717
+ & > p {
1718
+ margin: 0 var(--bi-scale-0-50x) 0 0;
1719
+ font-weight: 300;
1720
+
1721
+ @media (width < 768px) {
1722
+ margin: var(--bi-scale-3x) 0;
1723
+ }
1724
+ }
1725
+
1726
+ & > div {
1727
+ justify-content: center;
1728
+ align-items: center;
1729
+ gap: var(--bi-scale-3x) var(--bi-scale-10x);
1730
+ white-space: nowrap;
1731
+ flex-direction: row;
1732
+ width: 100%;
1733
+ display: flex;
1734
+
1735
+ @media (width < 768px) {
1736
+ flex-direction: column;
1737
+ }
1738
+ }
1739
+ }
2246
1740
  }
2247
- }
2248
1741
 
2249
- .bi-footer .bi-footer--links-container .bi-footer--links > p {
2250
- margin: 0 var(--bi-scale-0-50x) 0 0;
2251
- font-weight: 300;
2252
- }
1742
+ & .bi-footer--accreditations {
1743
+ justify-content: center;
1744
+ align-items: center;
1745
+ gap: var(--bi-scale-12x);
1746
+ flex-wrap: wrap;
1747
+ min-height: 58px;
1748
+ display: flex;
2253
1749
 
2254
- @media (width < 768px) {
2255
- .bi-footer .bi-footer--links-container .bi-footer--links > p {
2256
- margin: var(--bi-scale-3x) 0;
2257
- }
2258
- }
1750
+ @media (width < 600px) {
1751
+ gap: var(--bi-scale-2x) var(--bi-scale-1x);
1752
+ }
2259
1753
 
2260
- .bi-footer .bi-footer--links-container .bi-footer--links > div {
2261
- justify-content: center;
2262
- align-items: center;
2263
- gap: var(--bi-scale-3x) var(--bi-scale-10x);
2264
- white-space: nowrap;
2265
- flex-direction: row;
2266
- width: 100%;
2267
- display: flex;
2268
- }
1754
+ & .bi-footer--aacsb, & .bi-footer--amba, & .bi-footer--equis {
1755
+ background-position: center;
1756
+ background-repeat: no-repeat;
1757
+ background-size: contain;
1758
+ height: 58px;
1759
+ display: block;
1760
+ }
2269
1761
 
2270
- @media (width < 768px) {
2271
- .bi-footer .bi-footer--links-container .bi-footer--links > div {
2272
- flex-direction: column;
2273
- }
2274
- }
1762
+ & .bi-footer--aacsb {
1763
+ background-image: var(--_bic-footer-aacsb-logo);
1764
+ width: 127px;
1765
+ }
2275
1766
 
2276
- .bi-footer .bi-footer--accreditations {
2277
- justify-content: center;
2278
- align-items: center;
2279
- gap: var(--bi-scale-12x);
2280
- flex-wrap: wrap;
2281
- min-height: 58px;
2282
- display: flex;
2283
- }
1767
+ & .bi-footer--amba {
1768
+ background-image: var(--_bic-footer-amba-logo);
1769
+ width: 122px;
1770
+ }
2284
1771
 
2285
- @media (width < 600px) {
2286
- .bi-footer .bi-footer--accreditations {
2287
- gap: var(--bi-scale-2x) var(--bi-scale-1x);
1772
+ & .bi-footer--equis {
1773
+ background-image: var(--_bic-footer-equis-logo);
1774
+ width: 104px;
1775
+ }
2288
1776
  }
2289
- }
2290
-
2291
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
2292
- background-position: center;
2293
- background-repeat: no-repeat;
2294
- background-size: contain;
2295
- height: 58px;
2296
- display: block;
2297
- }
2298
-
2299
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2300
- background-image: url("./assets/accreditations/aacsb.svg");
2301
- width: 127px;
2302
- }
2303
-
2304
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2305
- background-image: url("./assets/accreditations/aacsb-neg.svg");
2306
- }
2307
-
2308
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
2309
- background-image: url("./assets/accreditations/amba.svg");
2310
- width: 122px;
2311
- }
2312
-
2313
- .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2314
- background-image: url("./assets/accreditations/amba-neg.svg");
2315
- }
2316
-
2317
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
2318
- background-image: url("./assets/accreditations/equis.svg");
2319
- width: 104px;
2320
- }
2321
1777
 
2322
- .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2323
- background-image: url("./assets/accreditations/equis-neg.svg");
2324
- }
2325
-
2326
- .bi-footer .bi-footer--socials {
2327
- justify-content: center;
2328
- align-items: center;
2329
- gap: var(--bi-scale-8x);
2330
- flex-wrap: wrap;
2331
- display: flex;
2332
- }
1778
+ & .bi-footer--socials {
1779
+ justify-content: center;
1780
+ align-items: center;
1781
+ gap: var(--bi-scale-8x);
1782
+ flex-wrap: wrap;
1783
+ display: flex;
2333
1784
 
2334
- @media (width < 600px) {
2335
- .bi-footer .bi-footer--socials {
2336
- gap: var(--bi-scale-2x);
1785
+ @media (width < 600px) {
1786
+ gap: var(--bi-scale-2x);
1787
+ }
2337
1788
  }
2338
- }
2339
1789
 
2340
- .bi-footer .bi-footer--copyright {
2341
- text-align: center;
2342
- font: var(--bi-font-body-large);
2343
- font-weight: var(--bi-font-weight-regular);
2344
- margin: 0;
1790
+ & .bi-footer--copyright {
1791
+ text-align: center;
1792
+ font: var(--bi-font-body-large);
1793
+ font-weight: var(--bi-font-weight-regular);
1794
+ margin: 0;
1795
+ }
2345
1796
  }
2346
1797
 
2347
1798
  svg {
2348
1799
  --bic-icon-size: inherit;
2349
1800
  font-size: var(--bic-icon-size);
2350
1801
  display: inline-block;
2351
- }
2352
-
2353
- svg[data-size="2xl"] {
2354
- --bic-icon-size: var(--bi-icon-2xl) !important;
2355
- }
2356
1802
 
2357
- svg[data-size="xl"] {
2358
- --bic-icon-size: var(--bi-icon-xl) !important;
2359
- }
2360
-
2361
- svg[data-size="large"] {
2362
- --bic-icon-size: var(--bi-icon-large) !important;
2363
- }
1803
+ &[data-size="2xl"] {
1804
+ --bic-icon-size: var(--bi-icon-2xl) !important;
1805
+ }
2364
1806
 
2365
- svg[data-size="medium"] {
2366
- --bic-icon-size: var(--bi-icon-medium) !important;
2367
- }
1807
+ &[data-size="xl"] {
1808
+ --bic-icon-size: var(--bi-icon-xl) !important;
1809
+ }
2368
1810
 
2369
- svg[data-size="small"] {
2370
- --bic-icon-size: var(--bi-icon-small) !important;
2371
- }
1811
+ &[data-size="large"] {
1812
+ --bic-icon-size: var(--bi-icon-large) !important;
1813
+ }
2372
1814
 
2373
- svg[data-color="inherit"] {
2374
- color: inherit;
2375
- }
1815
+ &[data-size="medium"] {
1816
+ --bic-icon-size: var(--bi-icon-medium) !important;
1817
+ }
2376
1818
 
2377
- svg[data-color="primary"] {
2378
- color: #01417b;
2379
- }
1819
+ &[data-size="small"] {
1820
+ --bic-icon-size: var(--bi-icon-small) !important;
1821
+ }
2380
1822
 
2381
- svg[data-color="gray"] {
2382
- color: #1c1b1b;
2383
- }
1823
+ &[data-color="inherit"] {
1824
+ color: inherit;
1825
+ }
2384
1826
 
2385
- svg[data-color="black"] {
2386
- color: var(--bi-basic-key);
2387
- }
1827
+ &[data-color="primary"] {
1828
+ color: #01417b;
1829
+ }
2388
1830
 
2389
- svg[data-color="white"] {
2390
- color: var(--bi-basic-white);
2391
- }
1831
+ &[data-color="gray"] {
1832
+ color: #1c1b1b;
1833
+ }
2392
1834
 
2393
- .bi-label {
2394
- --bic-label-color: var(--bic-field-label-color, var(--bi-neutral-95));
2395
- --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-primary-50));
2396
- }
1835
+ &[data-color="black"] {
1836
+ color: var(--bi-basic-key);
1837
+ }
2397
1838
 
2398
- .bi-label[data-dark="true"] {
2399
- --bic-label-color: var(--bic-field-label-color, var(--bi-basic-white));
2400
- --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-secondary-50));
1839
+ &[data-color="white"] {
1840
+ color: var(--bi-basic-white);
1841
+ }
2401
1842
  }
2402
1843
 
2403
1844
  .bi-label {
1845
+ --bic-label-color: var(--bic-field-label-color, var(--bi-color-text));
1846
+ --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-states-required));
2404
1847
  color: var(--bic-label-color);
2405
1848
  font: var(--bi-font-label-medium);
2406
- }
2407
1849
 
2408
- .bi-label[data-weight="medium"] {
2409
- font-weight: var(--bi-font-weight-regular);
2410
- }
1850
+ &[data-weight="medium"] {
1851
+ font-weight: var(--bi-font-weight-regular);
1852
+ }
2411
1853
 
2412
- .bi-label[data-weight="regular"] {
2413
- font-weight: 300;
2414
- }
1854
+ &[data-weight="regular"] {
1855
+ font-weight: 300;
1856
+ }
2415
1857
 
2416
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):before {
2417
- content: "*";
2418
- color: var(--bic-label-required-color);
2419
- padding-inline-end: var(--bi-scale-0-25x);
1858
+ &:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required) {
1859
+ &:before {
1860
+ content: "*";
1861
+ color: var(--bic-label-required-color);
1862
+ padding-inline-end: var(--bi-scale-0-25x);
1863
+ }
1864
+ }
2420
1865
  }
2421
1866
 
2422
1867
  .bi-link {
2423
- --bic-link-background-active: var(--bi-primary-20);
2424
- --bic-link-color-active: var(--bi-primary-60);
2425
- --bic-link-color-hover: var(--bi-primary-60);
2426
- --bic-link-color: var(--bi-primary-50);
1868
+ --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
1869
+ --bic-link-color: var(--bi-color-primary-contrast);
2427
1870
  --bic-link-text-decoration-thickness--hover: .125em;
2428
1871
  --bic-link-text-decoration-thickness: .0625em;
2429
- --bic-link-focus-shadow-color: var(--bi-basic-white);
2430
- --bic-link-focus-outline-color: var(--bi-primary-50);
1872
+
1873
+ &[data-color] {
1874
+ --bic-link-color-hover: var(--bi-color-contrast-hover);
1875
+ --bic-link-color: var(--bi-color-contrast);
1876
+ }
1877
+
2431
1878
  color: var(--bic-link-color);
2432
1879
  text-decoration-line: underline;
2433
1880
  text-decoration-style: solid;
2434
1881
  text-decoration-thickness: var(--bic-link-text-decoration-thickness);
2435
1882
  text-underline-offset: .25em;
2436
1883
  outline: none;
2437
- }
2438
-
2439
- .bi-link :is(img, svg) {
2440
- vertical-align: middle;
2441
- }
2442
1884
 
2443
- .bi-link[data-dark="true"] {
2444
- --bic-link-background-active: var(--bi-primary-80);
2445
- --bic-link-color-active: var(--bi-primary-30);
2446
- --bic-link-color-hover: var(--bi-primary-30);
2447
- --bic-link-color: var(--bi-primary-40);
2448
- --bic-link-focus-shadow-color: var(--bi-neutral-95);
2449
- --bic-link-focus-outline-color: var(--bi-primary-30);
2450
- }
2451
-
2452
- .bi-link[data-color="neutral"] {
2453
- --bic-link-background-active: var(--bi-neutral-10);
2454
- --bic-link-color-active: var(--bi-neutral-100);
2455
- --bic-link-color-hover: var(--bi-neutral-100);
2456
- --bic-link-color: var(--bi-neutral-90);
2457
- }
2458
-
2459
- .bi-link[data-color="neutral"][data-dark="true"] {
2460
- --bic-link-background-active: var(--bi-neutral-90);
2461
- --bic-link-color-active: var(--bi-neutral-15);
2462
- --bic-link-color-hover: var(--bi-neutral-15);
2463
- --bic-link-color: var(--bi-neutral-5);
2464
- }
1885
+ & :is(img, svg) {
1886
+ vertical-align: middle;
1887
+ }
2465
1888
 
2466
- .bi-link[data-underline="hover"]:not(:hover) {
2467
- text-decoration: none;
2468
- }
1889
+ &[data-underline="hover"]:not(:hover) {
1890
+ text-decoration: none;
1891
+ }
2469
1892
 
2470
- .bi-link:visited {
2471
- color: var(--bic-link-color);
2472
- }
1893
+ &:visited {
1894
+ color: var(--bic-link-color);
1895
+ }
2473
1896
 
2474
- @media (hover: hover) and (pointer: fine) {
2475
- .bi-link:hover {
2476
- color: var(--bic-link-color-hover);
2477
- --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
1897
+ @media (hover: hover) and (pointer: fine) {
1898
+ &:hover {
1899
+ color: var(--bic-link-color-hover);
1900
+ --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
1901
+ }
2478
1902
  }
2479
- }
2480
1903
 
2481
- .bi-link:focus-visible {
2482
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
2483
- outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
2484
- outline-offset: var(--_bi--focus, 2px);
2485
- border-radius: var(--bi-radius-small);
2486
- }
1904
+ &:focus-visible {
1905
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
1906
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
1907
+ outline-offset: var(--_bi--focus, 2px);
1908
+ border-radius: var(--bi-radius-small);
1909
+ text-decoration: none;
2487
1910
 
2488
- .bi-link:focus-visible * {
2489
- --_bi--focus: ;
2490
- }
1911
+ & * {
1912
+ --_bi--focus: ;
1913
+ }
1914
+ }
2491
1915
 
2492
- .bi-link:active {
2493
- background: var(--bic-link-background-active);
2494
- color: var(--bic-link-color-active);
1916
+ &:active {
1917
+ background-color: var(--bi-states-press);
1918
+ border-radius: var(--bi-radius-small);
1919
+ }
2495
1920
  }
2496
1921
 
2497
- [data-bi-pride="true"] {
1922
+ :root, [data-color-scheme="light"] {
1923
+ --bic-logo-international-vertical: url("./assets/logos/vertical.svg");
1924
+ --bic-logo-international: url("./assets/logos/international.svg");
1925
+ --bic-logo-default: url("./assets/logos/default.svg");
2498
1926
  --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical.svg");
2499
1927
  --bic-logo-pride-international: url("./assets/logos/pride-international.svg");
2500
1928
  --bic-logo-pride-default: url("./assets/logos/pride-default.svg");
2501
- --bic-logo-pride-dark-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
2502
- --bic-logo-pride-dark-international: url("./assets/logos/pride-international-dark.svg");
2503
- --bic-logo-pride-dark-default: url("./assets/logos/pride-dark.svg");
1929
+ }
1930
+
1931
+ [data-color-scheme="dark"] {
1932
+ --bic-logo-international-vertical: url("./assets/logos/vertical-dark.svg");
1933
+ --bic-logo-international: url("./assets/logos/international-dark.svg");
1934
+ --bic-logo-default: url("./assets/logos/dark.svg");
1935
+ --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
1936
+ --bic-logo-pride-international: url("./assets/logos/pride-international-dark.svg");
1937
+ --bic-logo-pride-default: url("./assets/logos/pride-dark.svg");
2504
1938
  }
2505
1939
 
2506
1940
  .bi-logo {
2507
1941
  --bic-logo-height: var(--bi-scale-12x);
2508
- --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical, url("./assets/logos/vertical.svg"));
2509
- --bic-logo-international: var(--bic-logo-pride-international, url("./assets/logos/international.svg"));
2510
- --bic-logo-default: var(--bic-logo-pride-default, url("./assets/logos/default.svg"));
2511
1942
  height: var(--bic-logo-height);
2512
1943
  aspect-ratio: 1;
2513
1944
  background-position: center;
@@ -2515,51 +1946,49 @@ svg[data-color="white"] {
2515
1946
  background-size: contain;
2516
1947
  justify-content: center;
2517
1948
  display: flex;
2518
- }
2519
-
2520
- .bi-logo[data-dark="true"] {
2521
- --bic-logo-international-vertical: var(--bic-logo-pride-dark-international-vertical, url("./assets/logos/vertical-dark.svg"));
2522
- --bic-logo-international: var(--bic-logo-pride-dark-international, url("./assets/logos/international-dark.svg"));
2523
- --bic-logo-default: var(--bic-logo-pride-dark-default, url("./assets/logos/dark.svg"));
2524
- }
2525
1949
 
2526
- .bi-logo[data-size="xs"] {
2527
- --bic-logo-height: var(--bi-scale-6x);
2528
- }
1950
+ &[data-pride="true"] {
1951
+ --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical);
1952
+ --bic-logo-international: var(--bic-logo-pride-international);
1953
+ --bic-logo-default: var(--bic-logo-pride-default);
1954
+ }
2529
1955
 
2530
- .bi-logo[data-size="small"] {
2531
- --bic-logo-height: var(--bi-scale-8x);
2532
- }
1956
+ &[data-size="xs"] {
1957
+ --bic-logo-height: var(--bi-scale-6x);
1958
+ }
2533
1959
 
2534
- .bi-logo[data-size="medium"] {
2535
- --bic-logo-height: var(--bi-scale-11x);
2536
- }
1960
+ &[data-size="small"] {
1961
+ --bic-logo-height: var(--bi-scale-8x);
1962
+ }
2537
1963
 
2538
- .bi-logo[data-size="large"] {
2539
- --bic-logo-height: var(--bi-scale-24x);
2540
- }
1964
+ &[data-size="medium"] {
1965
+ --bic-logo-height: var(--bi-scale-11x);
1966
+ }
2541
1967
 
2542
- .bi-logo[data-size="xl"] {
2543
- --bic-logo-height: var(--bi-scale-36x);
2544
- }
1968
+ &[data-size="large"] {
1969
+ --bic-logo-height: var(--bi-scale-24x);
1970
+ }
2545
1971
 
2546
- .bi-logo[data-size="xxl"] {
2547
- --bic-logo-height: var(--bi-scale-48x);
2548
- }
1972
+ &[data-size="xl"] {
1973
+ --bic-logo-height: var(--bi-scale-36x);
1974
+ }
2549
1975
 
2550
- @media (width >= 795px) {
2551
- .bi-logo[data-international="true"][data-vertical="true"] {
2552
- background-image: var(--bic-logo-international-vertical);
2553
- aspect-ratio: .974318;
1976
+ &[data-size="xxl"] {
1977
+ --bic-logo-height: var(--bi-scale-48x);
2554
1978
  }
2555
1979
 
2556
- .bi-logo[data-international="true"] {
2557
- background-image: var(--bic-logo-international);
2558
- aspect-ratio: 2.8125;
1980
+ @media (width >= 795px) {
1981
+ &[data-international="true"] {
1982
+ &[data-vertical="true"] {
1983
+ background-image: var(--bic-logo-international-vertical);
1984
+ aspect-ratio: .974318;
1985
+ }
1986
+
1987
+ background-image: var(--bic-logo-international);
1988
+ aspect-ratio: 2.8125;
1989
+ }
2559
1990
  }
2560
- }
2561
1991
 
2562
- .bi-logo {
2563
1992
  background-image: var(--bic-logo-default);
2564
1993
  }
2565
1994
 
@@ -2574,158 +2003,156 @@ svg[data-color="white"] {
2574
2003
  }
2575
2004
 
2576
2005
  .bi-navbar {
2577
- --bic-navbar-background-color: var(--bi-basic-white);
2578
- --bic-navbar-color: var(--bi-basic-key);
2006
+ --bic-navbar-background-color: var(--bi-color-primary-surface-subtle);
2007
+ --bic-navbar-color: var(--bi-color-primary-text);
2008
+
2009
+ &[data-color] {
2010
+ --bic-navbar-background-color: var(--bi-color-surface-subtle);
2011
+ --bic-navbar-color: var(--bi-color-text);
2012
+ }
2013
+
2579
2014
  height: var(--bi-layout-navbar-height);
2580
2015
  background-color: var(--bic-navbar-background-color);
2581
2016
  width: 100%;
2582
2017
  color: var(--bic-navbar-color);
2583
2018
  display: flex;
2584
- }
2585
2019
 
2586
- .bi-navbar[data-dark="true"] {
2587
- --bic-navbar-background-color: var(--bi-primary-95);
2588
- --bic-navbar-color: var(--bi-basic-white);
2589
- }
2020
+ & > header {
2021
+ height: var(--bi-layout-navbar-height);
2022
+ align-items: center;
2023
+ gap: var(--bi-scale-6x);
2024
+ width: 100%;
2025
+ padding: 0 var(--bi-scale-6x);
2026
+ background-color: inherit;
2027
+ color: inherit;
2028
+ z-index: 130;
2029
+ display: flex;
2030
+
2031
+ @media (width < 768px) {
2032
+ padding: 0 var(--bi-scale-4x);
2033
+ }
2590
2034
 
2591
- .bi-navbar > header {
2592
- height: var(--bi-layout-navbar-height);
2593
- align-items: center;
2594
- gap: var(--bi-scale-6x);
2595
- width: 100%;
2596
- padding: 0 var(--bi-scale-6x);
2597
- background-color: inherit;
2598
- color: inherit;
2599
- z-index: 130;
2600
- display: flex;
2601
- }
2035
+ @media (prefers-reduced-motion: no-preference) {
2036
+ transition: transform .2s ease-in-out;
2037
+ }
2602
2038
 
2603
- @media (width < 768px) {
2604
- .bi-navbar > header {
2605
- padding: 0 var(--bi-scale-4x);
2039
+ & > :first-child {
2040
+ margin-right: auto;
2041
+ }
2606
2042
  }
2607
- }
2608
2043
 
2609
- @media (prefers-reduced-motion: no-preference) {
2610
- .bi-navbar > header {
2611
- transition: transform .2s ease-in-out;
2044
+ &[data-fixed="true"] {
2045
+ & > header {
2046
+ position: fixed;
2047
+ top: 0;
2048
+ left: 0;
2049
+ right: 0;
2050
+ }
2612
2051
  }
2613
- }
2614
2052
 
2615
- .bi-navbar > header > :first-child {
2616
- margin-right: auto;
2617
- }
2618
-
2619
- .bi-navbar[data-fixed="true"] > header {
2620
- position: fixed;
2621
- top: 0;
2622
- left: 0;
2623
- right: 0;
2624
- }
2625
-
2626
- .bi-navbar:not([data-fixed="true"])[data-transparent="true"] {
2627
- --bic-navbar-background-color: transparent;
2628
- height: 0;
2629
- }
2630
-
2631
- .bi-navbar[data-fixed="true"][data-transparent="true"] {
2632
- height: 0;
2633
- animation-name: bi-navbar-transparent-reveal;
2634
- animation-timing-function: linear;
2635
- animation-fill-mode: both;
2636
- animation-timeline: scroll();
2637
- animation-range: 0px var(--bi-layout-navbar-height);
2638
- }
2053
+ &:not([data-fixed="true"])[data-transparent="true"] {
2054
+ --bic-navbar-background-color: transparent;
2055
+ height: 0;
2056
+ }
2639
2057
 
2640
- @media (prefers-reduced-motion: reduce) {
2641
- .bi-navbar[data-fixed="true"][data-transparent="true"] {
2642
- animation-timing-function: step-end;
2058
+ &[data-fixed="true"][data-transparent="true"] {
2059
+ height: 0;
2060
+ animation-name: bi-navbar-transparent-reveal;
2061
+ animation-timing-function: linear;
2062
+ animation-fill-mode: both;
2063
+ animation-timeline: scroll();
2064
+ animation-range: 0px var(--bi-layout-navbar-height);
2065
+
2066
+ @media (prefers-reduced-motion: reduce) {
2067
+ animation-timing-function: step-end;
2068
+ }
2643
2069
  }
2644
2070
  }
2645
2071
 
2646
2072
  .bi-sub-navbar--wrapper {
2647
2073
  height: var(--bi-layout-navbar-height);
2648
2074
  position: relative;
2649
- }
2650
-
2651
- .bi-sub-navbar--wrapper .bi-sub-navbar {
2652
- --bic-sub-navbar-background-color: var(--bi-basic-white);
2653
- --bic-sub-navbar-color: var(--bi-basic-key);
2654
- --bic-sub-navbar-border-color: var(--bi-neutral-15);
2655
- height: var(--bi-layout-navbar-height);
2656
- background-color: var(--bic-sub-navbar-background-color);
2657
- border-bottom: 1px solid var(--bic-sub-navbar-border-color);
2658
- width: 100%;
2659
- position: absolute;
2660
- top: 0;
2661
- left: 0;
2662
- }
2663
2075
 
2664
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-dark="true"] {
2665
- --bic-sub-navbar-background-color: var(--bi-primary-95);
2666
- --bic-sub-navbar-color: var(--bi-basic-white);
2667
- --bic-sub-navbar-border-color: var(--bi-neutral-70);
2668
- }
2076
+ & .bi-sub-navbar {
2077
+ --bic-sub-navbar-background-color: var(--bi-color-primary-surface-subtle);
2078
+ --bic-sub-navbar-color: var(--bi-color-primary-text);
2079
+ --bic-sub-navbar-border-color: var(--bi-color-primary-stroke);
2669
2080
 
2670
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
2671
- z-index: 120;
2672
- position: fixed;
2673
- }
2081
+ &[data-color] {
2082
+ --bic-sub-navbar-background-color: var(--bi-color-surface-subtle);
2083
+ --bic-sub-navbar-color: var(--bi-color-text);
2084
+ --bic-sub-navbar-border-color: var(--bi-color-stroke);
2085
+ }
2674
2086
 
2675
- @media (prefers-reduced-motion: no-preference) {
2676
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
2677
- transition: top .2s ease-in-out;
2087
+ height: var(--bi-layout-navbar-height);
2088
+ background-color: var(--bic-sub-navbar-background-color);
2089
+ border-bottom: 1px solid var(--bic-sub-navbar-border-color);
2090
+ width: 100%;
2091
+ color: var(--bic-sub-navbar-color);
2092
+ position: absolute;
2093
+ top: 0;
2094
+ left: 0;
2095
+
2096
+ &[data-fixed="true"] {
2097
+ z-index: 120;
2098
+ position: fixed;
2099
+
2100
+ @media (prefers-reduced-motion: no-preference) {
2101
+ transition: top .2s ease-in-out;
2102
+ }
2103
+ }
2678
2104
  }
2679
2105
  }
2680
2106
 
2681
2107
  .bi-pagination {
2682
2108
  --bic-pagination-gap: var(--bi-scale-2x);
2683
- --bic-pagination-color: var(--bi-basic-key);
2684
- --bic-pagination-selected-background: var(--bi-primary-5);
2685
- }
2686
-
2687
- .bi-pagination[data-dark="true"] {
2688
- --bic-pagination-color: var(--bi-basic-white);
2689
- --bic-pagination-selected-background: var(--bi-primary-80);
2690
- }
2691
-
2692
- .bi-pagination :is(ol, ul) {
2693
- color: var(--bic-pagination-color);
2694
- gap: var(--bic-pagination-gap);
2695
- flex-wrap: wrap;
2696
- align-items: center;
2697
- width: fit-content;
2698
- margin: 0;
2699
- padding: 0;
2700
- list-style: none;
2701
- display: flex;
2702
- }
2703
-
2704
- .bi-pagination :is(ol, ul) > li:empty:before {
2705
- content: "...";
2706
- min-width: var(--bi-scale-11x);
2707
- text-align: center;
2708
- display: block;
2709
- }
2710
-
2711
- .bi-pagination :is(ol, ul) > li > .bi-button {
2712
- --bic-button-font-size: 1rem;
2713
- }
2714
-
2715
- .bi-pagination :is(ol, ul) > li > .bi-button[aria-current="page"] {
2716
- background-color: var(--bic-pagination-selected-background);
2109
+ --bic-pagination-color: var(--bi-color-text);
2110
+ --bic-pagination-selected-background: var(--bi-color-surface);
2111
+
2112
+ & :is(ol, ul) {
2113
+ color: var(--bic-pagination-color);
2114
+ gap: var(--bic-pagination-gap);
2115
+ flex-wrap: wrap;
2116
+ align-items: center;
2117
+ width: fit-content;
2118
+ margin: 0;
2119
+ padding: 0;
2120
+ list-style: none;
2121
+ display: flex;
2122
+
2123
+ & > li {
2124
+ &:empty:before {
2125
+ content: "...";
2126
+ min-width: var(--bi-scale-11x);
2127
+ text-align: center;
2128
+ display: block;
2129
+ }
2130
+
2131
+ & > .bi-button {
2132
+ --bic-button-font-size: 1rem;
2133
+
2134
+ &[aria-current="page"] {
2135
+ background-color: var(--bic-pagination-selected-background);
2136
+ }
2137
+ }
2138
+ }
2139
+ }
2717
2140
  }
2718
2141
 
2719
- .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2720
- color: var(--bi-primary-50);
2721
- }
2142
+ .bi-search {
2143
+ &:has(:focus-visible) {
2144
+ & .bi-field--affix:first-child {
2145
+ color: var(--bi-states-focus);
2146
+ }
2147
+ }
2722
2148
 
2723
- .bi-search .bi-field--affix:last-child {
2724
- --bic-field-padding-inline: 0;
2725
- }
2149
+ & .bi-field--affix:last-child {
2150
+ --bic-field-padding-inline: 0;
2151
+ }
2726
2152
 
2727
- .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
2728
- display: none;
2153
+ &:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
2154
+ display: none;
2155
+ }
2729
2156
  }
2730
2157
 
2731
2158
  .bi-skip-link {
@@ -2744,20 +2171,18 @@ svg[data-color="white"] {
2744
2171
  position: absolute;
2745
2172
  left: 50%;
2746
2173
  transform: translate(-50%, -110%);
2747
- }
2748
2174
 
2749
- @media (prefers-reduced-motion: reduce) {
2750
- .bi-skip-link {
2175
+ @media (prefers-reduced-motion: reduce) {
2751
2176
  transition: none;
2752
2177
  }
2753
- }
2754
2178
 
2755
- .bi-skip-link:focus {
2756
- transform: translate(-50%, var(--bi-scale-2x));
2757
- border-radius: var(--bi-radius-medium);
2758
- outline-offset: 2px;
2759
- outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
2760
- box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2179
+ &:focus {
2180
+ transform: translate(-50%, var(--bi-scale-2x));
2181
+ border-radius: var(--bi-radius-medium);
2182
+ outline-offset: 2px;
2183
+ outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
2184
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2185
+ }
2761
2186
  }
2762
2187
 
2763
2188
  .bi-spinner {
@@ -2770,42 +2195,39 @@ svg[data-color="white"] {
2770
2195
  height: 1em;
2771
2196
  animation: 1s linear infinite bi-spinner;
2772
2197
  display: inline-block;
2773
- -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
2774
2198
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
2775
- }
2776
2199
 
2777
- @media (prefers-reduced-motion: reduce) {
2778
- .bi-spinner {
2200
+ @media (prefers-reduced-motion: reduce) {
2779
2201
  animation-duration: 6s;
2780
2202
  }
2781
- }
2782
2203
 
2783
- .bi-spinner[data-color="inherit"] {
2784
- --bic-spinner-color: currentColor;
2785
- }
2204
+ &[data-color="inherit"] {
2205
+ --bic-spinner-color: currentColor;
2206
+ }
2786
2207
 
2787
- .bi-spinner[data-color="black"] {
2788
- --bic-spinner-color: var(--bi-basic-key);
2789
- }
2208
+ &[data-color="black"] {
2209
+ --bic-spinner-color: var(--bi-basic-key);
2210
+ }
2790
2211
 
2791
- .bi-spinner[data-size="2xl"] {
2792
- font-size: var(--bi-scale-12x);
2793
- }
2212
+ &[data-size="2xl"] {
2213
+ font-size: var(--bi-scale-12x);
2214
+ }
2794
2215
 
2795
- .bi-spinner[data-size="xl"] {
2796
- font-size: var(--bi-scale-10x);
2797
- }
2216
+ &[data-size="xl"] {
2217
+ font-size: var(--bi-scale-10x);
2218
+ }
2798
2219
 
2799
- .bi-spinner[data-size="large"] {
2800
- font-size: var(--bi-scale-8x);
2801
- }
2220
+ &[data-size="large"] {
2221
+ font-size: var(--bi-scale-8x);
2222
+ }
2802
2223
 
2803
- .bi-spinner[data-size="medium"] {
2804
- font-size: var(--bi-scale-6x);
2805
- }
2224
+ &[data-size="medium"] {
2225
+ font-size: var(--bi-scale-6x);
2226
+ }
2806
2227
 
2807
- .bi-spinner[data-size="small"] {
2808
- font-size: var(--bi-scale-5x);
2228
+ &[data-size="small"] {
2229
+ font-size: var(--bi-scale-5x);
2230
+ }
2809
2231
  }
2810
2232
 
2811
2233
  @keyframes bi-spinner {
@@ -2817,151 +2239,133 @@ svg[data-color="white"] {
2817
2239
  .bi-sticky-header {
2818
2240
  z-index: 100;
2819
2241
  position: sticky;
2820
- }
2821
2242
 
2822
- @media (prefers-reduced-motion: no-preference) {
2823
- .bi-sticky-header {
2243
+ @media (prefers-reduced-motion: no-preference) {
2824
2244
  transition: top .2s ease-in-out;
2825
2245
  }
2826
2246
  }
2827
2247
 
2828
2248
  .bi-tabs {
2829
- --bic-tabs-tab-color: var(--bi-neutral-90);
2830
- --bic-tabs-tab-color-selected: var(--bi-primary-50);
2831
- --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
2832
- --bic-tabs-tab-background-press: var(--bi-states-press-dark);
2249
+ --bic-tabs-tab-color: var(--bi-color-text);
2250
+ --bic-tabs-tab-color-selected: var(--bi-color-contrast);
2251
+ --bic-tabs-tab-background-hover: var(--bi-states-hover);
2252
+ --bic-tabs-tab-background-press: var(--bi-states-press);
2833
2253
  --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
2834
2254
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
2835
- --bic-tabs-focus-shadow-color: var(--bi-basic-white);
2836
- --bic-tabs-focus-outline-color: var(--bi-primary-50);
2837
- }
2838
-
2839
- .bi-tabs[data-dark="true"] {
2840
- --bic-tabs-tab-color: var(--bi-neutral-5);
2841
- --bic-tabs-tab-color-selected: var(--bi-primary-30);
2842
- --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
2843
- --bic-tabs-tab-background-press: var(--bi-states-press-light);
2844
- --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
2845
- --bic-tabs-focus-outline-color: var(--bi-primary-30);
2846
- }
2847
-
2848
- .bi-tabs {
2849
2255
  flex-direction: column;
2850
2256
  display: flex;
2851
2257
  overflow: hidden;
2852
- }
2853
-
2854
- .bi-tabs :is([role="tablist"], ds-tablist, nav) {
2855
- scrollbar-width: none;
2856
- flex-direction: row;
2857
- flex-shrink: 0;
2858
- position: relative;
2859
- overflow-x: auto;
2860
- }
2861
-
2862
- .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
2863
- display: flex;
2864
- }
2865
-
2866
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
2867
- font: var(--bic-tabs-tab-font);
2868
- border-radius: var(--bi-radius-medium);
2869
- box-sizing: border-box;
2870
- color: var(--bic-tabs-tab-color);
2871
- cursor: pointer;
2872
- align-items: center;
2873
- gap: var(--bi-scale-1x);
2874
- padding: .625rem var(--bi-scale-6x);
2875
- text-align: center;
2876
- white-space: nowrap;
2877
- background: none;
2878
- border: 0;
2879
- flex-direction: row;
2880
- justify-content: center;
2881
- margin: 0;
2882
- line-height: 1.5;
2883
- text-decoration: none;
2884
- transition: color .2s ease-in-out;
2885
- position: relative;
2886
- }
2887
-
2888
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
2889
- display: flex;
2890
- }
2891
-
2892
- @media (hover: hover) and (pointer: fine) {
2893
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
2894
- background: var(--bic-tabs-tab-background-hover);
2895
- }
2896
- }
2897
-
2898
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
2899
- background: var(--bic-tabs-tab-background-press);
2900
- }
2901
-
2902
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
2903
- border-bottom-right-radius: 0;
2904
- border-bottom-left-radius: 0;
2905
- }
2906
-
2907
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
2908
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
2909
- outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
2910
- outline-offset: var(--_bi--focus, -3px);
2911
- }
2912
-
2913
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
2914
- bottom: 3px;
2915
- }
2916
2258
 
2917
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
2918
- font-size: var(--bi-icon-medium);
2919
- flex-shrink: 0;
2920
- }
2259
+ & :is([role="tablist"], ds-tablist, nav) {
2260
+ scrollbar-width: none;
2261
+ flex-direction: row;
2262
+ flex-shrink: 0;
2263
+ position: relative;
2264
+ overflow-x: auto;
2921
2265
 
2922
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
2923
- background: var(--bic-tabs-tab-color-selected);
2924
- content: "";
2925
- border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
2926
- width: 0;
2927
- height: 3px;
2928
- transition: width .2s ease-in-out;
2929
- display: block;
2930
- position: absolute;
2931
- bottom: 0;
2932
- left: 50%;
2933
- transform: translateX(-50%);
2934
- }
2266
+ &:not([hidden]) {
2267
+ display: flex;
2268
+ }
2935
2269
 
2936
- @media (prefers-reduced-motion: reduce) {
2937
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
2938
- transition: none;
2270
+ & > :is([role="tab"], ds-tab, a) {
2271
+ font: var(--bic-tabs-tab-font);
2272
+ border-radius: var(--bi-radius-medium);
2273
+ box-sizing: border-box;
2274
+ color: var(--bic-tabs-tab-color);
2275
+ cursor: pointer;
2276
+ align-items: center;
2277
+ gap: var(--bi-scale-1x);
2278
+ padding: .625rem var(--bi-scale-6x);
2279
+ text-align: center;
2280
+ white-space: nowrap;
2281
+ background: none;
2282
+ border: 0;
2283
+ flex-direction: row;
2284
+ justify-content: center;
2285
+ margin: 0;
2286
+ line-height: 1.5;
2287
+ text-decoration: none;
2288
+ transition: color .2s ease-in-out;
2289
+ position: relative;
2290
+
2291
+ &:not([hidden]) {
2292
+ display: flex;
2293
+ }
2294
+
2295
+ @media (hover: hover) and (pointer: fine) {
2296
+ &:hover {
2297
+ background: var(--bic-tabs-tab-background-hover);
2298
+ }
2299
+ }
2300
+
2301
+ &:active {
2302
+ background: var(--bic-tabs-tab-background-press);
2303
+ }
2304
+
2305
+ &:not(:focus-visible) {
2306
+ border-bottom-right-radius: 0;
2307
+ border-bottom-left-radius: 0;
2308
+ }
2309
+
2310
+ &:focus-visible {
2311
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-states-focus-background));
2312
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
2313
+ outline-offset: var(--_bi--focus, -3px);
2314
+
2315
+ &:after {
2316
+ bottom: 3px;
2317
+ }
2318
+ }
2319
+
2320
+ & :where(img, svg) {
2321
+ font-size: var(--bi-icon-medium);
2322
+ flex-shrink: 0;
2323
+ }
2324
+
2325
+ &:after {
2326
+ background: var(--bic-tabs-tab-color-selected);
2327
+ content: "";
2328
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
2329
+ width: 0;
2330
+ height: 3px;
2331
+ transition: width .2s ease-in-out;
2332
+ display: block;
2333
+ position: absolute;
2334
+ bottom: 0;
2335
+ left: 50%;
2336
+ transform: translateX(-50%);
2337
+ }
2338
+
2339
+ @media (prefers-reduced-motion: reduce) {
2340
+ transition: none;
2341
+
2342
+ &:after {
2343
+ transition: none;
2344
+ }
2345
+ }
2346
+
2347
+ &[aria-selected="true"], &[aria-current="page"] {
2348
+ color: var(--bic-tabs-tab-color-selected);
2349
+
2350
+ &:after {
2351
+ width: calc(100% - var(--bi-scale-6x));
2352
+ }
2353
+ }
2354
+ }
2939
2355
  }
2940
2356
 
2941
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
2942
- transition: none;
2357
+ & :is([role="tabpanel"], ds-tabpanel) {
2358
+ padding: var(--bic-tabs-panel-padding);
2359
+ color: var(--bi-color-text);
2360
+ outline: none;
2361
+ flex-grow: 1;
2943
2362
  }
2944
2363
  }
2945
2364
 
2946
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
2947
- color: var(--bic-tabs-tab-color-selected);
2948
- }
2949
-
2950
- :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
2951
- width: calc(100% - var(--bi-scale-6x));
2952
- }
2953
-
2954
- .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
2955
- padding: var(--bic-tabs-panel-padding);
2956
- color: var(--bic-tabs-tab-color);
2957
- outline: none;
2958
- flex-grow: 1;
2959
- }
2960
-
2961
2365
  .bi-tooltip {
2962
2366
  --_ds-floating: var(--bic-tooltip-placement);
2963
- --bic-tooltip-background: var(--bi-neutral-85);
2964
- --bic-tooltip-color: var(--bi-neutral-0);
2367
+ --bic-tooltip-background: var(--bi-color-surface);
2368
+ --bic-tooltip-color: var(--bi-color-text);
2965
2369
  --bic-tooltip-border-radius: var(--bi-radius-medium);
2966
2370
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
2967
2371
  --bic-tooltip-shift-size: var(--bi-scale-2x);
@@ -2978,42 +2382,42 @@ svg[data-color="white"] {
2978
2382
  position: absolute;
2979
2383
  inset: 0 auto auto 0;
2980
2384
  overflow: visible;
2981
- }
2982
2385
 
2983
- .bi-tooltip:after {
2984
- content: "";
2985
- box-sizing: border-box;
2986
- width: 0;
2987
- height: 0;
2988
- position: absolute;
2989
- top: 100%;
2990
- left: 50%;
2991
- }
2386
+ &:after {
2387
+ content: "";
2388
+ box-sizing: border-box;
2389
+ width: 0;
2390
+ height: 0;
2391
+ position: absolute;
2392
+ top: 100%;
2393
+ left: 50%;
2394
+ }
2992
2395
 
2993
- .bi-tooltip[data-floating="top"]:after, .bi-tooltip[data-floating="bottom"]:after {
2994
- width: 100%;
2995
- height: var(--bic-tooltip-shift-size);
2996
- top: 100%;
2997
- left: 0;
2998
- }
2396
+ &[data-floating="top"]:after, &[data-floating="bottom"]:after {
2397
+ width: 100%;
2398
+ height: var(--bic-tooltip-shift-size);
2399
+ top: 100%;
2400
+ left: 0;
2401
+ }
2999
2402
 
3000
- .bi-tooltip[data-floating="left"]:after, .bi-tooltip[data-floating="right"]:after {
3001
- width: var(--bic-tooltip-shift-size);
3002
- height: 100%;
3003
- top: 0;
3004
- left: 100%;
3005
- }
2403
+ &[data-floating="left"]:after, &[data-floating="right"]:after {
2404
+ width: var(--bic-tooltip-shift-size);
2405
+ height: 100%;
2406
+ top: 0;
2407
+ left: 100%;
2408
+ }
3006
2409
 
3007
- .bi-tooltip[data-floating="bottom"]:after {
3008
- top: calc(var(--bic-tooltip-shift-size) * -1);
3009
- }
2410
+ &[data-floating="bottom"]:after {
2411
+ top: calc(var(--bic-tooltip-shift-size) * -1);
2412
+ }
3010
2413
 
3011
- .bi-tooltip[data-floating="right"]:after {
3012
- left: calc(var(--bic-tooltip-shift-size) * -1);
3013
- }
2414
+ &[data-floating="right"]:after {
2415
+ left: calc(var(--bic-tooltip-shift-size) * -1);
2416
+ }
3014
2417
 
3015
- .bi-tooltip:not([popover]) {
3016
- display: none;
2418
+ &:not([popover]) {
2419
+ display: none;
2420
+ }
3017
2421
  }
3018
2422
 
3019
2423
  @keyframes bi-tooltip-fade-in {
@@ -3025,8 +2429,8 @@ svg[data-color="white"] {
3025
2429
  .bi-validation-message {
3026
2430
  --bic-validation-message-icon-size: var(--bi-icon-small);
3027
2431
  --bic-validation-message-padding: var(--bi-scale-2x);
3028
- --bic-validation-message-background: var(--bi-alert-10);
3029
- --bic-validation-message-color: var(--bi-alert-95);
2432
+ --bic-validation-message-background: var(--bi-color-alert-surface);
2433
+ --bic-validation-message-color: var(--bi-color-alert-text);
3030
2434
  color: var(--bic-validation-message-color);
3031
2435
  padding: var(--bic-validation-message-padding);
3032
2436
  background: var(--bic-validation-message-background);
@@ -3034,47 +2438,57 @@ svg[data-color="white"] {
3034
2438
  font: var(--bi-font-label-medium);
3035
2439
  margin: 0;
3036
2440
  position: relative;
3037
- }
3038
2441
 
3039
- .bi-validation-message:has( > svg) {
3040
- padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3041
- }
2442
+ &:has( > svg) {
2443
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2444
+ }
3042
2445
 
3043
- .bi-validation-message > svg {
3044
- font-size: var(--bic-validation-message-icon-size);
3045
- top: var(--bic-validation-message-padding);
3046
- left: var(--bic-validation-message-padding);
3047
- position: absolute;
2446
+ & > svg {
2447
+ font-size: var(--bic-validation-message-icon-size);
2448
+ top: var(--bic-validation-message-padding);
2449
+ left: var(--bic-validation-message-padding);
2450
+ position: absolute;
2451
+ }
3048
2452
  }
3049
2453
 
3050
- :is(html:has(.bi-navbar), html:has(.bi-sub-navbar)) {
3051
- scroll-padding-top: var(--bi-layout-navbar-height);
3052
- }
2454
+ html {
2455
+ &:has(.bi-navbar), &:has(.bi-sub-navbar) {
2456
+ scroll-padding-top: var(--bi-layout-navbar-height);
2457
+ }
3053
2458
 
3054
- html .bi-sticky-header {
3055
- top: 0;
3056
- }
2459
+ & .bi-sticky-header {
2460
+ top: 0;
2461
+ }
3057
2462
 
3058
- html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
3059
- top: var(--bi-layout-navbar-height);
3060
- }
2463
+ &:has(.bi-navbar[data-fixed="true"]) {
2464
+ & .bi-sticky-header {
2465
+ top: var(--bi-layout-navbar-height);
2466
+ }
2467
+ }
3061
2468
 
3062
- html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
3063
- transform: translateY(-100%);
3064
- }
2469
+ &:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) {
2470
+ & .bi-navbar > header {
2471
+ transform: translateY(-100%);
2472
+ }
3065
2473
 
3066
- html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
3067
- top: 0;
3068
- }
2474
+ & .bi-sub-navbar {
2475
+ top: 0;
2476
+ }
2477
+ }
3069
2478
 
3070
- html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
3071
- transform: translateY(0);
3072
- }
2479
+ &:has(.bi-navbar[data-fixed="true"]) {
2480
+ &:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) {
2481
+ & .bi-navbar > header {
2482
+ transform: translateY(0);
2483
+ }
3073
2484
 
3074
- html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
3075
- top: var(--bi-layout-navbar-height);
3076
- }
2485
+ & .bi-sub-navbar {
2486
+ top: var(--bi-layout-navbar-height);
2487
+ }
3077
2488
 
3078
- html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
3079
- top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
2489
+ & .bi-sticky-header {
2490
+ top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
2491
+ }
2492
+ }
2493
+ }
3080
2494
  }