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

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 (62) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +109 -78
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/reactRender.css +1162 -1131
  8. package/dist/reactRender.css.map +1 -1
  9. package/dist/reactRenderLegacy.css +1162 -1131
  10. package/dist/reactRenderLegacy.css.map +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-CAuZNjx2.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/p-CAuZNjx2.js.map +1 -0
  13. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-DIxTyg8i.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/p-DIxTyg8i.js.map +1 -0
  15. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-DYAQgo1L.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/p-DYAQgo1L.js.map +1 -0
  17. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-DyZLaxTd.js} +2 -2
  18. package/dist/tapestry-wc/dist/components/p-DyZLaxTd.js.map +1 -0
  19. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-N9a-y0Yp.js} +2 -2
  20. package/dist/tapestry-wc/dist/components/p-N9a-y0Yp.js.map +1 -0
  21. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  22. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  30. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  31. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  32. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  33. package/dist/tokens/ts/react-native-tokens.d.ts +1 -0
  34. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  35. package/dist/tokens/ts/react-native-tokens.js +1 -0
  36. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  37. package/dist/tokens/ts/tokens.d.ts +1 -0
  38. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  39. package/dist/tokens/ts/tokens.js +1 -0
  40. package/dist/tokens/ts/tokens.js.map +1 -1
  41. package/dist/tokens-dark.css +2 -0
  42. package/dist/tokens-dark.css.map +1 -0
  43. package/dist/tokens-dark.js +1 -0
  44. package/dist/tokens-deprecated.css +109 -0
  45. package/dist/tokens-deprecated.css.map +1 -0
  46. package/dist/tokens-deprecated.d.ts +5 -0
  47. package/dist/tokens-deprecated.d.ts.map +1 -0
  48. package/dist/tokens-deprecated.js +1 -0
  49. package/dist/tokens.css +1 -78
  50. package/dist/tokens.css.map +1 -1
  51. package/dist/tokens.d.ts +3 -2
  52. package/dist/tokens.d.ts.map +1 -1
  53. package/dist/unstable.css +109 -78
  54. package/dist/unstable.css.map +1 -1
  55. package/package.json +5 -5
  56. package/dist/deprecated.css +0 -84
  57. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +0 -1
  58. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +0 -1
  59. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +0 -1
  60. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +0 -1
  61. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +0 -1
  62. package/dist/tokens-dark-combined.js +0 -3
package/dist/reactRenderLegacy.css CHANGED
@@ -1,627 +1,559 @@
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);
3
+ :root{
4
+ --t-border-size-default:var(--t-border-width);
5
+ --t-border-size-thick:var(--t-border-width-thick);
6
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
7
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
8
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
9
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
10
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
11
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
12
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
13
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
14
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
15
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
16
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
17
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
18
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
19
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
20
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
21
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
22
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
23
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
24
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
25
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
26
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
27
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
28
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
29
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
30
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
31
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
32
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
33
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
34
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
35
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
36
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
37
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
38
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
39
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
136
40
  }
137
41
 
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;
42
+ :root[data-color-mode="dark"]{
43
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
44
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
45
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
46
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
47
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
48
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
49
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
50
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
160
51
  }
161
52
 
162
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
163
- position:relative;
53
+ :root{
54
+ --t-border-color-default-base:var(--t-border-color);
55
+ --t-border-color-default-dark:var(--t-border-color-dark);
56
+ --t-border-color-default-darker:var(--t-border-color-darker);
57
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
58
+ --t-border-color-default-dim:var(--t-border-color-dim);
59
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
60
+ --t-border-color-default-white:var(--t-border-color-white);
61
+ --t-border-radius-default:var(--t-border-radius);
62
+ --t-border-width-default:var(--t-border-width);
63
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
64
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
65
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
66
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
67
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
68
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
69
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
70
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
71
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
72
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
73
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
74
+ --t-fill-color-control-primary:var(--t-fill-color-control);
75
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
76
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
77
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
78
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
79
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
80
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
81
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
82
+ --t-icon-color-default-primary:var(--t-icon-color);
83
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
84
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
85
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
86
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
87
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
88
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
89
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
90
+ --t-text-color-default-headline:var(--t-text-color-headline);
91
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
92
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
93
+ --t-text-color-default-primary:var(--t-text-color);
94
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
95
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
164
96
  }
