@planningcenter/tapestry 3.0.0-rc.1 → 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/index.css +81 -78
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/reactRender.css +1070 -1067
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +1070 -1067
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/tokens-dark.css +2 -0
  10. package/dist/tokens-dark.css.map +1 -0
  11. package/dist/tokens-dark.js +1 -0
  12. package/dist/tokens-deprecated.css +82 -0
  13. package/dist/tokens-deprecated.css.map +1 -0
  14. package/dist/tokens-deprecated.d.ts +2 -0
  15. package/dist/tokens-deprecated.d.ts.map +1 -0
  16. package/dist/tokens-deprecated.js +1 -0
  17. package/dist/tokens.css +0 -78
  18. package/dist/tokens.css.map +1 -1
  19. package/dist/tokens.d.ts +3 -2
  20. package/dist/tokens.d.ts.map +1 -1
  21. package/dist/unstable.css +81 -78
  22. package/dist/unstable.css.map +1 -1
  23. package/package.json +2 -2
  24. package/dist/deprecated.css +0 -84
  25. package/dist/tokens-dark-combined.js +0 -3
package/dist/reactRender.css CHANGED
@@ -1,629 +1,5 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical{
4
- tds-page-header:not(.hydrated){
5
- display:none;
6
- }
7
- }
8
-
9
- @layer t-component{
10
- .tds-page-header{
11
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
12
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
13
- --tds-page-header-color:var(--t-text-color-default-primary);
14
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
15
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
16
- --tds-page-header-padding-x:var(--t-spacing-2);
17
- --tds-page-header-padding-y:var(--t-spacing-2);
18
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
19
- --tds-page-header-nav-gap:var(--t-spacing-1);
20
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
21
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
22
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
23
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
24
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
25
- --tds-page-header-nav-item-border-width:1px;
26
-
27
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
28
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
29
-
30
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
31
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
32
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
33
-
34
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
35
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
36
-
37
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
38
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
39
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
-
41
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
42
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
43
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
45
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
46
- }
47
-
48
- .tds-page-header--profile{
49
- --tds-page-header-padding-y:20px;
50
- }
51
- @media (min-width: 600px){
52
- .tds-page-header{
53
- --tds-page-header-background-color:var(--t-surface-color-canvas);
54
- --tds-page-header-color:var(--t-text-color-default-secondary);
55
- --tds-page-header-padding-x:var(--t-spacing-3);
56
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
57
- --tds-page-header-nav-gap:var(--t-spacing-half);
58
- --tds-page-header-nav-background:transparent;
59
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
60
- --tds-page-header-nav-item-border-width:1px;
61
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
62
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
63
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
64
- }
65
- }
66
- }
67
-
68
- .tds-page-header{
69
- display:flex;
70
- flex-direction:column;
71
- padding-top:var(--tds-page-header-padding-y);
72
- color:var(--tds-page-header-color);
73
- background:var(--tds-page-header-background-color);
74
- border-bottom:1px solid var(--t-border-color-default-base);
75
- }
76
-
77
- .tds-page-header:not(.has-nav){
78
- padding-bottom:var(--tds-page-header-padding-y);
79
- }
80
-
81
- .tds-page-header.inactive{
82
- background:var(--tds-page-header-background-color-inactive);
83
- }
84
-
85
- .tds-page-header__title-bar{
86
- display:flex;
87
- flex-direction:column;
88
- gap:var(--t-spacing-2) var(--t-spacing-1);
89
- align-items:flex-start;
90
- justify-content:space-between;
91
- padding:0 var(--tds-page-header-padding-x);
92
- }
93
-
94
- .tds-page-header--profile > .tds-page-header__title-bar{
95
- align-items:center;
96
- }
97
-
98
- .tds-page-header__primary{
99
- width:100%;
100
- }
101
-
102
- .tds-page-header__primary h1{
103
- margin:0;
104
- font-size:var(--tds-page-header-headline-font-size);
105
- font-weight:var(--t-font-weight-normal);
106
- line-height:32px;
107
- color:var(--tds-page-header-headline-color);
108
- overflow-wrap:break-word;
109
- }
110
-
111
- .tds-page-header [slot="actions"]{
112
- width:100%;
113
- }
114
-
115
- .has-multi-actions.tds-page-header [slot="actions"],
116
- .has-multi-actions.tds-page-header .tds-page-header__actions{
117
- display:flex;
118
- flex-flow:row wrap;
119
- gap:var(--t-spacing-half) var(--t-spacing-1);
120
- align-items:flex-start;
121
- justify-content:flex-start;
122
- min-width:0;
123
- }
124
-
125
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
126
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
127
- .tds-page-header nav[slot="navigation"] ul,
128
- .tds-page-header nav.tds-page-header__nav ul{
129
- display:flex;
130
- gap:var(--tds-page-header-nav-gap);
131
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
132
- margin:0 0 -1px;
133
- overflow:auto;
134
- list-style:none;
135
- background:var(--tds-page-header-nav-background);
136
- }
137
-
138
- .tds-page-header nav[slot="navigation"] a,
139
- .tds-page-header nav[slot="navigation"] button,
140
- .tds-page-header nav.tds-page-header__nav a,
141
- .tds-page-header nav.tds-page-header__nav button{
142
- position:relative;
143
- display:inline-flex;
144
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
145
- font-size:var(--t-font-size-sm);
146
- line-height:22px;
147
- color:var(--tds-page-header-nav-item-color);
148
- white-space:nowrap;
149
- text-decoration:none;
150
- -webkit-appearance:none;
151
- -moz-appearance:none;
152
- appearance:none;
153
- cursor:pointer;
154
- outline-offset:-2px;
155
- background-color:var(--tds-page-header-nav-item-background-color);
156
- background-clip:padding-box;
157
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
158
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
159
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
160
- }
161
-
162
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
163
- position:relative;
164
- }
165
-
166
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
167
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
168
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
169
- }
170
-
171
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
172
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
173
- position:absolute;
174
- top:-5px;
175
- right:-2px;
176
- width:10px;
177
- height:10px;
178
- content:"";
179
- background:var(--tds-page-header-nav-item-indicator-color);
180
- border-radius:50%;
181
- }
182
-
183
- @media (prefers-reduced-motion: no-preference){
184
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
185
- animation:indicator-pulse 1.25s ease infinite;
186
- }
187
- }
188
-
189
- .tds-page-header nav[slot="navigation"] a.selected,
190
- .tds-page-header nav[slot="navigation"] button.selected,
191
- .tds-page-header nav.tds-page-header__nav a.selected,
192
- .tds-page-header nav.tds-page-header__nav button.selected{
193
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
194
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
195
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
196
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
197
- }
198
-
199
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
200
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
201
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
202
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
203
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
204
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
205
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
206
- }
207
-
208
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
209
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
210
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
211
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
212
- background-color:var(--tds-page-header-nav-item-background-color-active);
213
- }
214
-
215
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
216
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
217
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
218
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
219
- color:var(--tds-page-header-nav-item-color-disabled);
220
- cursor:not-allowed;
221
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
222
- opacity:1;
223
- }
224
-
225
- @media (min-width: 960px){
226
- .tds-page-header__primary{
227
- flex:1 1 max-content;
228
- width:auto;
229
- min-width:0;
230
- max-width:100%;
231
- }
232
-
233
- .tds-page-header__title-bar,
234
- .tds-page-header--profile .tds-page-header__title-bar{
235
- flex-flow:row nowrap;
236
- row-gap:12px;
237
- align-items:flex-start;
238
- }
239
-
240
- .tds-page-header [slot="actions"]{
241
- width:auto;
242
- }
243
-
244
- .has-multi-actions.tds-page-header [slot="actions"],
245
- .has-multi-actions.tds-page-header .tds-page-header__actions{
246
- justify-content:flex-end;
247
- }
248
- }
249
-
250
- .tds-page-header-phone,
251
- .tds-page-header-email{
252
- color:var(--tds-page-header-color);
253
- white-space:nowrap;
254
- }
255
-
256
- .tds-page-header-email{
257
- max-width:100%;
258
- overflow:hidden;
259
- text-overflow:ellipsis;
260
- }
261
-
262
- @keyframes indicator-pulse{
263
- 0%{
264
- opacity:.3;
265
- transform:scale(.9);
266
- }
267
-
268
- 100%{
269
- opacity:0;
270
- transform:scale(1.75);
271
- }
272
- }
273
-
274
-
275
- @media (prefers-reduced-motion: no-preference){
276
-
277
- :root{
278
- interpolate-size:allow-keywords;
279
- }
280
- }
281
-
282
- @layer tds-component{
283
- tds-sidenav, .tds-sidenav{
284
- --tds-sidenav-indent:12px;
285
- --tds-sidenav-item-depth:0;
286
-
287
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
288
-
289
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
290
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
291
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
292
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
293
-
294
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
295
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
296
- --tds-sidenav-item-nested-background-selected:transparent;
297
-
298
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
299
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
300
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
301
-
302
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
303
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
304
- }
305
-
306
- .tds-sidenav--theme-gray{
307
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
308
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
309
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
310
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
311
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
312
- }
313
- }
314
-
315
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
316
- display:flex;
317
- }
318
-
319
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
320
- flex-direction:column;
321
- gap:var(--t-spacing-half);
322
- width:100%;
323
- }
324
-
325
- .tds-sidenav-section-list{
326
- width:100%;
327
- padding:0;
328
- margin:0;
329
- list-style:none;
330
- }
331
-
332
- .tds-sidenav-section-header{
333
- display:flex;
334
- align-items:baseline;
335
- justify-content:space-between;
336
- padding-top:var(--t-spacing-2);
337
- }
338
-
339
- .tds-sidenav-section-header h2{
340
- margin:0;
341
- font-size:var(--t-font-size-sm);
342
- font-weight:var(--t-font-weight-semibold);
343
- line-height:1.35;
344
- color:var(--t-text-color-default-secondary);
345
- text-transform:uppercase;
346
- }
347
-
348
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
349
- padding-top:0;
350
- }
351
-
352
- .tds-sidenav-section-header [slot="label-actions"]{
353
- display:flex;
354
- gap:var(--t-spacing-half);
355
- align-items:center;
356
- }
357
-
358
- .tds-sidenav-section [slot="section-actions"]{
359
- display:flex;
360
- gap:12px;
361
- align-items:center;
362
- min-height:42px;
363
- padding:var(--t-spacing-1) 0;
364
- }
365
-
366
- .tds-sidenav-section-list,
367
- .tds-sidenav-item{
368
- width:100%;
369
- padding:0;
370
- margin:0;
371
- }
372
-
373
- .tds-sidenav-item :is(a,button){
374
- position:relative;
375
- display:flex;
376
- gap:12px;
377
- align-items:center;
378
- width:100%;
379
- padding:12px;
380
- overflow:hidden;
381
- font-size:var(--t-font-size-sm);
382
- line-height:18px;
383
- color:var(--t-text-color-default-headline);
384
- white-space:nowrap;
385
- text-decoration:none;
386
- -webkit-appearance:none;
387
- -moz-appearance:none;
388
- appearance:none;
389
- cursor:pointer;
390
- background-color:var(--tds-sidenav-item-background, transparent);
391
- border:0;
392
- border-radius:var(--t-border-radius-default);
393
- transition:var(--tds-sidenav-item-transition);
394
- }
395
-
396
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
397
- display:block;
398
- flex:1;
399
- overflow:hidden;
400
- text-overflow:ellipsis;
401
- text-align:left;
402
- white-space:nowrap;
403
- }
404
-
405
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
406
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
407
- color:var(--t-text-color-default-headline);
408
- text-decoration:none;
409
- }
410
-
411
- :is(.tds-sidenav-item :is(a,button)):active{
412
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
413
- }
414
-
415
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
416
- overflow:hidden;
417
- color:var(--tds-sidenav-item-icon-color);
418
- }
419
-
420
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
421
- display:block;
422
- width:var(--tds-sidenav-item-icon-size);
423
- height:var(--tds-sidenav-item-icon-size);
424
- }
425
-
426
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
427
- --tds-sidenav-indent:19px;
428
- }
429
-
430
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
431
- visibility:visible;
432
- block-size:auto;
433
- opacity:1;
434
- }
435
-
436
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
437
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
438
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
439
-
440
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
441
- font-weight:var(--t-font-weight-semibold);
442
- }
443
-
444
- .tds-sidenav-item:has(.tds-sidenav-section){
445
- display:flex;
446
- flex-direction:column;
447
- gap:var(--t-spacing-half);
448
- }
449
-
450
- .tds-sidenav-item .tds-sidenav-section-list{
451
- --tds-sidenav-item-depth:1;
452
- gap:0;
453
- }
454
-
455
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
456
- visibility:hidden;
457
- block-size:0;
458
- overflow-y:clip;
459
- opacity:0;
460
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
461
- }
462
-
463
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
464
- --tds-sidenav-item-depth:2;
465
- }
466
-
467
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
468
- min-height:var(--t-element-size-2xl);
469
- padding-block:9px;
470
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
471
- line-height:1;
472
- background-color:transparent;
473
- }
474
-
475
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
476
- position:absolute;
477
- top:0;
478
- bottom:0;
479
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
480
- width:2px;
481
- content:"";
482
- background-color:var(--tds-sidenav-item-nested-border-color);
483
- transition:var(--tds-sidenav-item-transition);
484
- }
485
-
486
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
487
- position:absolute;
488
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
489
- z-index:-1;
490
- height:100%;
491
- content:"";
492
- background-color:var(--tds-sidenav-item-nested-background);
493
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
494
- transition:var(--tds-sidenav-item-transition);
495
- }
496
-
497
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
498
- display:block;
499
- text-align:left;
500
- white-space:normal;
501
- }
502
-
503
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
504
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
505
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
506
- }
507
-
508
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
509
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
510
- }
511
-
512
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
513
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
514
- font-weight:var(--t-font-weight-medium);
515
- }
516
-
517
- .tds-sidenav-responsive-header{
518
- display:flex;
519
- gap:var(--t-spacing-2);
520
- align-items:center;
521
- width:100%;
522
- }
523
-
524
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
525
- order:0;
526
- }
527
-
528
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
529
- flex:1;
530
- order:1;
531
- margin:0;
532
- font-size:var(--t-font-size-lg);
533
- font-weight:var(--t-font-weight-medium);
534
- color:var(--t-text-color-default-headline);
535
- }
536
-
537
- @media (max-width: 719px){
538
- .tds-sidenav-collapse{
539
- z-index:10001;
540
- display:none;
541
- max-width:min(448px, calc(100vw - 48px));
542
- padding:0;
543
- margin:12px 0;
544
- overflow:hidden;
545
- outline:0;
546
- background:var(--t-surface-color-card);
547
- border:0;
548
- border-radius:6px;
549
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
550
- will-change:transform;
551
- position-area:bottom span-right;
552
- }
553
-
554
- .tds-sidenav-scroll-container{
555
- --webkit-overflow-scrolling:touch;
556
- display:block;
557
- width:100%;
558
- height:-moz-fit-content;
559
- height:fit-content;
560
- padding:var(--t-spacing-2);
561
- overflow-y:auto;
562
- }
563
-
564
- .tds-sidenav-item :is(a, button) :is(.prefix){
565
- display:none;
566
- }
567
- @supports selector(:popover-open){
568
- .tds-sidenav-collapse:popover-open{
569
- display:flex;
570
- }
571
- }
572
- @supports not selector(:popover-open){
573
- .tds-sidenav-collapse.\:popover-open{
574
- display:flex;
575
- }
576
- }
577
- }
578
-
579
- @media (min-width: 720px){
580
- .tds-sidenav-responsive-header{
581
- display:none;
582
- }
583
- }
584
-
585
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
586
- display:none;
587
- }
588
-
589
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
590
- display:block;
591
- }
592
-
593
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
594
- display:flex;
595
- flex-direction:column;
596
- }
597
-
598
- .tds-loading-spinner{
599
- --tds-loading-spinner-size:1.25em;
600
-
601
- position:absolute;
602
- right:0;
603
- left:0;
604
- visibility:var(--tds-loading-spinner-visibility, hidden);
605
- width:var(--tds-loading-spinner-size);
606
- height:var(--tds-loading-spinner-size);
607
- margin:auto;
608
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
609
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
610
- border-radius:50%;
611
- animation:spinner-rotate 500ms infinite linear;
612
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
613
- }
614
-
615
- @keyframes spinner-rotate{
616
- to{
617
- transform:rotate(360deg);
618
- }
619
- }
620
-
621
- @media (prefers-reduced-motion: reduce){
622
- [class*="--loading"] .tds-loading-spinner{
623
- --tds-loading-spinner-animation-play-state:paused;
624
- }
625
- }
626
-
627
3
  :root{
628
4
  --t-border-radius-sm:2px;
629
5
  --t-border-radius-md:4px;
@@ -1035,6 +411,457 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1035
411
  --t-form-font-color-readonly:var(--t-text-color);
1036
412
  --t-form-picker-icon-color:var(--t-icon-color);
1037
413
  --t-form-placeholder-color:var(--t-text-color-placeholder);
414
+ }
415
+
416
+ @media (prefers-color-scheme: dark){
417
+ :root[data-color-mode="system"]{
418
+ color-scheme:dark;
419
+ --t-text-color-headline:hsl(0, 0%, 94%);
420
+ --t-text-color:hsl(0, 0%, 80%);
421
+ --t-text-color-secondary:hsl(0, 0%, 54%);
422
+ --t-text-color-disabled:hsl(0, 0%, 25%);
423
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
424
+ --t-text-color-interaction:hsl(204, 68%, 55%);
425
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
426
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
427
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
428
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
429
+ --t-text-color-status-info:hsl(204, 68%, 55%);
430
+ --t-text-color-status-success:hsl(97, 57%, 41%);
431
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
432
+ --t-text-color-status-error:hsl(8, 61%, 61%);
433
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
434
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
435
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
436
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
437
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
438
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
439
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
440
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
441
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
442
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
443
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
444
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
445
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
446
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
447
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
448
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
449
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
450
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
451
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
452
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
453
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
454
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
455
+ --t-icon-color:hsl(0, 0%, 80%);
456
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
457
+ --t-icon-color-dim:hsl(0, 0%, 38%);
458
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
459
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
460
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
461
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
462
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
463
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
464
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
465
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
466
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
467
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
468
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
469
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
470
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
471
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
472
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
473
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
474
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
475
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
476
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
477
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
478
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
479
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
480
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
481
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
482
+ --t-fill-color-control:hsl(204, 100%, 35%);
483
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
484
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
485
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
486
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
487
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
488
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
489
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
490
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
491
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
492
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
493
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
494
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
495
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
496
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
497
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
498
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
499
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
500
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
501
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
502
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
503
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
504
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
505
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
506
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
507
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
508
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
509
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
510
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
511
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
512
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
513
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
514
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
515
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
516
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
517
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
518
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
519
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
520
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
521
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
522
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
523
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
524
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
525
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
526
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
527
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
528
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
529
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
530
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
531
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
532
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
533
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
534
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
535
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
536
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
537
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
538
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
539
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
540
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
541
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
542
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
543
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
544
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
545
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
546
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
547
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
548
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
549
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
550
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
551
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
552
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
553
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
554
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
555
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
556
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
557
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
558
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
559
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
560
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
561
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
562
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
563
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
564
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
565
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
566
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
567
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
568
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
569
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
570
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
571
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
572
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
573
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
574
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
575
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
576
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
577
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
578
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
579
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
580
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
581
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
582
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
583
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
584
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
585
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
586
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
587
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
588
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
589
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
590
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
591
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
592
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
593
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
594
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
595
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
596
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
597
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
598
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
599
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
600
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
601
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
602
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
603
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
604
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
605
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
606
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
607
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
608
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
609
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
610
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
611
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
612
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
613
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
614
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
615
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
616
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
617
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
618
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
619
+ --t-surface-color-card:hsl(0, 0%, 12%);
620
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
621
+ --t-border-color:hsl(0, 0%, 21%);
622
+ --t-border-color-dark:hsl(0, 0%, 25%);
623
+ --t-border-color-darker:hsl(0, 0%, 33%);
624
+ --t-border-color-darkest:hsl(0, 0%, 38%);
625
+ --t-border-color-disabled:hsl(0, 0%, 21%);
626
+ --t-border-color-dim:hsl(0, 0%, 16%);
627
+ --t-border-color-white:hsl(0, 0%, 12%);
628
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
629
+ --t-border-color-status-info:hsl(204, 100%, 35%);
630
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
631
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
632
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
633
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
634
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
635
+ --t-border-color-control-info:hsl(204, 100%, 35%);
636
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
637
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
638
+ }
639
+ }
640
+
641
+ :root[data-color-mode="dark"]{
642
+ color-scheme:dark;
643
+ --t-text-color-headline:hsl(0, 0%, 94%);
644
+ --t-text-color:hsl(0, 0%, 80%);
645
+ --t-text-color-secondary:hsl(0, 0%, 54%);
646
+ --t-text-color-disabled:hsl(0, 0%, 25%);
647
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
648
+ --t-text-color-interaction:hsl(204, 68%, 55%);
649
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
650
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
651
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
652
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
653
+ --t-text-color-status-info:hsl(204, 68%, 55%);
654
+ --t-text-color-status-success:hsl(97, 57%, 41%);
655
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
656
+ --t-text-color-status-error:hsl(8, 61%, 61%);
657
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
658
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
659
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
660
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
661
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
662
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
663
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
664
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
665
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
666
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
667
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
668
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
669
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
670
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
671
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
672
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
673
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
674
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
675
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
676
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
677
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
678
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
679
+ --t-icon-color:hsl(0, 0%, 80%);
680
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
681
+ --t-icon-color-dim:hsl(0, 0%, 38%);
682
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
683
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
684
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
685
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
686
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
687
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
688
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
689
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
690
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
691
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
692
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
693
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
694
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
695
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
696
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
697
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
698
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
699
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
700
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
701
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
702
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
703
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
704
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
705
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
706
+ --t-fill-color-control:hsl(204, 100%, 35%);
707
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
708
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
709
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
710
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
711
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
712
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
713
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
714
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
715
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
716
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
717
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
718
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
719
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
720
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
721
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
722
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
723
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
724
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
725
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
726
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
727
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
728
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
729
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
730
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
731
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
732
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
733
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
734
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
735
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
736
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
737
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
738
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
739
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
740
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
741
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
742
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
743
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
744
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
745
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
746
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
747
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
748
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
749
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
750
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
751
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
752
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
753
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
754
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
755
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
756
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
757
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
758
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
759
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
760
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
761
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
762
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
763
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
764
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
765
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
766
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
767
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
768
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
769
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
770
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
771
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
772
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
773
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
774
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
775
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
776
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
777
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
778
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
779
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
780
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
781
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
782
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
783
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
784
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
785
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
786
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
787
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
788
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
789
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
790
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
791
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
792
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
793
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
794
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
795
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
796
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
797
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
798
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
799
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
800
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
801
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
802
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
803
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
804
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
805
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
806
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
807
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
808
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
809
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
810
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
811
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
812
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
813
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
814
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
815
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
816
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
817
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
818
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
819
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
820
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
821
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
822
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
823
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
824
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
825
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
826
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
827
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
828
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
829
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
830
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
831
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
832
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
833
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
834
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
835
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
836
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
837
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
838
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
839
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
840
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
841
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
842
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
843
+ --t-surface-color-card:hsl(0, 0%, 12%);
844
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
845
+ --t-border-color:hsl(0, 0%, 21%);
846
+ --t-border-color-dark:hsl(0, 0%, 25%);
847
+ --t-border-color-darker:hsl(0, 0%, 33%);
848
+ --t-border-color-darkest:hsl(0, 0%, 38%);
849
+ --t-border-color-disabled:hsl(0, 0%, 21%);
850
+ --t-border-color-dim:hsl(0, 0%, 16%);
851
+ --t-border-color-white:hsl(0, 0%, 12%);
852
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
853
+ --t-border-color-status-info:hsl(204, 100%, 35%);
854
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
855
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
856
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
857
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
858
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
859
+ --t-border-color-control-info:hsl(204, 100%, 35%);
860
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
861
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
862
+ }
863
+
864
+ :root{
1038
865
  --t-border-size-default:var(--t-border-width);
1039
866
  --t-border-size-thick:var(--t-border-width-thick);
1040
867
  --t-font-weight-semi-bold:var(--t-font-weight-semibold);
@@ -1115,452 +942,628 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1115
942
  --t-text-color-interaction-primary:var(--t-text-color-interaction);
1116
943
  }