165
97
 
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);
98
+ @media (prefers-color-scheme: dark){
99
+ :root[data-color-mode="system"]{
100
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
101
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
102
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
103
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
104
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
105
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
106
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
107
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
169
108
  }
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
109
  }
182
110
 
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);
111
+ :root[data-color-mode="dark"]{
112
+ color-scheme:dark;
113
+ --t-text-color-headline:hsl(0, 0%, 94%);
114
+ --t-text-color:hsl(0, 0%, 80%);
115
+ --t-text-color-secondary:hsl(0, 0%, 54%);
116
+ --t-text-color-disabled:hsl(0, 0%, 25%);
117
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
118
+ --t-text-color-interaction:hsl(204, 68%, 55%);
119
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
120
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
121
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
122
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
123
+ --t-text-color-status-info:hsl(204, 68%, 55%);
124
+ --t-text-color-status-success:hsl(97, 57%, 41%);
125
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
126
+ --t-text-color-status-error:hsl(8, 61%, 61%);
127
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
128
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
129
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
130
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
131
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
132
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
133
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
134
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
135
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
136
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
137
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
138
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
139
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
140
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
141
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
142
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
143
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
144
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
145
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
146
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
147
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
148
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
149
+ --t-icon-color:hsl(0, 0%, 80%);
150
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
151
+ --t-icon-color-dim:hsl(0, 0%, 38%);
152
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
153
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
154
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
155
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
156
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
157
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
158
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
159
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
160
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
161
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
162
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
163
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
164
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
165
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
166
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
167
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
168
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
169
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
170
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
171
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
172
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
173
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
174
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
175
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
176
+ --t-fill-color-control:hsl(204, 100%, 35%);
177
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
178
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
179
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
180
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
181
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
182
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
183
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
184
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
185
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
186
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
187
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
188
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
189
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
190
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
191
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
192
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
193
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
194
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
195
+ --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%));
196
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
197
+ --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%));
198
+ --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%));
199
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
200
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
201
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
202
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
203
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
204
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
205
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
206
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
207
+ --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%));
208
+ --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%));
209
+ --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%));
210
+ --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%));
211
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
212
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
213
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
214
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
215
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
216
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
217
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
218
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
219
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
220
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
221
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
222
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
223
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
224
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
225
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
226
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
227
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
228
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
229
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
230
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
231
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
232
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
233
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
234
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
235
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
236
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
237
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
238
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
239
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
240
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
241
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
242
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
243
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
244
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
245
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
246
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
247
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
248
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
249
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
250
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
251
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
252
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
253
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
254
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
255
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
256
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
257
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
258
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
259
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
260
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
261
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
262
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
263
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
264
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
265
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
266
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
267
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
268
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
269
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
270
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
271
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
272
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
273
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
274
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
275
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
276
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
277
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
278
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
279
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
280
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
281
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
282
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
283
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
284
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
285
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
286
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
287
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
288
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
289
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
290
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
291
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
292
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
293
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
294
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
295
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
296
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
297
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
298
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
299
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
300
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
301
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
302
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
303
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
304
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
305
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
306
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
307
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
308
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
309
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
310
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
311
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
312
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
313
+ --t-surface-color-card:hsl(0, 0%, 12%);
314
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
315
+ --t-border-color:hsl(0, 0%, 21%);
316
+ --t-border-color-dark:hsl(0, 0%, 25%);
317
+ --t-border-color-darker:hsl(0, 0%, 33%);
318
+ --t-border-color-darkest:hsl(0, 0%, 38%);
319
+ --t-border-color-disabled:hsl(0, 0%, 21%);
320
+ --t-border-color-dim:hsl(0, 0%, 16%);
321
+ --t-border-color-white:hsl(0, 0%, 12%);
322
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
323
+ --t-border-color-status-info:hsl(204, 100%, 35%);
324
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
325
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
326
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
327
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
328
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
329
+ --t-border-color-control-info:hsl(204, 100%, 35%);
330
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
331
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
213
332
  }
214
333
 
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
- }
334
+ @media (prefers-color-scheme: dark){
335
+ :root[data-color-mode="system"]{
336
+ color-scheme:dark;
337
+ --t-text-color-headline:hsl(0, 0%, 94%);
338
+ --t-text-color:hsl(0, 0%, 80%);
339
+ --t-text-color-secondary:hsl(0, 0%, 54%);
340
+ --t-text-color-disabled:hsl(0, 0%, 25%);
341
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
342
+ --t-text-color-interaction:hsl(204, 68%, 55%);
343
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
344
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
345
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
346
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
347
+ --t-text-color-status-info:hsl(204, 68%, 55%);
348
+ --t-text-color-status-success:hsl(97, 57%, 41%);
349
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
350
+ --t-text-color-status-error:hsl(8, 61%, 61%);
351
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
352
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
353
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
354
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
355
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
356
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
357
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
358
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
359
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
360
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
361
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
362
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
363
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
364
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
365
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
366
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
367
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
368
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
369
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
370
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
371
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
372
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
373
+ --t-icon-color:hsl(0, 0%, 80%);
374
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
375
+ --t-icon-color-dim:hsl(0, 0%, 38%);
376
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
377
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
378
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
379
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
380
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
381
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
382
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
383
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
384
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
385
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
386
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
387
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
388
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
389
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
390
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
391
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
392
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
393
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
394
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
395
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
396
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
397
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
398
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
399
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
400
+ --t-fill-color-control:hsl(204, 100%, 35%);
401
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
402
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
403
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
404
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
405
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
406
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
407
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
408
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
409
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
410
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
411
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
412
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
413
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
414
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
415
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
416
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
417
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
418
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
419
+ --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%));
420
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
421
+ --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%));
422
+ --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%));
423
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
424
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
425
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
426
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
427
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
428
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
429
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
430
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
431
+ --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%));
432
+ --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%));
433
+ --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%));
434
+ --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%));
435
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
436
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
437
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
438
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
439
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
440
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
441
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
442
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
443
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
444
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
445
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
446
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
447
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
448
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
449
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
450
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
451
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
452
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
453
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
454
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
455
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
456
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
457
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
458
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
459
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
460
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
461
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
462
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
463
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
464
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
465
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
466
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
467
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
468
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
469
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
470
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
471
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
472
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
473
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
474
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
475
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
476
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
477
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
478
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
479
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
480
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
481
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
482
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
483
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
484
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
485
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
486
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
487
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
488
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
489
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
490
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
491
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
492
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
493
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
494
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
495
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
496
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
497
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
498
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
499
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
500
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
501
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
502
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
503
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
504
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
505
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
506
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
507
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
508
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
509
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
510
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
511
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
512
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
513
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
514
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
515
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
516
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
517
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
518
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
519
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
520
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
521
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
522
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
523
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
524
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
525
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
526
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
527
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
528
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
529
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
530
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
531
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
532
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
533
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
534
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
535
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
536
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
537
+ --t-surface-color-card:hsl(0, 0%, 12%);
538
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
539
+ --t-border-color:hsl(0, 0%, 21%);
540
+ --t-border-color-dark:hsl(0, 0%, 25%);
541
+ --t-border-color-darker:hsl(0, 0%, 33%);
542
+ --t-border-color-darkest:hsl(0, 0%, 38%);
543
+ --t-border-color-disabled:hsl(0, 0%, 21%);
544
+ --t-border-color-dim:hsl(0, 0%, 16%);
545
+ --t-border-color-white:hsl(0, 0%, 12%);
546
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
547
+ --t-border-color-status-info:hsl(204, 100%, 35%);
548
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
549
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
550
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
551
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
552
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
553
+ --t-border-color-control-info:hsl(204, 100%, 35%);
554
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
555
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
248
556
  }
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
557
  }
626
558
 