1117
944
 
1118
- :root[data-color-mode="dark"]{
1119
- color-scheme:dark;
1120
- --t-text-color-headline:hsl(0, 0%, 94%);
1121
- --t-text-color:hsl(0, 0%, 80%);
1122
- --t-text-color-secondary:hsl(0, 0%, 54%);
1123
- --t-text-color-disabled:hsl(0, 0%, 25%);
1124
- --t-text-color-placeholder:hsl(0, 0%, 38%);
1125
- --t-text-color-interaction:hsl(204, 68%, 55%);
1126
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1127
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
1128
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1129
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
1130
- --t-text-color-status-info:hsl(204, 68%, 55%);
1131
- --t-text-color-status-success:hsl(97, 57%, 41%);
1132
- --t-text-color-status-warning:hsl(42, 84%, 55%);
1133
- --t-text-color-status-error:hsl(8, 61%, 61%);
1134
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1135
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1136
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1137
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1138
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1139
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1140
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1141
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1142
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1143
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1144
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1145
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
1146
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
1147
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
1148
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
1149
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
1150
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
1151
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
1152
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
1153
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
1154
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
1155
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
1156
- --t-icon-color:hsl(0, 0%, 80%);
1157
- --t-icon-color-secondary:hsl(0, 0%, 54%);
1158
- --t-icon-color-dim:hsl(0, 0%, 38%);
1159
- --t-icon-color-disabled:hsl(0, 0%, 25%);
1160
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
1161
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1162
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1163
- --t-icon-color-status-info:hsl(204, 68%, 55%);
1164
- --t-icon-color-status-error:hsl(8, 61%, 61%);
1165
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1166
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1167
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1168
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1169
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1170
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1171
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1172
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1173
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1174
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1175
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1176
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1177
- --t-fill-color-interaction:hsl(204, 100%, 35%);
1178
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1179
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1180
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1181
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1182
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1183
- --t-fill-color-control:hsl(204, 100%, 35%);
1184
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1185
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
1186
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1187
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1188
- --t-fill-color-status-info:hsl(204, 100%, 35%);
1189
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1190
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1191
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1192
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1193
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1194
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1195
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1196
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1197
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
1198
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1199
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1200
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1201
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1202
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
1203
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1204
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
1205
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
1206
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1207
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1208
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1209
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1210
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1211
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1212
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1213
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1214
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
1215
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
1216
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
1217
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
1218
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
1219
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
1220
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
1221
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
1222
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
1223
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
1224
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
1225
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
1226
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
1227
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
1228
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
1229
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
1230
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
1231
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
1232
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
1233
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
1234
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
1235
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
1236
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
1237
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
1238
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
1239
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
1240
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
1241
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
1242
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
1243
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
1244
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
1245
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
1246
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1247
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
1248
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
1249
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
1250
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
1251
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
1252
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
1253
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
1254
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
1255
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
1256
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
1257
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
1258
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
1259
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
1260
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
1261
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
1262
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
1263
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1264
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1265
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1266
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
1267
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
1268
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
1269
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
1270
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
1271
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1272
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1273
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1274
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1275
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
1276
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1277
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1278
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1279
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
1280
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
1281
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
1282
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
1283
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1284
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1285
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1286
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1287
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1288
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1289
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1290
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
1291
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
1292
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
1293
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
1294
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1295
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1296
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1297
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1298
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
1299
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1300
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1301
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1302
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1303
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1304
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1305
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1306
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1307
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1308
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1309
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1310
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1311
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1312
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1313
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1314
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1315
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1316
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1317
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1318
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1319
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1320
- --t-surface-color-card:hsl(0, 0%, 12%);
1321
- --t-surface-color-canvas:hsl(0, 0%, 10%);
1322
- --t-border-color:hsl(0, 0%, 21%);
1323
- --t-border-color-dark:hsl(0, 0%, 25%);
1324
- --t-border-color-darker:hsl(0, 0%, 33%);
1325
- --t-border-color-darkest:hsl(0, 0%, 38%);
1326
- --t-border-color-disabled:hsl(0, 0%, 21%);
1327
- --t-border-color-dim:hsl(0, 0%, 16%);
1328
- --t-border-color-white:hsl(0, 0%, 12%);
1329
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
1330
- --t-border-color-status-info:hsl(204, 100%, 35%);
1331
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
1332
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1333
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1334
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1335
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
1336
- --t-border-color-control-info:hsl(204, 100%, 35%);
1337
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1338
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
945
+
946
+ @media (prefers-reduced-motion: no-preference){
947
+
948
+ :root{
949
+ interpolate-size:allow-keywords;
950
+ }
951
+ }
952
+
953
+ @layer tds-component{
954
+ tds-sidenav, .tds-sidenav{
955
+ --tds-sidenav-indent:12px;
956
+ --tds-sidenav-item-depth:0;
957
+
958
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
959
+
960
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
961
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
962
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
963
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
964
+
965
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
966
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
967
+ --tds-sidenav-item-nested-background-selected:transparent;
968
+
969
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
970
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
971
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
972
+
973
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
974
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
975
+ }
976
+
977
+ .tds-sidenav--theme-gray{
978
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
979
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
980
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
981
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
982
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
983
+ }
984
+ }
985
+
986
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
987
+ display:flex;
988
+ }
989
+
990
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
991
+ flex-direction:column;
992
+ gap:var(--t-spacing-half);
993
+ width:100%;
994
+ }
995
+
996
+ .tds-sidenav-section-list{
997
+ width:100%;
998
+ padding:0;
999
+ margin:0;
1000
+ list-style:none;
1001
+ }
1002
+
1003
+ .tds-sidenav-section-header{
1004
+ display:flex;
1005
+ align-items:baseline;
1006
+ justify-content:space-between;
1007
+ padding-top:var(--t-spacing-2);
1008
+ }
1009
+
1010
+ .tds-sidenav-section-header h2{
1011
+ margin:0;
1012
+ font-size:var(--t-font-size-sm);
1013
+ font-weight:var(--t-font-weight-semibold);
1014
+ line-height:1.35;
1015
+ color:var(--t-text-color-default-secondary);
1016
+ text-transform:uppercase;
1017
+ }
1018
+
1019
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1020
+ padding-top:0;
1021
+ }
1022
+
1023
+ .tds-sidenav-section-header [slot="label-actions"]{
1024
+ display:flex;
1025
+ gap:var(--t-spacing-half);
1026
+ align-items:center;
1027
+ }
1028
+
1029
+ .tds-sidenav-section [slot="section-actions"]{
1030
+ display:flex;
1031
+ gap:12px;
1032
+ align-items:center;
1033
+ min-height:42px;
1034
+ padding:var(--t-spacing-1) 0;
1035
+ }
1036
+
1037
+ .tds-sidenav-section-list,
1038
+ .tds-sidenav-item{
1039
+ width:100%;
1040
+ padding:0;
1041
+ margin:0;
1042
+ }
1043
+
1044
+ .tds-sidenav-item :is(a,button){
1045
+ position:relative;
1046
+ display:flex;
1047
+ gap:12px;
1048
+ align-items:center;
1049
+ width:100%;
1050
+ padding:12px;
1051
+ overflow:hidden;
1052
+ font-size:var(--t-font-size-sm);
1053
+ line-height:18px;
1054
+ color:var(--t-text-color-default-headline);
1055
+ white-space:nowrap;
1056
+ text-decoration:none;
1057
+ -webkit-appearance:none;
1058
+ -moz-appearance:none;
1059
+ appearance:none;
1060
+ cursor:pointer;
1061
+ background-color:var(--tds-sidenav-item-background, transparent);
1062
+ border:0;
1063
+ border-radius:var(--t-border-radius-default);
1064
+ transition:var(--tds-sidenav-item-transition);
1065
+ }
1066
+
1067
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1068
+ display:block;
1069
+ flex:1;
1070
+ overflow:hidden;
1071
+ text-overflow:ellipsis;
1072
+ text-align:left;
1073
+ white-space:nowrap;
1074
+ }
1075
+
1076
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1077
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1078
+ color:var(--t-text-color-default-headline);
1079
+ text-decoration:none;
1080
+ }
1081
+
1082
+ :is(.tds-sidenav-item :is(a,button)):active{
1083
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1084
+ }
1085
+
1086
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1087
+ overflow:hidden;
1088
+ color:var(--tds-sidenav-item-icon-color);
1089
+ }
1090
+
1091
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1092
+ display:block;
1093
+ width:var(--tds-sidenav-item-icon-size);
1094
+ height:var(--tds-sidenav-item-icon-size);
1095
+ }
1096
+
1097
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1098
+ --tds-sidenav-indent:19px;
1099
+ }
1100
+
1101
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1102
+ visibility:visible;
1103
+ block-size:auto;
1104
+ opacity:1;
1105
+ }
1106
+
1107
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1108
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1109
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1110
+
1111
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1112
+ font-weight:var(--t-font-weight-semibold);
1113
+ }
1114
+
1115
+ .tds-sidenav-item:has(.tds-sidenav-section){
1116
+ display:flex;
1117
+ flex-direction:column;
1118
+ gap:var(--t-spacing-half);
1119
+ }
1120
+
1121
+ .tds-sidenav-item .tds-sidenav-section-list{
1122
+ --tds-sidenav-item-depth:1;
1123
+ gap:0;
1124
+ }
1125
+
1126
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1127
+ visibility:hidden;
1128
+ block-size:0;
1129
+ overflow-y:clip;
1130
+ opacity:0;
1131
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1132
+ }
1133
+
1134
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1135
+ --tds-sidenav-item-depth:2;
1136
+ }
1137
+
1138
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1139
+ min-height:var(--t-element-size-2xl);
1140
+ padding-block:9px;
1141
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1142
+ line-height:1;
1143
+ background-color:transparent;
1144
+ }
1145
+
1146
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1147
+ position:absolute;
1148
+ top:0;
1149
+ bottom:0;
1150
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1151
+ width:2px;
1152
+ content:"";
1153
+ background-color:var(--tds-sidenav-item-nested-border-color);
1154
+ transition:var(--tds-sidenav-item-transition);
1155
+ }
1156
+
1157
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1158
+ position:absolute;
1159
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1160
+ z-index:-1;
1161
+ height:100%;
1162
+ content:"";
1163
+ background-color:var(--tds-sidenav-item-nested-background);
1164
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1165
+ transition:var(--tds-sidenav-item-transition);
1166
+ }
1167
+
1168
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1169
+ display:block;
1170
+ text-align:left;
1171
+ white-space:normal;
1172
+ }
1173
+
1174
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1175
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1176
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1177
+ }
1178
+
1179
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1180
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1181
+ }
1182
+
1183
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1184
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1185
+ font-weight:var(--t-font-weight-medium);
1186
+ }
1187
+
1188
+ .tds-sidenav-responsive-header{
1189
+ display:flex;
1190
+ gap:var(--t-spacing-2);
1191
+ align-items:center;
1192
+ width:100%;
1193
+ }
1194
+
1195
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1196
+ order:0;
1197
+ }
1198
+
1199
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1200
+ flex:1;
1201
+ order:1;
1202
+ margin:0;
1203
+ font-size:var(--t-font-size-lg);
1204
+ font-weight:var(--t-font-weight-medium);
1205
+ color:var(--t-text-color-default-headline);
1206
+ }
1207
+
1208
+ @media (max-width: 719px){
1209
+ .tds-sidenav-collapse{
1210
+ z-index:10001;
1211
+ display:none;
1212
+ max-width:min(448px, calc(100vw - 48px));
1213
+ padding:0;
1214
+ margin:12px 0;
1215
+ overflow:hidden;
1216
+ outline:0;
1217
+ background:var(--t-surface-color-card);
1218
+ border:0;
1219
+ border-radius:6px;
1220
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1221
+ will-change:transform;
1222
+ position-area:bottom span-right;
1223
+ }
1224
+
1225
+ .tds-sidenav-scroll-container{
1226
+ --webkit-overflow-scrolling:touch;
1227
+ display:block;
1228
+ width:100%;
1229
+ height:-moz-fit-content;
1230
+ height:fit-content;
1231
+ padding:var(--t-spacing-2);
1232
+ overflow-y:auto;
1233
+ }
1234
+
1235
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1236
+ display:none;
1237
+ }
1238
+ @supports selector(:popover-open){
1239
+ .tds-sidenav-collapse:popover-open{
1240
+ display:flex;
1241
+ }
1242
+ }
1243
+ @supports not selector(:popover-open){
1244
+ .tds-sidenav-collapse.\:popover-open{
1245
+ display:flex;
1246
+ }
1247
+ }
1248
+ }
1249
+
1250
+ @media (min-width: 720px){
1251
+ .tds-sidenav-responsive-header{
1252
+ display:none;
1253
+ }
1254
+ }
1255
+
1256
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1257
+ display:none;
1258
+ }
1259
+
1260
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1261
+ display:block;
1262
+ }
1263
+
1264
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1265
+ display:flex;
1266
+ flex-direction:column;
1267
+ }
1268
+
1269
+ @layer t-critical{
1270
+ tds-page-header:not(.hydrated){
1271
+ display:none;
1272
+ }
1273
+ }
1274
+
1275
+ @layer t-component{
1276
+ .tds-page-header{
1277
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1278
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1279
+ --tds-page-header-color:var(--t-text-color-default-primary);
1280
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
1281
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1282
+ --tds-page-header-padding-x:var(--t-spacing-2);
1283
+ --tds-page-header-padding-y:var(--t-spacing-2);
1284
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1285
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1286
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1287
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1288
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1289
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1290
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1291
+ --tds-page-header-nav-item-border-width:1px;
1292
+
1293
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1294
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1295
+
1296
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1297
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1298
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1299
+
1300
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1301
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1302
+
1303
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1304
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1305
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1306
+
1307
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1308
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1309
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1310
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1311
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1312
+ }
1313
+
1314
+ .tds-page-header--profile{
1315
+ --tds-page-header-padding-y:20px;
1316
+ }
1317
+ @media (min-width: 600px){
1318
+ .tds-page-header{
1319
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1320
+ --tds-page-header-color:var(--t-text-color-default-secondary);
1321
+ --tds-page-header-padding-x:var(--t-spacing-3);
1322
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1323
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1324
+ --tds-page-header-nav-background:transparent;
1325
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1326
+ --tds-page-header-nav-item-border-width:1px;
1327
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1328
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1329
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1330
+ }
1331
+ }
1332
+ }
1333
+
1334
+ .tds-page-header{
1335
+ display:flex;
1336
+ flex-direction:column;
1337
+ padding-top:var(--tds-page-header-padding-y);
1338
+ color:var(--tds-page-header-color);
1339
+ background:var(--tds-page-header-background-color);
1340
+ border-bottom:1px solid var(--t-border-color-default-base);
1341
+ }
1342
+
1343
+ .tds-page-header:not(.has-nav){
1344
+ padding-bottom:var(--tds-page-header-padding-y);
1345
+ }
1346
+
1347
+ .tds-page-header.inactive{
1348
+ background:var(--tds-page-header-background-color-inactive);
1349
+ }
1350
+
1351
+ .tds-page-header__title-bar{
1352
+ display:flex;
1353
+ flex-direction:column;
1354
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1355
+ align-items:flex-start;
1356
+ justify-content:space-between;
1357
+ padding:0 var(--tds-page-header-padding-x);
1358
+ }
1359
+
1360
+ .tds-page-header--profile > .tds-page-header__title-bar{
1361
+ align-items:center;
1362
+ }
1363
+
1364
+ .tds-page-header__primary{
1365
+ width:100%;
1366
+ }
1367
+
1368
+ .tds-page-header__primary h1{
1369
+ margin:0;
1370
+ font-size:var(--tds-page-header-headline-font-size);
1371
+ font-weight:var(--t-font-weight-normal);
1372
+ line-height:32px;
1373
+ color:var(--tds-page-header-headline-color);
1374
+ overflow-wrap:break-word;
1375
+ }
1376
+
1377
+ .tds-page-header [slot="actions"]{
1378
+ width:100%;
1379
+ }
1380
+
1381
+ .has-multi-actions.tds-page-header [slot="actions"],
1382
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1383
+ display:flex;
1384
+ flex-flow:row wrap;
1385
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1386
+ align-items:flex-start;
1387
+ justify-content:flex-start;
1388
+ min-width:0;
1389
+ }
1390
+
1391
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1392
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1393
+ .tds-page-header nav[slot="navigation"] ul,
1394
+ .tds-page-header nav.tds-page-header__nav ul{
1395
+ display:flex;
1396
+ gap:var(--tds-page-header-nav-gap);
1397
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1398
+ margin:0 0 -1px;
1399
+ overflow:auto;
1400
+ list-style:none;
1401
+ background:var(--tds-page-header-nav-background);
1402
+ }
1403
+
1404
+ .tds-page-header nav[slot="navigation"] a,
1405
+ .tds-page-header nav[slot="navigation"] button,
1406
+ .tds-page-header nav.tds-page-header__nav a,
1407
+ .tds-page-header nav.tds-page-header__nav button{
1408
+ position:relative;
1409
+ display:inline-flex;
1410
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1411
+ font-size:var(--t-font-size-sm);
1412
+ line-height:22px;
1413
+ color:var(--tds-page-header-nav-item-color);
1414
+ white-space:nowrap;
1415
+ text-decoration:none;
1416
+ -webkit-appearance:none;
1417
+ -moz-appearance:none;
1418
+ appearance:none;
1419
+ cursor:pointer;
1420
+ outline-offset:-2px;
1421
+ background-color:var(--tds-page-header-nav-item-background-color);
1422
+ background-clip:padding-box;
1423
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1424
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1425
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1426
+ }
1427
+
1428
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1429
+ position:relative;
1430
+ }
1431
+
1432
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1433
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1434
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1435
+ }
1436
+
1437
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1438
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1439
+ position:absolute;
1440
+ top:-5px;
1441
+ right:-2px;
1442
+ width:10px;
1443
+ height:10px;
1444
+ content:"";
1445
+ background:var(--tds-page-header-nav-item-indicator-color);
1446
+ border-radius:50%;
1447
+ }
1448
+
1449
+ @media (prefers-reduced-motion: no-preference){
1450
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1451
+ animation:indicator-pulse 1.25s ease infinite;
1452
+ }
1453
+ }
1454
+
1455
+ .tds-page-header nav[slot="navigation"] a.selected,
1456
+ .tds-page-header nav[slot="navigation"] button.selected,
1457
+ .tds-page-header nav.tds-page-header__nav a.selected,
1458
+ .tds-page-header nav.tds-page-header__nav button.selected{
1459
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1460
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1461
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1462
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1463
+ }
1464
+
1465
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1466
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1467
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1468
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1469
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1470
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1471
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1472
+ }
1473
+
1474
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1475
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1476
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1477
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1478
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1479
+ }
1480
+
1481
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1482
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1483
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1484
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1485
+ color:var(--tds-page-header-nav-item-color-disabled);
1486
+ cursor:not-allowed;
1487
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1488
+ opacity:1;
1489
+ }
1490
+
1491
+ @media (min-width: 960px){
1492
+ .tds-page-header__primary{
1493
+ flex:1 1 max-content;
1494
+ width:auto;
1495
+ min-width:0;
1496
+ max-width:100%;
1497
+ }
1498
+
1499
+ .tds-page-header__title-bar,
1500
+ .tds-page-header--profile .tds-page-header__title-bar{
1501
+ flex-flow:row nowrap;
1502
+ row-gap:12px;
1503
+ align-items:flex-start;
1504
+ }
1505
+
1506
+ .tds-page-header [slot="actions"]{
1507
+ width:auto;
1508
+ }
1509
+
1510
+ .has-multi-actions.tds-page-header [slot="actions"],
1511
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1512
+ justify-content:flex-end;
1513
+ }
1514
+ }
1515
+
1516
+ .tds-page-header-phone,
1517
+ .tds-page-header-email{
1518
+ color:var(--tds-page-header-color);
1519
+ white-space:nowrap;
1520
+ }
1521
+
1522
+ .tds-page-header-email{
1523
+ max-width:100%;
1524
+ overflow:hidden;
1525
+ text-overflow:ellipsis;
1526
+ }
1527
+
1528
+ @keyframes indicator-pulse{
1529
+ 0%{
1530
+ opacity:.3;
1531
+ transform:scale(.9);
1532
+ }
1533
+
1534
+ 100%{
1535
+ opacity:0;
1536
+ transform:scale(1.75);
1537
+ }
1339
1538
  }