627
559
  :root{
@@ -642,6 +574,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
642
574
  --t-spacing-7:56px;
643
575
  --t-spacing-fourth:2px;
644
576
  --t-spacing-half:4px;
577
+ --t-spacing-1-half:12px;
645
578
  --t-element-size-3xl:48px;
646
579
  --t-element-size-2xl:32px;
647
580
  --t-element-size-xl:24px;
@@ -1035,532 +968,630 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1035
968
  --t-form-font-color-readonly:var(--t-text-color);
1036
969
  --t-form-picker-icon-color:var(--t-icon-color);
1037
970
  --t-form-placeholder-color:var(--t-text-color-placeholder);
1038
- --t-border-size-default:var(--t-border-width);
1039
- --t-border-size-thick:var(--t-border-width-thick);
1040
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1041
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
1042
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
1043
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
1044
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
1045
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
1046
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
1047
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
1048
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
1049
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
1050
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1051
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
1052
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1053
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
1054
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
1055
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
1056
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1057
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1058
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
1059
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
1060
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
1061
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1062
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1063
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1064
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1065
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1066
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1067
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1068
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1069
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1070
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
1071
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
1072
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
1073
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
1074
- --t-border-color-default-base:var(--t-border-color);
1075
- --t-border-color-default-dark:var(--t-border-color-dark);
1076
- --t-border-color-default-darker:var(--t-border-color-darker);
1077
- --t-border-color-default-darkest:var(--t-border-color-darkest);
1078
- --t-border-color-default-dim:var(--t-border-color-dim);
1079
- --t-border-color-default-disabled:var(--t-border-color-disabled);
1080
- --t-border-color-default-white:var(--t-border-color-white);
1081
- --t-border-radius-default:var(--t-border-radius);
1082
- --t-border-width-default:var(--t-border-width);
1083
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1084
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
1085
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1086
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1087
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
1088
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1089
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1090
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
1091
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1092
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1093
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1094
- --t-fill-color-control-primary:var(--t-fill-color-control);
1095
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1096
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1097
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
1098
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1099
- --t-icon-color-default-dim:var(--t-icon-color-dim);
1100
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1101
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1102
- --t-icon-color-default-primary:var(--t-icon-color);
1103
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1104
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1105
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1106
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1107
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1108
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1109
- --t-text-color-default-disabled:var(--t-text-color-disabled);
1110
- --t-text-color-default-headline:var(--t-text-color-headline);
1111
- --t-text-color-default-inverted:var(--t-text-color-inverted);
1112
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1113
- --t-text-color-default-primary:var(--t-text-color);
1114
- --t-text-color-default-secondary:var(--t-text-color-secondary);
1115
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
1116
971
  }