1340
1539
 
1341
- @media (prefers-color-scheme: dark){
1342
- :root[data-color-mode="system"]{
1343
- color-scheme:dark;
1344
- --t-text-color-headline:hsl(0, 0%, 94%);
1345
- --t-text-color:hsl(0, 0%, 80%);
1346
- --t-text-color-secondary:hsl(0, 0%, 54%);
1347
- --t-text-color-disabled:hsl(0, 0%, 25%);
1348
- --t-text-color-placeholder:hsl(0, 0%, 38%);
1349
- --t-text-color-interaction:hsl(204, 68%, 55%);
1350
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1351
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
1352
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1353
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
1354
- --t-text-color-status-info:hsl(204, 68%, 55%);
1355
- --t-text-color-status-success:hsl(97, 57%, 41%);
1356
- --t-text-color-status-warning:hsl(42, 84%, 55%);
1357
- --t-text-color-status-error:hsl(8, 61%, 61%);
1358
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1359
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1360
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1361
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1362
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1363
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1364
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1365
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1366
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1367
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1368
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1369
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
1370
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
1371
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
1372
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
1373
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
1374
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
1375
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
1376
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
1377
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
1378
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
1379
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
1380
- --t-icon-color:hsl(0, 0%, 80%);
1381
- --t-icon-color-secondary:hsl(0, 0%, 54%);
1382
- --t-icon-color-dim:hsl(0, 0%, 38%);
1383
- --t-icon-color-disabled:hsl(0, 0%, 25%);
1384
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
1385
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1386
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1387
- --t-icon-color-status-info:hsl(204, 68%, 55%);
1388
- --t-icon-color-status-error:hsl(8, 61%, 61%);
1389
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1390
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1391
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1392
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1393
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1394
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1395
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1396
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1397
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1398
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1399
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1400
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1401
- --t-fill-color-interaction:hsl(204, 100%, 35%);
1402
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1403
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1404
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1405
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1406
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1407
- --t-fill-color-control:hsl(204, 100%, 35%);
1408
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1409
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
1410
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1411
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1412
- --t-fill-color-status-info:hsl(204, 100%, 35%);
1413
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1414
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1415
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1416
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1417
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1418
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1419
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1420
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1421
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
1422
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1423
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1424
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1425
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1426
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
1427
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1428
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
1429
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
1430
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1431
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1432
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1433
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1434
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1435
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1436
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1437
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1438
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
1439
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
1440
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
1441
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
1442
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
1443
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
1444
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
1445
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
1446
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
1447
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
1448
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
1449
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
1450
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
1451
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
1452
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
1453
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
1454
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
1455
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
1456
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
1457
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
1458
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
1459
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
1460
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
1461
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
1462
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
1463
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
1464
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
1465
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
1466
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
1467
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
1468
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
1469
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
1470
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1471
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
1472
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
1473
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
1474
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
1475
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
1476
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
1477
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
1478
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
1479
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
1480
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
1481
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
1482
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
1483
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
1484
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
1485
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
1486
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
1487
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1488
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1489
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1490
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
1491
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
1492
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
1493
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
1494
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
1495
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1496
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1497
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1498
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1499
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
1500
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1501
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1502
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1503
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
1504
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
1505
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
1506
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
1507
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1508
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1509
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1510
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1511
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1512
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1513
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1514
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
1515
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
1516
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
1517
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
1518
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1519
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1520
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1521
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1522
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
1523
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1524
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1525
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1526
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1527
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1528
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1529
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1530
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1531
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1532
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1533
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1534
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1535
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1536
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1537
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1538
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1539
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1540
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1541
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1542
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1543
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1544
- --t-surface-color-card:hsl(0, 0%, 12%);
1545
- --t-surface-color-canvas:hsl(0, 0%, 10%);
1546
- --t-border-color:hsl(0, 0%, 21%);
1547
- --t-border-color-dark:hsl(0, 0%, 25%);
1548
- --t-border-color-darker:hsl(0, 0%, 33%);
1549
- --t-border-color-darkest:hsl(0, 0%, 38%);
1550
- --t-border-color-disabled:hsl(0, 0%, 21%);
1551
- --t-border-color-dim:hsl(0, 0%, 16%);
1552
- --t-border-color-white:hsl(0, 0%, 12%);
1553
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
1554
- --t-border-color-status-info:hsl(204, 100%, 35%);
1555
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
1556
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1557
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1558
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1559
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
1560
- --t-border-color-control-info:hsl(204, 100%, 35%);
1561
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1562
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1540
+ .tds-loading-spinner{
1541
+ --tds-loading-spinner-size:1.25em;
1542
+
1543
+ position:absolute;
1544
+ right:0;
1545
+ left:0;
1546
+ visibility:var(--tds-loading-spinner-visibility, hidden);
1547
+ width:var(--tds-loading-spinner-size);
1548
+ height:var(--tds-loading-spinner-size);
1549
+ margin:auto;
1550
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1551
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
1552
+ border-radius:50%;
1553
+ animation:spinner-rotate 500ms infinite linear;
1554
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
1555
+ }
1556
+
1557
+ @keyframes spinner-rotate{
1558
+ to{
1559
+ transform:rotate(360deg);
1560
+ }
1563
1561
  }
1562
+
1563
+ @media (prefers-reduced-motion: reduce){
1564
+ [class*="--loading"] .tds-loading-spinner{
1565
+ --tds-loading-spinner-animation-play-state:paused;
1566
+ }
1564
1567
  }
1565
1568
 
1566
1569
  .symbol{