1117
972
 
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);
973
+ @layer t-critical{
974
+ tds-page-header:not(.hydrated){
975
+ display:none;
976
+ }
977
+ }
978
+
979
+ @layer t-component{
980
+ .tds-page-header{
981
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
982
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
983
+ --tds-page-header-color:var(--t-text-color-default-primary);
984
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
985
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
986
+ --tds-page-header-padding-x:var(--t-spacing-2);
987
+ --tds-page-header-padding-y:var(--t-spacing-2);
988
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
989
+ --tds-page-header-nav-gap:var(--t-spacing-1);
990
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
991
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
992
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
993
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
994
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
995
+ --tds-page-header-nav-item-border-width:1px;
996
+
997
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
998
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
999
+
1000
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1001
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1002
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1003
+
1004
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1005
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1006
+
1007
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1008
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1009
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1010
+
1011
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1012
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1013
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1014
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1015
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1016
+ }
1017
+
1018
+ .tds-page-header--profile{
1019
+ --tds-page-header-padding-y:20px;
1020
+ }
1021
+ @media (min-width: 600px){
1022
+ .tds-page-header{
1023
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1024
+ --tds-page-header-color:var(--t-text-color-default-secondary);
1025
+ --tds-page-header-padding-x:var(--t-spacing-3);
1026
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1027
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1028
+ --tds-page-header-nav-background:transparent;
1029
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1030
+ --tds-page-header-nav-item-border-width:1px;
1031
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1032
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1033
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1034
+ }
1035
+ }
1036
+ }
1037
+
1038
+ .tds-page-header{
1039
+ display:flex;
1040
+ flex-direction:column;
1041
+ padding-top:var(--tds-page-header-padding-y);
1042
+ color:var(--tds-page-header-color);
1043
+ background:var(--tds-page-header-background-color);
1044
+ border-bottom:1px solid var(--t-border-color-default-base);
1045
+ }
1046
+
1047
+ .tds-page-header:not(.has-nav){
1048
+ padding-bottom:var(--tds-page-header-padding-y);
1049
+ }
1050
+
1051
+ .tds-page-header.inactive{
1052
+ background:var(--tds-page-header-background-color-inactive);
1053
+ }
1054
+
1055
+ .tds-page-header__title-bar{
1056
+ display:flex;
1057
+ flex-direction:column;
1058
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1059
+ align-items:flex-start;
1060
+ justify-content:space-between;
1061
+ padding:0 var(--tds-page-header-padding-x);
1062
+ }
1063
+
1064
+ .tds-page-header--profile > .tds-page-header__title-bar{
1065
+ align-items:center;
1066
+ }
1067
+
1068
+ .tds-page-header__primary{
1069
+ width:100%;
1070
+ }
1071
+
1072
+ .tds-page-header__primary h1{
1073
+ margin:0;
1074
+ font-size:var(--tds-page-header-headline-font-size);
1075
+ font-weight:var(--t-font-weight-normal);
1076
+ line-height:32px;
1077
+ color:var(--tds-page-header-headline-color);
1078
+ overflow-wrap:break-word;
1079
+ }
1080
+
1081
+ .tds-page-header [slot="actions"]{
1082
+ width:100%;
1083
+ }
1084
+
1085
+ .has-multi-actions.tds-page-header [slot="actions"],
1086
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1087
+ display:flex;
1088
+ flex-flow:row wrap;
1089
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1090
+ align-items:flex-start;
1091
+ justify-content:flex-start;
1092
+ min-width:0;
1093
+ }
1094
+
1095
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1096
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1097
+ .tds-page-header nav[slot="navigation"] ul,
1098
+ .tds-page-header nav.tds-page-header__nav ul{
1099
+ display:flex;
1100
+ gap:var(--tds-page-header-nav-gap);
1101
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1102
+ margin:0 0 -1px;
1103
+ overflow:auto;
1104
+ list-style:none;
1105
+ background:var(--tds-page-header-nav-background);
1106
+ }
1107
+
1108
+ .tds-page-header nav[slot="navigation"] a,
1109
+ .tds-page-header nav[slot="navigation"] button,
1110
+ .tds-page-header nav.tds-page-header__nav a,
1111
+ .tds-page-header nav.tds-page-header__nav button{
1112
+ position:relative;
1113
+ display:inline-flex;
1114
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1115
+ font-size:var(--t-font-size-sm);
1116
+ line-height:22px;
1117
+ color:var(--tds-page-header-nav-item-color);
1118
+ white-space:nowrap;
1119
+ text-decoration:none;
1120
+ -webkit-appearance:none;
1121
+ -moz-appearance:none;
1122
+ appearance:none;
1123
+ cursor:pointer;
1124
+ outline-offset:-2px;
1125
+ background-color:var(--tds-page-header-nav-item-background-color);
1126
+ background-clip:padding-box;
1127
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1128
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1129
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1130
+ }
1131
+
1132
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1133
+ position:relative;
1134
+ }
1135
+
1136
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1137
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1138
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1139
+ }
1140
+
1141
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1142
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1143
+ position:absolute;
1144
+ top:-5px;
1145
+ right:-2px;
1146
+ width:10px;
1147
+ height:10px;
1148
+ content:"";
1149
+ background:var(--tds-page-header-nav-item-indicator-color);
1150
+ border-radius:50%;
1151
+ }
1152
+
1153
+ @media (prefers-reduced-motion: no-preference){
1154
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1155
+ animation:indicator-pulse 1.25s ease infinite;
1156
+ }
1157
+ }
1158
+
1159
+ .tds-page-header nav[slot="navigation"] a.selected,
1160
+ .tds-page-header nav[slot="navigation"] button.selected,
1161
+ .tds-page-header nav.tds-page-header__nav a.selected,
1162
+ .tds-page-header nav.tds-page-header__nav button.selected{
1163
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1164
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1165
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1166
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1167
+ }
1168
+
1169
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1170
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1171
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1172
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1173
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1174
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1175
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1176
+ }
1177
+
1178
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1179
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1180
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1181
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1182
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1183
+ }
1184
+
1185
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1186
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1187
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1188
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1189
+ color:var(--tds-page-header-nav-item-color-disabled);
1190
+ cursor:not-allowed;
1191
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1192
+ opacity:1;
1193
+ }
1194
+
1195
+ @media (min-width: 960px){
1196
+ .tds-page-header__primary{
1197
+ flex:1 1 max-content;
1198
+ width:auto;
1199
+ min-width:0;
1200
+ max-width:100%;
1201
+ }
1202
+
1203
+ .tds-page-header__title-bar,
1204
+ .tds-page-header--profile .tds-page-header__title-bar{
1205
+ flex-flow:row nowrap;
1206
+ row-gap:12px;
1207
+ align-items:flex-start;
1208
+ }
1209
+
1210
+ .tds-page-header [slot="actions"]{
1211
+ width:auto;
1212
+ }
1213
+
1214
+ .has-multi-actions.tds-page-header [slot="actions"],
1215
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1216
+ justify-content:flex-end;
1217
+ }
1218
+ }
1219
+
1220
+ .tds-page-header-phone,
1221
+ .tds-page-header-email{
1222
+ color:var(--tds-page-header-color);
1223
+ white-space:nowrap;
1224
+ }
1225
+
1226
+ .tds-page-header-email{
1227
+ max-width:100%;
1228
+ overflow:hidden;
1229
+ text-overflow:ellipsis;
1230
+ }
1231
+
1232
+ @keyframes indicator-pulse{
1233
+ 0%{
1234
+ opacity:.3;
1235
+ transform:scale(.9);
1236
+ }
1237
+
1238
+ 100%{
1239
+ opacity:0;
1240
+ transform:scale(1.75);
1241
+ }
1242
+ }
1243
+
1244
+
1245
+ @media (prefers-reduced-motion: no-preference){
1246
+
1247
+ :root{
1248
+ interpolate-size:allow-keywords;
1249
+ }
1250
+ }
1251
+
1252
+ @layer tds-component{
1253
+ tds-sidenav, .tds-sidenav{
1254
+ --tds-sidenav-indent:12px;
1255
+ --tds-sidenav-item-depth:0;
1256
+
1257
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1258
+
1259
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1260
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1261
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1262
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1263
+
1264
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1265
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1266
+ --tds-sidenav-item-nested-background-selected:transparent;
1267
+
1268
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1269
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1270
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1271
+
1272
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1273
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1274
+ }
1275
+
1276
+ .tds-sidenav--theme-gray{
1277
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1278
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1279
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1280
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1281
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1282
+ }
1283
+ }
1284
+
1285
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1286
+ display:flex;
1287
+ }
1288
+
1289
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1290
+ flex-direction:column;
1291
+ gap:var(--t-spacing-half);
1292
+ width:100%;
1293
+ }
1294
+
1295
+ .tds-sidenav-section-list{
1296
+ width:100%;
1297
+ padding:0;
1298
+ margin:0;
1299
+ list-style:none;
1300
+ }
1301
+
1302
+ .tds-sidenav-section-header{
1303
+ display:flex;
1304
+ align-items:baseline;
1305
+ justify-content:space-between;
1306
+ padding-top:var(--t-spacing-2);
1307
+ }
1308
+
1309
+ .tds-sidenav-section-header h2{
1310
+ margin:0;
1311
+ font-size:var(--t-font-size-sm);
1312
+ font-weight:var(--t-font-weight-semibold);
1313
+ line-height:1.35;
1314
+ color:var(--t-text-color-default-secondary);
1315
+ text-transform:uppercase;
1316
+ }
1317
+
1318
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1319
+ padding-top:0;
1320
+ }
1321
+
1322
+ .tds-sidenav-section-header [slot="label-actions"]{
1323
+ display:flex;
1324
+ gap:var(--t-spacing-half);
1325
+ align-items:center;
1326
+ }
1327
+
1328
+ .tds-sidenav-section [slot="section-actions"]{
1329
+ display:flex;
1330
+ gap:12px;
1331
+ align-items:center;
1332
+ min-height:42px;
1333
+ padding:var(--t-spacing-1) 0;
1334
+ }
1335
+
1336
+ .tds-sidenav-section-list,
1337
+ .tds-sidenav-item{
1338
+ width:100%;
1339
+ padding:0;
1340
+ margin:0;
1341
+ }
1342
+
1343
+ .tds-sidenav-item :is(a,button){
1344
+ position:relative;
1345
+ display:flex;
1346
+ gap:12px;
1347
+ align-items:center;
1348
+ width:100%;
1349
+ padding:12px;
1350
+ overflow:hidden;
1351
+ font-size:var(--t-font-size-sm);
1352
+ line-height:18px;
1353
+ color:var(--t-text-color-default-headline);
1354
+ white-space:nowrap;
1355
+ text-decoration:none;
1356
+ -webkit-appearance:none;
1357
+ -moz-appearance:none;
1358
+ appearance:none;
1359
+ cursor:pointer;
1360
+ background-color:var(--tds-sidenav-item-background, transparent);
1361
+ border:0;
1362
+ border-radius:var(--t-border-radius-default);
1363
+ transition:var(--tds-sidenav-item-transition);
1364
+ }
1365
+
1366
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1367
+ display:block;
1368
+ flex:1;
1369
+ overflow:hidden;
1370
+ text-overflow:ellipsis;
1371
+ text-align:left;
1372
+ white-space:nowrap;
1373
+ }
1374
+
1375
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1376
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1377
+ color:var(--t-text-color-default-headline);
1378
+ text-decoration:none;
1379
+ }
1380
+
1381
+ :is(.tds-sidenav-item :is(a,button)):active{
1382
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1383
+ }
1384
+
1385
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1386
+ overflow:hidden;
1387
+ color:var(--tds-sidenav-item-icon-color);
1388
+ }
1389
+
1390
+ :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{
1391
+ display:block;
1392
+ width:var(--tds-sidenav-item-icon-size);
1393
+ height:var(--tds-sidenav-item-icon-size);
1394
+ }
1395
+
1396
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1397
+ --tds-sidenav-indent:19px;
1398
+ }
1399
+
1400
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1401
+ visibility:visible;
1402
+ block-size:auto;
1403
+ opacity:1;
1404
+ }
1405
+
1406
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1407
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1408
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1409
+
1410
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1411
+ font-weight:var(--t-font-weight-semibold);
1412
+ }
1413
+
1414
+ .tds-sidenav-item:has(.tds-sidenav-section){
1415
+ display:flex;
1416
+ flex-direction:column;
1417
+ gap:var(--t-spacing-half);
1418
+ }
1419
+
1420
+ .tds-sidenav-item .tds-sidenav-section-list{
1421
+ --tds-sidenav-item-depth:1;
1422
+ gap:0;
1423
+ }
1424
+
1425
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1426
+ visibility:hidden;
1427
+ block-size:0;
1428
+ overflow-y:clip;
1429
+ opacity:0;
1430
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1431
+ }
1432
+
1433
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1434
+ --tds-sidenav-item-depth:2;
1435
+ }
1436
+
1437
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1438
+ min-height:var(--t-element-size-2xl);
1439
+ padding-block:9px;
1440
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1441
+ line-height:1;
1442
+ background-color:transparent;
1443
+ }
1444
+
1445
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1446
+ position:absolute;
1447
+ top:0;
1448
+ bottom:0;
1449
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1450
+ width:2px;
1451
+ content:"";
1452
+ background-color:var(--tds-sidenav-item-nested-border-color);
1453
+ transition:var(--tds-sidenav-item-transition);
1454
+ }
1455
+
1456
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1457
+ position:absolute;
1458
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1459
+ z-index:-1;
1460
+ height:100%;
1461
+ content:"";
1462
+ background-color:var(--tds-sidenav-item-nested-background);
1463
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1464
+ transition:var(--tds-sidenav-item-transition);
1465
+ }
1466
+
1467
+ :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)){
1468
+ display:block;
1469
+ text-align:left;
1470
+ white-space:normal;
1471
+ }
1472
+
1473
+ :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{
1474
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1475
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1476
+ }
1477
+
1478
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1479
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1480
+ }
1481
+
1482
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1483
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1484
+ font-weight:var(--t-font-weight-medium);
1485
+ }
1486
+
1487
+ .tds-sidenav-responsive-header{
1488
+ display:flex;
1489
+ gap:var(--t-spacing-2);
1490
+ align-items:center;
1491
+ width:100%;
1492
+ }
1493
+
1494
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1495
+ order:0;
1496
+ }
1497
+
1498
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1499
+ flex:1;
1500
+ order:1;
1501
+ margin:0;
1502
+ font-size:var(--t-font-size-lg);
1503
+ font-weight:var(--t-font-weight-medium);
1504
+ color:var(--t-text-color-default-headline);
1505
+ }
1506
+
1507
+ @media (max-width: 719px){
1508
+ .tds-sidenav-collapse{
1509
+ z-index:10001;
1510
+ display:none;
1511
+ max-width:min(448px, calc(100vw - 48px));
1512
+ padding:0;
1513
+ margin:12px 0;
1514
+ overflow:hidden;
1515
+ outline:0;
1516
+ background:var(--t-surface-color-card);
1517
+ border:0;
1518
+ border-radius:6px;
1519
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1520
+ will-change:transform;
1521
+ position-area:bottom span-right;
1522
+ }
1523
+
1524
+ .tds-sidenav-scroll-container{
1525
+ --webkit-overflow-scrolling:touch;
1526
+ display:block;
1527
+ width:100%;
1528
+ height:-moz-fit-content;
1529
+ height:fit-content;
1530
+ padding:var(--t-spacing-2);
1531
+ overflow-y:auto;
1532
+ }
1533
+
1534
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1535
+ display:none;
1536
+ }
1537
+ @supports selector(:popover-open){
1538
+ .tds-sidenav-collapse:popover-open{
1539
+ display:flex;
1540
+ }
1541
+ }
1542
+ @supports not selector(:popover-open){
1543
+ .tds-sidenav-collapse.\:popover-open{
1544
+ display:flex;
1545
+ }
1546
+ }
1547
+ }
1548
+
1549
+ @media (min-width: 720px){
1550
+ .tds-sidenav-responsive-header{
1551
+ display:none;
1552
+ }
1553
+ }
1554
+
1555
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1556
+ display:none;
1557
+ }
1558
+
1559
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1560
+ display:block;
1561
+ }
1562
+
1563
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1564
+ display:flex;
1565
+ flex-direction:column;
1566
+ }
1567
+
1568
+ .tds-loading-spinner{
1569
+ --tds-loading-spinner-size:1.25em;
1570
+
1571
+ position:absolute;
1572
+ right:0;
1573
+ left:0;
1574
+ visibility:var(--tds-loading-spinner-visibility, hidden);
1575
+ width:var(--tds-loading-spinner-size);
1576
+ height:var(--tds-loading-spinner-size);
1577
+ margin:auto;
1578
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1579
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
1580
+ border-radius:50%;
1581
+ animation:spinner-rotate 500ms infinite linear;
1582
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
1339
1583
  }
1340
1584
 
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);
1585
+ @keyframes spinner-rotate{
1586
+ to{
1587
+ transform:rotate(360deg);
1588
+ }
1563
1589
  }
1590
+
1591
+ @media (prefers-reduced-motion: reduce){
1592
+ [class*="--loading"] .tds-loading-spinner{
1593
+ --tds-loading-spinner-animation-play-state:paused;
1594
+ }
1564
1595
  }
1565
1596
 
1566
1597
  .symbol{