@carbon/ibm-products 2.6.1 → 2.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. package/css/index-full-carbon.css +6368 -5849
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +24 -23
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +1428 -278
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +1902 -1767
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelectRow.js +2 -1
  18. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -7
  19. package/es/components/ButtonMenu/ButtonMenu.js +4 -0
  20. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +21 -28
  21. package/es/components/ComboButton/ComboButton.js +5 -0
  22. package/es/components/CreateTearsheet/CreateTearsheet.js +30 -14
  23. package/es/components/CreateTearsheet/CreateTearsheetStep.js +10 -4
  24. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -0
  25. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  26. package/es/components/Datagrid/Datagrid/Datagrid.js +12 -7
  27. package/es/components/Datagrid/Datagrid/DatagridContent.js +18 -14
  28. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +128 -10
  29. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -14
  30. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +1 -23
  31. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +111 -0
  32. package/es/components/Datagrid/Datagrid.docs-page.js +6 -0
  33. package/es/components/Datagrid/useDatagrid.js +5 -2
  34. package/es/components/Datagrid/utils/DatagridActions.js +9 -10
  35. package/es/components/Datagrid/utils/getColTitle.js +25 -0
  36. package/es/components/NotificationsPanel/NotificationsPanel.js +8 -10
  37. package/es/components/OptionsTile/OptionsTile.js +2 -4
  38. package/es/components/PageHeader/PageHeaderUtils.js +10 -3
  39. package/es/components/TooltipTrigger/TooltipTrigger.js +62 -0
  40. package/es/components/TooltipTrigger/index.js +8 -0
  41. package/es/components/TooltipTrigger/useExample.js +49 -0
  42. package/es/components/UserProfileImage/UserProfileImage.js +7 -6
  43. package/es/global/js/hooks/useCreateComponentStepChange.js +98 -49
  44. package/es/global/js/hooks/useResizeObserver.js +19 -3
  45. package/es/global/js/hooks/useRetrieveStepData.js +1 -1
  46. package/es/global/js/utils/StoryDocsPage.js +0 -1
  47. package/es/global/js/utils/test-helper.js +97 -43
  48. package/es/settings.js +8 -2
  49. package/lib/components/AddSelect/AddSelectRow.js +2 -1
  50. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
  51. package/lib/components/ButtonMenu/ButtonMenu.js +5 -1
  52. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +20 -27
  53. package/lib/components/ComboButton/ComboButton.js +5 -0
  54. package/lib/components/CreateTearsheet/CreateTearsheet.js +30 -14
  55. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +10 -4
  56. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -0
  57. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  58. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -7
  59. package/lib/components/Datagrid/Datagrid/DatagridContent.js +17 -13
  60. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +131 -10
  61. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -13
  62. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -26
  63. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +122 -0
  64. package/lib/components/Datagrid/Datagrid.docs-page.js +6 -0
  65. package/lib/components/Datagrid/useDatagrid.js +5 -2
  66. package/lib/components/Datagrid/utils/DatagridActions.js +8 -9
  67. package/lib/components/Datagrid/utils/getColTitle.js +32 -0
  68. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -10
  69. package/lib/components/OptionsTile/OptionsTile.js +2 -4
  70. package/lib/components/PageHeader/PageHeaderUtils.js +10 -3
  71. package/lib/components/TooltipTrigger/TooltipTrigger.js +67 -0
  72. package/lib/components/TooltipTrigger/index.js +12 -0
  73. package/lib/components/TooltipTrigger/useExample.js +58 -0
  74. package/lib/components/UserProfileImage/UserProfileImage.js +6 -5
  75. package/lib/global/js/hooks/useCreateComponentStepChange.js +98 -49
  76. package/lib/global/js/hooks/useResizeObserver.js +19 -3
  77. package/lib/global/js/hooks/useRetrieveStepData.js +1 -1
  78. package/lib/global/js/utils/StoryDocsPage.js +0 -1
  79. package/lib/global/js/utils/test-helper.js +99 -44
  80. package/lib/settings.js +8 -2
  81. package/package.json +14 -14
  82. package/scss/components/APIKeyModal/_storybook-styles.scss +1 -1
  83. package/scss/components/AboutModal/_storybook-styles.scss +1 -1
  84. package/scss/components/ActionSet/_storybook-styles.scss +1 -1
  85. package/scss/components/CreateFullPage/_storybook-styles.scss +1 -1
  86. package/scss/components/CreateModal/_storybook-styles.scss +1 -1
  87. package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
  88. package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
  89. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +1 -1
  90. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  91. package/scss/components/Datagrid/styles/_datagrid.scss +65 -0
  92. package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
  93. package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
  94. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
  95. package/scss/components/EditUpdateCards/_storybook-styles.scss +1 -1
  96. package/scss/components/ExpressiveCard/_storybook-styles.scss +1 -1
  97. package/scss/components/NotificationsPanel/_storybook-styles.scss +1 -1
  98. package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
  99. package/scss/components/PageHeader/_page-header.scss +8 -4
  100. package/scss/components/Tearsheet/_storybook-styles.scss +1 -1
  101. package/scss/components/TooltipTrigger/_index-with-carbon.scss +8 -0
  102. package/scss/components/TooltipTrigger/_index.scss +8 -0
  103. package/scss/components/TooltipTrigger/_storybook-styles.scss +6 -0
  104. package/scss/components/TooltipTrigger/_tooltip-trigger.scss +29 -0
  105. package/scss/components/WebTerminal/_storybook-styles.scss +1 -1
  106. package/scss/components/_index-with-carbon.scss +1 -0
  107. package/scss/components/_index.scss +1 -0
@@ -1,3 +1,222 @@
1
+ .cds--layout--size-xs {
2
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
3
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
4
+ }
5
+
6
+ .cds--layout-constraint--size__default-xs {
7
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
8
+ }
9
+
10
+ .cds--layout-constraint--size__min-xs {
11
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
12
+ }
13
+
14
+ .cds--layout-constraint--size__max-xs {
15
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
16
+ }
17
+
18
+ .cds--layout--size-sm {
19
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
20
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
21
+ }
22
+
23
+ .cds--layout-constraint--size__default-sm {
24
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
25
+ }
26
+
27
+ .cds--layout-constraint--size__min-sm {
28
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
29
+ }
30
+
31
+ .cds--layout-constraint--size__max-sm {
32
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
33
+ }
34
+
35
+ .cds--layout--size-md {
36
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
37
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
38
+ }
39
+
40
+ .cds--layout-constraint--size__default-md {
41
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
42
+ }
43
+
44
+ .cds--layout-constraint--size__min-md {
45
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
46
+ }
47
+
48
+ .cds--layout-constraint--size__max-md {
49
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
50
+ }
51
+
52
+ .cds--layout--size-lg {
53
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
54
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
55
+ }
56
+
57
+ .cds--layout-constraint--size__default-lg {
58
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
59
+ }
60
+
61
+ .cds--layout-constraint--size__min-lg {
62
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
63
+ }
64
+
65
+ .cds--layout-constraint--size__max-lg {
66
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
67
+ }
68
+
69
+ .cds--layout--size-xl {
70
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
71
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
72
+ }
73
+
74
+ .cds--layout-constraint--size__default-xl {
75
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
76
+ }
77
+
78
+ .cds--layout-constraint--size__min-xl {
79
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
80
+ }
81
+
82
+ .cds--layout-constraint--size__max-xl {
83
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
84
+ }
85
+
86
+ .cds--layout--size-2xl {
87
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
88
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
89
+ }
90
+
91
+ .cds--layout-constraint--size__default-2xl {
92
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
93
+ }
94
+
95
+ .cds--layout-constraint--size__min-2xl {
96
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
97
+ }
98
+
99
+ .cds--layout-constraint--size__max-2xl {
100
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
101
+ }
102
+
103
+ .cds--layout--density-condensed {
104
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
105
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
106
+ }
107
+
108
+ .cds--layout-constraint--density__default-condensed {
109
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
110
+ }
111
+
112
+ .cds--layout-constraint--density__min-condensed {
113
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
114
+ }
115
+
116
+ .cds--layout-constraint--density__max-condensed {
117
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
118
+ }
119
+
120
+ .cds--layout--density-normal {
121
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
122
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
123
+ }
124
+
125
+ .cds--layout-constraint--density__default-normal {
126
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
127
+ }
128
+
129
+ .cds--layout-constraint--density__min-normal {
130
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
131
+ }
132
+
133
+ .cds--layout-constraint--density__max-normal {
134
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
135
+ }
136
+
137
+ :root {
138
+ --cds-layout-size-height-xs: 1.5rem;
139
+ --cds-layout-size-height-sm: 2rem;
140
+ --cds-layout-size-height-md: 2.5rem;
141
+ --cds-layout-size-height-lg: 3rem;
142
+ --cds-layout-size-height-xl: 4rem;
143
+ --cds-layout-size-height-2xl: 5rem;
144
+ --cds-layout-size-height-min: 0px;
145
+ --cds-layout-size-height-max: 999999999px;
146
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
147
+ --cds-layout-density-padding-inline-normal: 1rem;
148
+ --cds-layout-density-padding-inline-min: 0px;
149
+ --cds-layout-density-padding-inline-max: 999999999px;
150
+ }
151
+
152
+ :root {
153
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
154
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
155
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
156
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
157
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
158
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
159
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
160
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
161
+ --cds-field: var(--cds-field-01, #f4f4f4);
162
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
163
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
164
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
165
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
166
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
167
+ }
168
+
169
+ .cds--layer-one {
170
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
171
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
172
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
173
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
174
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
175
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
176
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
177
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
178
+ --cds-field: var(--cds-field-01, #f4f4f4);
179
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
180
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
181
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
182
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
183
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
184
+ }
185
+
186
+ .cds--layer-two {
187
+ --cds-layer: var(--cds-layer-02, #ffffff);
188
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
189
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
190
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
191
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
192
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
193
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
194
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
195
+ --cds-field: var(--cds-field-02, #ffffff);
196
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
197
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
198
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
199
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
200
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
201
+ }
202
+
203
+ .cds--layer-three {
204
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
205
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
206
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
207
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
208
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
209
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
210
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
211
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
212
+ --cds-field: var(--cds-field-03, #f4f4f4);
213
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
214
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
215
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
216
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
217
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
218
+ }
219
+
1
220
  @keyframes hide-feedback {
2
221
  0% {
3
222
  opacity: 1;
@@ -53,24 +272,869 @@
53
272
  transform: scaleX(0);
54
273
  transform-origin: left;
55
274
  }
56
- 100% {
57
- opacity: 0.3;
58
- transform: scaleX(0);
59
- transform-origin: left;
275
+ 100% {
276
+ opacity: 0.3;
277
+ transform: scaleX(0);
278
+ transform-origin: left;
279
+ }
280
+ }
281
+ .cds--assistive-text,
282
+ .cds--visually-hidden {
283
+ position: absolute;
284
+ overflow: hidden;
285
+ width: 1px;
286
+ height: 1px;
287
+ padding: 0;
288
+ border: 0;
289
+ margin: -1px;
290
+ clip: rect(0, 0, 0, 0);
291
+ visibility: inherit;
292
+ white-space: nowrap;
293
+ }
294
+
295
+ .cds--popover-container {
296
+ position: relative;
297
+ display: inline-block;
298
+ }
299
+
300
+ .cds--popover--high-contrast .cds--popover {
301
+ --cds-popover-background-color: var(--cds-background-inverse, #393939);
302
+ --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
303
+ }
304
+
305
+ .cds--popover--drop-shadow .cds--popover {
306
+ --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
307
+ }
308
+
309
+ .cds--popover--caret {
310
+ --cds-popover-offset: 0.625rem;
311
+ }
312
+
313
+ .cds--popover {
314
+ position: absolute;
315
+ z-index: 6000;
316
+ filter: var(--cds-popover-drop-shadow, none);
317
+ inset: 0;
318
+ pointer-events: none;
319
+ }
320
+
321
+ .cds--popover-content {
322
+ box-sizing: border-box;
323
+ padding: 0;
324
+ border: 0;
325
+ margin: 0;
326
+ font-family: inherit;
327
+ font-size: 100%;
328
+ vertical-align: baseline;
329
+ position: absolute;
330
+ z-index: 6000;
331
+ display: none;
332
+ width: max-content;
333
+ max-width: 23rem;
334
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
335
+ border-radius: var(--cds-popover-border-radius, 2px);
336
+ color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
337
+ pointer-events: auto;
338
+ }
339
+ .cds--popover-content *,
340
+ .cds--popover-content *::before,
341
+ .cds--popover-content *::after {
342
+ box-sizing: inherit;
343
+ }
344
+
345
+ .cds--popover--open > .cds--popover > .cds--popover-content {
346
+ display: block;
347
+ }
348
+
349
+ .cds--popover-content::before {
350
+ position: absolute;
351
+ display: none;
352
+ content: "";
353
+ }
354
+
355
+ .cds--popover--open > .cds--popover > .cds--popover-content::before {
356
+ display: block;
357
+ }
358
+
359
+ .cds--popover-caret {
360
+ position: absolute;
361
+ z-index: 6000;
362
+ display: none;
363
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
364
+ will-change: transform;
365
+ }
366
+
367
+ .cds--popover--open > .cds--popover > .cds--popover-caret {
368
+ display: block;
369
+ }
370
+
371
+ .cds--popover--tab-tip > .cds--popover .cds--popover-caret {
372
+ display: none;
373
+ }
374
+
375
+ .cds--popover--bottom > .cds--popover .cds--popover-content {
376
+ bottom: 0;
377
+ left: 50%;
378
+ transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
379
+ }
380
+
381
+ .cds--popover--bottom-left > .cds--popover .cds--popover-content {
382
+ bottom: 0;
383
+ left: 0;
384
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
385
+ }
386
+
387
+ .cds--popover--bottom-right > .cds--popover .cds--popover-content {
388
+ right: 0;
389
+ bottom: 0;
390
+ transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
391
+ }
392
+
393
+ .cds--popover--bottom > .cds--popover .cds--popover-content::before,
394
+ .cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
395
+ .cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
396
+ top: 0;
397
+ right: 0;
398
+ left: 0;
399
+ height: var(--cds-popover-offset, 0rem);
400
+ transform: translateY(-100%);
401
+ }
402
+
403
+ .cds--popover--bottom > .cds--popover .cds--popover-caret,
404
+ .cds--popover--bottom-left > .cds--popover .cds--popover-caret,
405
+ .cds--popover--bottom-right > .cds--popover .cds--popover-caret {
406
+ bottom: 0;
407
+ left: 50%;
408
+ width: var(--cds-popover-caret-width, 0.75rem);
409
+ height: var(--cds-popover-caret-height, 0.375rem);
410
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
411
+ transform: translate(-50%, var(--cds-popover-offset, 0rem));
412
+ }
413
+
414
+ .cds--popover--top > .cds--popover .cds--popover-content {
415
+ top: 0;
416
+ left: 50%;
417
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
418
+ }
419
+
420
+ .cds--popover--top-left > .cds--popover .cds--popover-content {
421
+ top: 0;
422
+ left: 0;
423
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
424
+ }
425
+
426
+ .cds--popover--top-right > .cds--popover .cds--popover-content {
427
+ top: 0;
428
+ right: 0;
429
+ transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
430
+ }
431
+
432
+ .cds--popover--top > .cds--popover .cds--popover-content::before,
433
+ .cds--popover--top-left > .cds--popover .cds--popover-content::before,
434
+ .cds--popover--top-right > .cds--popover .cds--popover-content::before {
435
+ right: 0;
436
+ bottom: 0;
437
+ left: 0;
438
+ height: var(--cds-popover-offset, 0rem);
439
+ transform: translateY(100%);
440
+ }
441
+
442
+ .cds--popover--top > .cds--popover .cds--popover-caret,
443
+ .cds--popover--top-left > .cds--popover .cds--popover-caret,
444
+ .cds--popover--top-right > .cds--popover .cds--popover-caret {
445
+ top: 0;
446
+ left: 50%;
447
+ width: var(--cds-popover-caret-width, 0.75rem);
448
+ height: var(--cds-popover-caret-height, 0.375rem);
449
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
450
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
451
+ }
452
+
453
+ .cds--popover--right > .cds--popover .cds--popover-content {
454
+ top: 50%;
455
+ left: 100%;
456
+ transform: translate(var(--cds-popover-offset, 0rem), -50%);
457
+ }
458
+
459
+ .cds--popover--right-top > .cds--popover .cds--popover-content {
460
+ top: 50%;
461
+ left: 100%;
462
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
463
+ }
464
+
465
+ .cds--popover--right-bottom > .cds--popover .cds--popover-content {
466
+ bottom: 50%;
467
+ left: 100%;
468
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
469
+ }
470
+
471
+ .cds--popover--right > .cds--popover .cds--popover-content::before,
472
+ .cds--popover--right-top > .cds--popover .cds--popover-content::before,
473
+ .cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
474
+ top: 0;
475
+ bottom: 0;
476
+ left: 0;
477
+ width: var(--cds-popover-offset, 0rem);
478
+ transform: translateX(-100%);
479
+ }
480
+
481
+ .cds--popover--right > .cds--popover .cds--popover-caret,
482
+ .cds--popover--right-top > .cds--popover .cds--popover-caret,
483
+ .cds--popover--right-bottom > .cds--popover .cds--popover-caret {
484
+ top: 50%;
485
+ left: 100%;
486
+ width: var(--cds-popover-caret-height, 0.375rem);
487
+ height: var(--cds-popover-caret-width, 0.75rem);
488
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
489
+ transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
490
+ }
491
+
492
+ .cds--popover--left > .cds--popover .cds--popover-content {
493
+ top: 50%;
494
+ right: 100%;
495
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
496
+ }
497
+
498
+ .cds--popover--left-top > .cds--popover .cds--popover-content {
499
+ top: -50%;
500
+ right: 100%;
501
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
502
+ }
503
+
504
+ .cds--popover--left-bottom > .cds--popover .cds--popover-content {
505
+ right: 100%;
506
+ bottom: -50%;
507
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
508
+ }
509
+
510
+ .cds--popover--left > .cds--popover .cds--popover-content::before,
511
+ .cds--popover--left-top > .cds--popover .cds--popover-content::before,
512
+ .cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
513
+ top: 0;
514
+ right: 0;
515
+ bottom: 0;
516
+ width: var(--cds-popover-offset, 0rem);
517
+ transform: translateX(100%);
518
+ }
519
+
520
+ .cds--popover--left > .cds--popover .cds--popover-caret,
521
+ .cds--popover--left-top > .cds--popover .cds--popover-caret,
522
+ .cds--popover--left-bottom > .cds--popover .cds--popover-caret {
523
+ top: 50%;
524
+ right: 100%;
525
+ width: var(--cds-popover-caret-height, 0.375rem);
526
+ height: var(--cds-popover-caret-width, 0.75rem);
527
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
528
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
529
+ }
530
+
531
+ .cds--popover--tab-tip > .cds--popover .cds--popover-content {
532
+ border-radius: 0;
533
+ }
534
+
535
+ .cds--popover--tab-tip .cds--popover {
536
+ will-change: filter;
537
+ }
538
+
539
+ .cds--popover--tab-tip__button {
540
+ box-sizing: border-box;
541
+ padding: 0;
542
+ border: 0;
543
+ margin: 0;
544
+ font-family: inherit;
545
+ font-size: 100%;
546
+ vertical-align: baseline;
547
+ display: inline-block;
548
+ padding: 0;
549
+ border: 0;
550
+ appearance: none;
551
+ background: none;
552
+ cursor: pointer;
553
+ text-align: start;
554
+ width: 100%;
555
+ position: relative;
556
+ display: inline-flex;
557
+ width: 2rem;
558
+ height: 2rem;
559
+ align-items: center;
560
+ justify-content: center;
561
+ }
562
+ .cds--popover--tab-tip__button *,
563
+ .cds--popover--tab-tip__button *::before,
564
+ .cds--popover--tab-tip__button *::after {
565
+ box-sizing: inherit;
566
+ }
567
+ .cds--popover--tab-tip__button::-moz-focus-inner {
568
+ border: 0;
569
+ }
570
+ .cds--popover--tab-tip__button:focus {
571
+ outline: 2px solid var(--cds-focus, #0f62fe);
572
+ outline-offset: -2px;
573
+ }
574
+ @media screen and (prefers-contrast) {
575
+ .cds--popover--tab-tip__button:focus {
576
+ outline-style: dotted;
577
+ }
578
+ }
579
+ .cds--popover--tab-tip__button:hover {
580
+ background-color: var(--cds-layer-hover);
581
+ }
582
+
583
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
584
+ background: var(--cds-layer);
585
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
586
+ }
587
+
588
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
589
+ position: absolute;
590
+ z-index: 6001;
591
+ bottom: 0;
592
+ width: 100%;
593
+ height: 2px;
594
+ background: var(--cds-layer);
595
+ content: "";
596
+ }
597
+
598
+ .cds--popover--tab-tip__button svg {
599
+ fill: var(--cds-icon-primary, #161616);
600
+ }
601
+
602
+ .cds--tooltip {
603
+ --cds-popover-offset: 12px;
604
+ }
605
+
606
+ .cds--tooltip-content {
607
+ font-size: var(--cds-body-01-font-size, 0.875rem);
608
+ font-weight: var(--cds-body-01-font-weight, 400);
609
+ line-height: var(--cds-body-01-line-height, 1.42857);
610
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
611
+ max-width: 18rem;
612
+ padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
613
+ color: var(--cds-text-inverse, #ffffff);
614
+ }
615
+
616
+ .cds--icon-tooltip {
617
+ --cds-tooltip-padding-block: 0.125rem;
618
+ --cds-popover-caret-width: 0.5rem;
619
+ --cds-popover-caret-height: 0.25rem;
620
+ --cds-popover-offset: 0.5rem;
621
+ }
622
+
623
+ .cds--icon-tooltip .cds--tooltip-content {
624
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
625
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
626
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
627
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
628
+ }
629
+
630
+ .cds--definition-term {
631
+ box-sizing: border-box;
632
+ padding: 0;
633
+ border: 0;
634
+ margin: 0;
635
+ font-family: inherit;
636
+ font-size: 100%;
637
+ vertical-align: baseline;
638
+ display: inline-block;
639
+ padding: 0;
640
+ border: 0;
641
+ appearance: none;
642
+ background: none;
643
+ cursor: pointer;
644
+ text-align: start;
645
+ width: 100%;
646
+ border-bottom: 1px dotted var(--cds-border-strong);
647
+ border-radius: 0;
648
+ color: var(--cds-text-primary, #161616);
649
+ }
650
+ .cds--definition-term *,
651
+ .cds--definition-term *::before,
652
+ .cds--definition-term *::after {
653
+ box-sizing: inherit;
654
+ }
655
+ .cds--definition-term::-moz-focus-inner {
656
+ border: 0;
657
+ }
658
+
659
+ .cds--definition-term:focus {
660
+ outline: 1px solid var(--cds-focus, #0f62fe);
661
+ border-bottom-color: var(--cds-border-interactive, #0f62fe);
662
+ }
663
+ @media screen and (prefers-contrast) {
664
+ .cds--definition-term:focus {
665
+ outline-style: dotted;
666
+ }
667
+ }
668
+
669
+ .cds--definition-term:hover {
670
+ border-bottom-color: var(--cds-border-interactive, #0f62fe);
671
+ }
672
+
673
+ .cds--definition-tooltip {
674
+ font-size: var(--cds-body-01-font-size, 0.875rem);
675
+ font-weight: var(--cds-body-01-font-weight, 400);
676
+ line-height: var(--cds-body-01-line-height, 1.42857);
677
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
678
+ max-width: 11rem;
679
+ padding: 0.5rem 1rem;
680
+ }
681
+
682
+ .cds--btn {
683
+ --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
684
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
685
+ --temp-1lh: (
686
+ var(--cds-body-compact-01-line-height, 1.28572) * 1em
687
+ );
688
+ --temp-expressive-1lh: (
689
+ var(--cds-body-compact-02-line-height, 1.375) * 1em
690
+ );
691
+ --temp-padding-block-max: calc(
692
+ (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
693
+ 0.0625rem
694
+ );
695
+ box-sizing: border-box;
696
+ padding: 0;
697
+ border: 0;
698
+ margin: 0;
699
+ font-family: inherit;
700
+ font-size: 100%;
701
+ vertical-align: baseline;
702
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
703
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
704
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
705
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
706
+ position: relative;
707
+ display: inline-flex;
708
+ width: max-content;
709
+ max-width: 20rem;
710
+ min-height: var(--cds-layout-size-height-local);
711
+ flex-shrink: 0;
712
+ justify-content: space-between;
713
+ margin: 0;
714
+ border-radius: 0;
715
+ cursor: pointer;
716
+ outline: none;
717
+ padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
718
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
719
+ padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
720
+ text-align: left;
721
+ text-decoration: none;
722
+ transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
723
+ vertical-align: top;
724
+ }
725
+ .cds--btn *,
726
+ .cds--btn *::before,
727
+ .cds--btn *::after {
728
+ box-sizing: inherit;
729
+ }
730
+ .cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus {
731
+ border-color: var(--cds-button-disabled, #c6c6c6);
732
+ background: var(--cds-button-disabled, #c6c6c6);
733
+ box-shadow: none;
734
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
735
+ cursor: not-allowed;
736
+ }
737
+ .cds--btn .cds--btn__icon {
738
+ position: absolute;
739
+ top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
740
+ right: var(--cds-layout-density-padding-inline-local);
741
+ width: 1rem;
742
+ height: 1rem;
743
+ flex-shrink: 0;
744
+ margin-block-start: 0.0625rem;
745
+ }
746
+
747
+ .cds--btn::-moz-focus-inner {
748
+ padding: 0;
749
+ border: 0;
750
+ }
751
+
752
+ .cds--btn--primary {
753
+ border-width: 1px;
754
+ border-style: solid;
755
+ border-color: transparent;
756
+ background-color: var(--cds-button-primary, #0f62fe);
757
+ color: var(--cds-text-on-color, #ffffff);
758
+ }
759
+ .cds--btn--primary:hover {
760
+ background-color: var(--cds-button-primary-hover, #0050e6);
761
+ }
762
+ .cds--btn--primary:focus {
763
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
764
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
765
+ }
766
+ .cds--btn--primary:active {
767
+ background-color: var(--cds-button-primary-active, #002d9c);
768
+ }
769
+ .cds--btn--primary .cds--btn__icon,
770
+ .cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
771
+ fill: currentColor;
772
+ }
773
+ .cds--btn--primary:hover {
774
+ color: var(--cds-text-on-color, #ffffff);
775
+ }
776
+
777
+ .cds--btn--secondary {
778
+ border-width: 1px;
779
+ border-style: solid;
780
+ border-color: transparent;
781
+ background-color: var(--cds-button-secondary, #393939);
782
+ color: var(--cds-text-on-color, #ffffff);
783
+ }
784
+ .cds--btn--secondary:hover {
785
+ background-color: var(--cds-button-secondary-hover, #474747);
786
+ }
787
+ .cds--btn--secondary:focus {
788
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
789
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
790
+ }
791
+ .cds--btn--secondary:active {
792
+ background-color: var(--cds-button-secondary-active, #6f6f6f);
793
+ }
794
+ .cds--btn--secondary .cds--btn__icon,
795
+ .cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
796
+ fill: currentColor;
797
+ }
798
+ .cds--btn--secondary:hover, .cds--btn--secondary:focus {
799
+ color: var(--cds-text-on-color, #ffffff);
800
+ }
801
+
802
+ .cds--btn--tertiary {
803
+ border-width: 1px;
804
+ border-style: solid;
805
+ border-color: var(--cds-button-tertiary, #0f62fe);
806
+ background-color: transparent;
807
+ color: var(--cds-button-tertiary, #0f62fe);
808
+ }
809
+ .cds--btn--tertiary:hover {
810
+ background-color: var(--cds-button-tertiary-hover, #0050e6);
811
+ }
812
+ .cds--btn--tertiary:focus {
813
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
814
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
815
+ }
816
+ .cds--btn--tertiary:active {
817
+ background-color: var(--cds-button-tertiary-active, #002d9c);
818
+ }
819
+ .cds--btn--tertiary .cds--btn__icon,
820
+ .cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
821
+ fill: currentColor;
822
+ }
823
+ .cds--btn--tertiary:hover {
824
+ color: var(--cds-text-inverse, #ffffff);
825
+ }
826
+ .cds--btn--tertiary:focus {
827
+ background-color: var(--cds-button-tertiary, #0f62fe);
828
+ color: var(--cds-text-inverse, #ffffff);
829
+ }
830
+ .cds--btn--tertiary:active {
831
+ border-color: transparent;
832
+ background-color: var(--cds-button-tertiary-active, #002d9c);
833
+ color: var(--cds-text-inverse, #ffffff);
834
+ }
835
+ .cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus {
836
+ background: transparent;
837
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
838
+ outline: none;
839
+ }
840
+
841
+ .cds--btn--ghost {
842
+ border-width: 1px;
843
+ border-style: solid;
844
+ border-color: transparent;
845
+ background-color: transparent;
846
+ color: var(--cds-link-primary, #0f62fe);
847
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
848
+ }
849
+ .cds--btn--ghost:hover {
850
+ background-color: var(--cds-layer-hover);
851
+ }
852
+ .cds--btn--ghost:focus {
853
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
854
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
855
+ }
856
+ .cds--btn--ghost:active {
857
+ background-color: var(--cds-layer-active);
858
+ }
859
+ .cds--btn--ghost .cds--btn__icon,
860
+ .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
861
+ fill: currentColor;
862
+ }
863
+ .cds--btn--ghost .cds--btn__icon {
864
+ position: static;
865
+ margin-left: 0.5rem;
866
+ }
867
+ .cds--btn--ghost:hover, .cds--btn--ghost:active {
868
+ color: var(--cds-link-primary-hover, #0043ce);
869
+ }
870
+ .cds--btn--ghost:active {
871
+ background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
872
+ }
873
+ .cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus {
874
+ border-color: transparent;
875
+ background: transparent;
876
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
877
+ outline: none;
878
+ }
879
+ .cds--btn--ghost:not([disabled]) svg {
880
+ fill: var(--cds-icon-primary, #161616);
881
+ }
882
+
883
+ .cds--btn--icon-only {
884
+ width: var(--cds-layout-size-height-local);
885
+ height: var(--cds-layout-size-height-local);
886
+ justify-content: center;
887
+ padding: 0;
888
+ padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
889
+ }
890
+ .cds--btn--icon-only > :first-child {
891
+ min-width: 1rem;
892
+ margin-block-start: 0.0625rem;
893
+ }
894
+ .cds--btn--icon-only .cds--btn__icon {
895
+ position: static;
896
+ }
897
+ .cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
898
+ margin: 0;
899
+ }
900
+
901
+ .cds--btn--icon-only.cds--btn--selected {
902
+ background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
903
+ }
904
+
905
+ .cds--btn path[data-icon-path=inner-path] {
906
+ fill: none;
907
+ }
908
+
909
+ .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
910
+ .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
911
+ fill: var(--cds-icon-primary, #161616);
912
+ }
913
+
914
+ .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
915
+ .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon,
916
+ .cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon {
917
+ fill: var(--cds-icon-on-color-disabled, #8d8d8d);
918
+ }
919
+
920
+ .cds--btn--ghost.cds--btn--icon-only[disabled] {
921
+ cursor: not-allowed;
922
+ }
923
+
924
+ .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
925
+ cursor: not-allowed;
926
+ }
927
+
928
+ .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
929
+ pointer-events: none;
930
+ }
931
+
932
+ .cds--btn--danger {
933
+ border-width: 1px;
934
+ border-style: solid;
935
+ border-color: transparent;
936
+ background-color: var(--cds-button-danger-primary, #da1e28);
937
+ color: var(--cds-text-on-color, #ffffff);
938
+ }
939
+ .cds--btn--danger:hover {
940
+ background-color: var(--cds-button-danger-hover, #b81921);
941
+ }
942
+ .cds--btn--danger:focus {
943
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
944
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
945
+ }
946
+ .cds--btn--danger:active {
947
+ background-color: var(--cds-button-danger-active, #750e13);
948
+ }
949
+ .cds--btn--danger .cds--btn__icon,
950
+ .cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
951
+ fill: currentColor;
952
+ }
953
+ .cds--btn--danger:hover {
954
+ color: var(--cds-text-on-color, #ffffff);
955
+ }
956
+ .cds--btn--danger--tertiary {
957
+ border-width: 1px;
958
+ border-style: solid;
959
+ border-color: var(--cds-button-danger-secondary, #da1e28);
960
+ background-color: transparent;
961
+ color: var(--cds-button-danger-secondary, #da1e28);
962
+ }
963
+ .cds--btn--danger--tertiary:hover {
964
+ background-color: var(--cds-button-danger-hover, #b81921);
965
+ }
966
+ .cds--btn--danger--tertiary:focus {
967
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
968
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
969
+ }
970
+ .cds--btn--danger--tertiary:active {
971
+ background-color: var(--cds-button-danger-active, #750e13);
972
+ }
973
+ .cds--btn--danger--tertiary .cds--btn__icon,
974
+ .cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
975
+ fill: currentColor;
976
+ }
977
+ .cds--btn--danger--tertiary:hover {
978
+ border-color: var(--cds-button-danger-hover, #b81921);
979
+ color: var(--cds-text-on-color, #ffffff);
980
+ }
981
+ .cds--btn--danger--tertiary:focus {
982
+ background-color: var(--cds-button-danger-primary, #da1e28);
983
+ color: var(--cds-text-on-color, #ffffff);
984
+ }
985
+ .cds--btn--danger--tertiary:active {
986
+ border-color: var(--cds-button-danger-active, #750e13);
987
+ background-color: var(--cds-button-danger-active, #750e13);
988
+ color: var(--cds-text-on-color, #ffffff);
989
+ }
990
+ .cds--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus {
991
+ background: transparent;
992
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
993
+ outline: none;
994
+ }
995
+ .cds--btn--danger--ghost {
996
+ border-width: 1px;
997
+ border-style: solid;
998
+ border-color: transparent;
999
+ background-color: transparent;
1000
+ color: var(--cds-button-danger-secondary, #da1e28);
1001
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
1002
+ }
1003
+ .cds--btn--danger--ghost:hover {
1004
+ background-color: var(--cds-button-danger-hover, #b81921);
1005
+ }
1006
+ .cds--btn--danger--ghost:focus {
1007
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
1008
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
1009
+ }
1010
+ .cds--btn--danger--ghost:active {
1011
+ background-color: var(--cds-button-danger-active, #750e13);
1012
+ }
1013
+ .cds--btn--danger--ghost .cds--btn__icon,
1014
+ .cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
1015
+ fill: currentColor;
1016
+ }
1017
+ .cds--btn--danger--ghost .cds--btn__icon {
1018
+ position: static;
1019
+ margin-left: 0.5rem;
1020
+ }
1021
+ .cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
1022
+ color: var(--cds-text-on-color, #ffffff);
1023
+ }
1024
+ .cds--btn--danger--ghost:disabled, .cds--btn--danger--ghost:hover:disabled, .cds--btn--danger--ghost:focus:disabled, .cds--btn--danger--ghost.cds--btn--disabled, .cds--btn--danger--ghost.cds--btn--disabled:hover, .cds--btn--danger--ghost.cds--btn--disabled:focus {
1025
+ border-color: transparent;
1026
+ background: transparent;
1027
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
1028
+ outline: none;
1029
+ }
1030
+
1031
+ .cds--btn--expressive {
1032
+ font-size: var(--cds-body-compact-02-font-size, 1rem);
1033
+ font-weight: var(--cds-body-compact-02-font-weight, 400);
1034
+ line-height: var(--cds-body-compact-02-line-height, 1.375);
1035
+ letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
1036
+ padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
1037
+ }
1038
+
1039
+ .cds--btn--icon-only.cds--btn--expressive {
1040
+ padding: 12px 13px;
1041
+ }
1042
+
1043
+ .cds--btn.cds--btn--expressive .cds--btn__icon {
1044
+ width: 1.25rem;
1045
+ height: 1.25rem;
1046
+ }
1047
+
1048
+ .cds--btn-set .cds--btn.cds--btn--expressive {
1049
+ max-width: 20rem;
1050
+ }
1051
+
1052
+ .cds--btn.cds--skeleton {
1053
+ position: relative;
1054
+ padding: 0;
1055
+ border: none;
1056
+ background: var(--cds-skeleton-background, #e8e8e8);
1057
+ box-shadow: none;
1058
+ pointer-events: none;
1059
+ width: 9.375rem;
1060
+ }
1061
+ .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
1062
+ border: none;
1063
+ cursor: default;
1064
+ outline: none;
1065
+ }
1066
+ .cds--btn.cds--skeleton::before {
1067
+ position: absolute;
1068
+ width: 100%;
1069
+ height: 100%;
1070
+ animation: 3000ms ease-in-out skeleton infinite;
1071
+ background: var(--cds-skeleton-element, #c6c6c6);
1072
+ content: "";
1073
+ will-change: transform-origin, transform, opacity;
1074
+ }
1075
+ @media (prefers-reduced-motion: reduce) {
1076
+ .cds--btn.cds--skeleton::before {
1077
+ animation: none;
1078
+ }
1079
+ }
1080
+
1081
+ .cds--btn-set {
1082
+ display: flex;
1083
+ }
1084
+
1085
+ .cds--btn-set--stacked {
1086
+ flex-direction: column;
1087
+ }
1088
+
1089
+ .cds--btn-set .cds--btn {
1090
+ width: 100%;
1091
+ max-width: 12.25rem;
1092
+ }
1093
+ .cds--btn-set .cds--btn:not(:focus) {
1094
+ box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
1095
+ }
1096
+ .cds--btn-set .cds--btn:first-of-type:not(:focus) {
1097
+ box-shadow: inherit;
1098
+ }
1099
+
1100
+ .cds--btn-set .cds--btn:focus + .cds--btn {
1101
+ box-shadow: inherit;
1102
+ }
1103
+
1104
+ .cds--btn-set--stacked .cds--btn:not(:focus) {
1105
+ box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
1106
+ }
1107
+
1108
+ .cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) {
1109
+ box-shadow: inherit;
1110
+ }
1111
+
1112
+ .cds--btn-set .cds--btn.cds--btn--disabled {
1113
+ box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d);
1114
+ }
1115
+ .cds--btn-set .cds--btn.cds--btn--disabled:first-of-type {
1116
+ box-shadow: none;
1117
+ }
1118
+
1119
+ .cds--btn-set--stacked .cds--btn.cds--btn--disabled {
1120
+ box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d);
1121
+ }
1122
+ .cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type {
1123
+ box-shadow: none;
1124
+ }
1125
+
1126
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
1127
+ .cds--btn:focus {
1128
+ color: Highlight;
1129
+ outline: 1px solid Highlight;
60
1130
  }
61
1131
  }
62
- .cds--assistive-text,
63
- .cds--visually-hidden {
64
- position: absolute;
65
- overflow: hidden;
66
- width: 1px;
67
- height: 1px;
68
- padding: 0;
69
- border: 0;
70
- margin: -1px;
71
- clip: rect(0, 0, 0, 0);
72
- visibility: inherit;
73
- white-space: nowrap;
1132
+
1133
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
1134
+ .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
1135
+ .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
1136
+ fill: ButtonText;
1137
+ }
74
1138
  }
75
1139
 
76
1140
  .cds--copy-btn {
@@ -181,6 +1245,10 @@
181
1245
  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
182
1246
  }
183
1247
 
1248
+ .cds--copy-btn svg {
1249
+ fill: var(--cds-icon-primary, #161616);
1250
+ }
1251
+
184
1252
  .cds--copy {
185
1253
  font-size: 0;
186
1254
  }
@@ -537,6 +1605,7 @@
537
1605
  .cds--snippet--inline.cds--btn {
538
1606
  width: initial;
539
1607
  height: 1.25rem;
1608
+ min-height: 1.25rem;
540
1609
  padding-inline: 0;
541
1610
  }
542
1611
 
@@ -564,6 +1633,7 @@
564
1633
  right: 0;
565
1634
  bottom: 0;
566
1635
  display: inline-flex;
1636
+ height: 2rem;
567
1637
  align-items: center;
568
1638
  padding: 0.5rem 1rem;
569
1639
  border: 0;
@@ -2797,280 +3867,129 @@ p.c4p--about-modal__copyright-text:first-child {
2797
3867
  .c4p--create-full-page .cds--side-nav--ux {
2798
3868
  top: 0;
2799
3869
  height: min-content;
2800
- padding-top: 0;
2801
- border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2802
- background-color: transparent;
2803
- grid-row: 1;
2804
- overflow-x: auto;
2805
- }
2806
-
2807
- .c4p--create-full-page .c4p--create-full-page__section-divider {
2808
- position: relative;
2809
- display: block;
2810
- width: 0;
2811
- height: 1px;
2812
- margin: 2rem calc(-1 * 2.5rem) 2rem calc(-1 * 2.5rem);
2813
- /* stylelint-disable-next-line max-nesting-depth */
2814
- }
2815
- .c4p--create-full-page .c4p--create-full-page__section-divider::after {
2816
- position: absolute;
2817
- top: 0;
2818
- left: 0;
2819
- width: 100vw;
2820
- height: 1px;
2821
- background-color: var(--cds-layer-accent-01, #e0e0e0);
2822
- content: "";
2823
- }
2824
-
2825
- .c4p--create-full-page .c4p--create-full-page__step-title {
2826
- font-size: var(--cds-heading-04-font-size, 1.75rem);
2827
- font-weight: var(--cds-heading-04-font-weight, 400);
2828
- line-height: var(--cds-heading-04-line-height, 1.28572);
2829
- letter-spacing: var(--cds-heading-04-letter-spacing, 0);
2830
- margin-bottom: 1rem;
2831
- }
2832
-
2833
- .c4p--create-full-page .c4p--create-full-page__influencer {
2834
- display: grid;
2835
- flex: 0 0 257px;
2836
- border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2837
- background-color: var(--cds-layer-01, #f4f4f4);
2838
- grid-template-columns: 100%;
2839
- grid-template-rows: 1fr auto;
2840
- }
2841
-
2842
- .c4p--create-full-page .c4p--create-full-page__progress-indicator.cds--progress {
2843
- padding: 1.5rem;
2844
- }
2845
-
2846
- .c4p--create-full-page .c4p--create-full-page__influencer-toggle {
2847
- padding: 1.5rem;
2848
- grid-column: 1/-1;
2849
- grid-row: -1/-1;
2850
- }
2851
-
2852
- .c4p--create-full-page .c4p--create-full-page__buttons {
2853
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2854
- }
2855
-
2856
- .c4p--create-modal {
2857
- background-color: var(--cds-background, #ffffff);
2858
- }
2859
-
2860
- .c4p--create-modal .cds--modal-close {
2861
- display: none;
2862
- }
2863
-
2864
- @media (min-width: 42rem) {
2865
- .c4p--create-modal .cds--modal-container {
2866
- max-height: 95%;
2867
- }
2868
- }
2869
- @media (min-width: 66rem) {
2870
- .c4p--create-modal .cds--modal-container {
2871
- max-height: 95%;
2872
- }
2873
- }
2874
-
2875
- .c4p--create-modal .cds--modal-header {
2876
- padding-right: 20%;
2877
- padding-bottom: 0.5rem;
2878
- border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2879
- margin-bottom: 0;
2880
- }
2881
-
2882
- .c4p--create-modal .cds--modal-footer .cds--btn {
2883
- max-width: none;
2884
- }
2885
-
2886
- .c4p--create-modal__title {
2887
- font-size: var(--cds-heading-03-font-size, 1.25rem);
2888
- font-weight: var(--cds-heading-03-font-weight, 400);
2889
- line-height: var(--cds-heading-03-line-height, 1.4);
2890
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
2891
- margin-bottom: 0.25rem;
2892
- }
2893
-
2894
- .c4p--create-modal__subtitle {
2895
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
2896
- font-weight: var(--cds-body-compact-01-font-weight, 400);
2897
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
2898
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
2899
- margin-bottom: 0.5rem;
2900
- color: var(--cds-text-secondary, #525252);
2901
- }
2902
-
2903
- .c4p--create-modal__description {
2904
- font-size: var(--cds-body-01-font-size, 0.875rem);
2905
- font-weight: var(--cds-body-01-font-weight, 400);
2906
- line-height: var(--cds-body-01-line-height, 1.42857);
2907
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
2908
- padding-right: calc(20% - 1rem);
2909
- margin: 0.5rem 0 1rem 0;
2910
- }
2911
-
2912
- .c4p--create-modal__form .cds--fieldset {
2913
- min-width: 100%;
2914
- margin-bottom: 0;
2915
- }
2916
-
2917
- .c4p--create-modal__form > * {
2918
- margin-bottom: 1rem;
2919
- /* stylelint-disable-next-line max-nesting-depth */
2920
- }
2921
- .c4p--create-modal__form > *:last-child {
2922
- margin-bottom: 0;
2923
- }
2924
-
2925
- :root {
2926
- --cds-layout-size-height-xs: 1.5rem;
2927
- --cds-layout-size-height-sm: 2rem;
2928
- --cds-layout-size-height-md: 2.5rem;
2929
- --cds-layout-size-height-lg: 3rem;
2930
- --cds-layout-size-height-xl: 4rem;
2931
- --cds-layout-size-height-2xl: 5rem;
2932
- --cds-layout-size-height-min: 0px;
2933
- --cds-layout-size-height-max: 999999999px;
2934
- --cds-layout-density-padding-inline-condensed: 0.5rem;
2935
- --cds-layout-density-padding-inline-normal: 1rem;
2936
- --cds-layout-density-padding-inline-min: 0px;
2937
- --cds-layout-density-padding-inline-max: 999999999px;
2938
- }
2939
-
2940
- .cds--layout--size-xs {
2941
- --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
2942
- --cds-layout-size-height: var(--cds-layout-size-height-context);
2943
- }
2944
-
2945
- .cds--layout-constraint--size__default-xs {
2946
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
2947
- }
2948
-
2949
- .cds--layout-constraint--size__min-xs {
2950
- --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
2951
- }
2952
-
2953
- .cds--layout-constraint--size__max-xs {
2954
- --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
2955
- }
2956
-
2957
- .cds--layout--size-sm {
2958
- --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
2959
- --cds-layout-size-height: var(--cds-layout-size-height-context);
2960
- }
2961
-
2962
- .cds--layout-constraint--size__default-sm {
2963
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
2964
- }
2965
-
2966
- .cds--layout-constraint--size__min-sm {
2967
- --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
2968
- }
2969
-
2970
- .cds--layout-constraint--size__max-sm {
2971
- --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
2972
- }
2973
-
2974
- .cds--layout--size-md {
2975
- --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
2976
- --cds-layout-size-height: var(--cds-layout-size-height-context);
2977
- }
2978
-
2979
- .cds--layout-constraint--size__default-md {
2980
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
2981
- }
2982
-
2983
- .cds--layout-constraint--size__min-md {
2984
- --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
2985
- }
2986
-
2987
- .cds--layout-constraint--size__max-md {
2988
- --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
2989
- }
2990
-
2991
- .cds--layout--size-lg {
2992
- --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
2993
- --cds-layout-size-height: var(--cds-layout-size-height-context);
3870
+ padding-top: 0;
3871
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3872
+ background-color: transparent;
3873
+ grid-row: 1;
3874
+ overflow-x: auto;
2994
3875
  }
2995
3876
 
2996
- .cds--layout-constraint--size__default-lg {
2997
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
3877
+ .c4p--create-full-page .c4p--create-full-page__section-divider {
3878
+ position: relative;
3879
+ display: block;
3880
+ width: 0;
3881
+ height: 1px;
3882
+ margin: 2rem calc(-1 * 2.5rem) 2rem calc(-1 * 2.5rem);
3883
+ /* stylelint-disable-next-line max-nesting-depth */
2998
3884
  }
2999
-
3000
- .cds--layout-constraint--size__min-lg {
3001
- --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
3885
+ .c4p--create-full-page .c4p--create-full-page__section-divider::after {
3886
+ position: absolute;
3887
+ top: 0;
3888
+ left: 0;
3889
+ width: 100vw;
3890
+ height: 1px;
3891
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
3892
+ content: "";
3002
3893
  }
3003
3894
 
3004
- .cds--layout-constraint--size__max-lg {
3005
- --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
3895
+ .c4p--create-full-page .c4p--create-full-page__step-title {
3896
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
3897
+ font-weight: var(--cds-heading-04-font-weight, 400);
3898
+ line-height: var(--cds-heading-04-line-height, 1.28572);
3899
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
3900
+ margin-bottom: 1rem;
3006
3901
  }
3007
3902
 
3008
- .cds--layout--size-xl {
3009
- --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
3010
- --cds-layout-size-height: var(--cds-layout-size-height-context);
3903
+ .c4p--create-full-page .c4p--create-full-page__influencer {
3904
+ display: grid;
3905
+ flex: 0 0 257px;
3906
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3907
+ background-color: var(--cds-layer-01, #f4f4f4);
3908
+ grid-template-columns: 100%;
3909
+ grid-template-rows: 1fr auto;
3011
3910
  }
3012
3911
 
3013
- .cds--layout-constraint--size__default-xl {
3014
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
3912
+ .c4p--create-full-page .c4p--create-full-page__progress-indicator.cds--progress {
3913
+ padding: 1.5rem;
3015
3914
  }
3016
3915
 
3017
- .cds--layout-constraint--size__min-xl {
3018
- --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
3916
+ .c4p--create-full-page .c4p--create-full-page__influencer-toggle {
3917
+ padding: 1.5rem;
3918
+ grid-column: 1/-1;
3919
+ grid-row: -1/-1;
3019
3920
  }
3020
3921
 
3021
- .cds--layout-constraint--size__max-xl {
3022
- --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
3922
+ .c4p--create-full-page .c4p--create-full-page__buttons {
3923
+ border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3023
3924
  }
3024
3925
 
3025
- .cds--layout--size-2xl {
3026
- --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
3027
- --cds-layout-size-height: var(--cds-layout-size-height-context);
3926
+ .c4p--create-modal {
3927
+ background-color: var(--cds-background, #ffffff);
3028
3928
  }
3029
3929
 
3030
- .cds--layout-constraint--size__default-2xl {
3031
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
3930
+ .c4p--create-modal .cds--modal-close {
3931
+ display: none;
3032
3932
  }
3033
3933
 
3034
- .cds--layout-constraint--size__min-2xl {
3035
- --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
3934
+ @media (min-width: 42rem) {
3935
+ .c4p--create-modal .cds--modal-container {
3936
+ max-height: 95%;
3937
+ }
3036
3938
  }
3037
-
3038
- .cds--layout-constraint--size__max-2xl {
3039
- --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
3939
+ @media (min-width: 66rem) {
3940
+ .c4p--create-modal .cds--modal-container {
3941
+ max-height: 95%;
3942
+ }
3040
3943
  }
3041
3944
 
3042
- .cds--layout--density-condensed {
3043
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3044
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3945
+ .c4p--create-modal .cds--modal-header {
3946
+ padding-right: 20%;
3947
+ padding-bottom: 0.5rem;
3948
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3949
+ margin-bottom: 0;
3045
3950
  }
3046
3951
 
3047
- .cds--layout-constraint--density__default-condensed {
3048
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
3952
+ .c4p--create-modal .cds--modal-footer .cds--btn {
3953
+ max-width: none;
3049
3954
  }
3050
3955
 
3051
- .cds--layout-constraint--density__min-condensed {
3052
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3956
+ .c4p--create-modal__title {
3957
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
3958
+ font-weight: var(--cds-heading-03-font-weight, 400);
3959
+ line-height: var(--cds-heading-03-line-height, 1.4);
3960
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
3961
+ margin-bottom: 0.25rem;
3053
3962
  }
3054
3963
 
3055
- .cds--layout-constraint--density__max-condensed {
3056
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3964
+ .c4p--create-modal__subtitle {
3965
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
3966
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
3967
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
3968
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
3969
+ margin-bottom: 0.5rem;
3970
+ color: var(--cds-text-secondary, #525252);
3057
3971
  }
3058
3972
 
3059
- .cds--layout--density-normal {
3060
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
3061
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3973
+ .c4p--create-modal__description {
3974
+ font-size: var(--cds-body-01-font-size, 0.875rem);
3975
+ font-weight: var(--cds-body-01-font-weight, 400);
3976
+ line-height: var(--cds-body-01-line-height, 1.42857);
3977
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
3978
+ padding-right: calc(20% - 1rem);
3979
+ margin: 0.5rem 0 1rem 0;
3062
3980
  }
3063
3981
 
3064
- .cds--layout-constraint--density__default-normal {
3065
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
3982
+ .c4p--create-modal__form .cds--fieldset {
3983
+ min-width: 100%;
3984
+ margin-bottom: 0;
3066
3985
  }
3067
3986
 
3068
- .cds--layout-constraint--density__min-normal {
3069
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
3987
+ .c4p--create-modal__form > * {
3988
+ margin-bottom: 1rem;
3989
+ /* stylelint-disable-next-line max-nesting-depth */
3070
3990
  }
3071
-
3072
- .cds--layout-constraint--density__max-normal {
3073
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
3991
+ .c4p--create-modal__form > *:last-child {
3992
+ margin-bottom: 0;
3074
3993
  }
3075
3994
 
3076
3995
  .c4p--side-panel__container {
@@ -4932,8 +5851,8 @@ button.c4p--add-select__global-filter-toggle--open {
4932
5851
  --cds-helper-text-01-font-size: 0.75rem;
4933
5852
  --cds-helper-text-01-line-height: 1.33333;
4934
5853
  --cds-helper-text-01-letter-spacing: 0.32px;
4935
- --cds-helper-text-02-font-size: carbon--type-scale(2);
4936
- --cds-helper-text-02-font-weight: carbon--font-weight("regular");
5854
+ --cds-helper-text-02-font-size: 0.875rem;
5855
+ --cds-helper-text-02-font-weight: 400;
4937
5856
  --cds-helper-text-02-line-height: 1.28572;
4938
5857
  --cds-helper-text-02-letter-spacing: 0.16px;
4939
5858
  --cds-body-short-01-font-size: 0.875rem;
@@ -5150,6 +6069,21 @@ button.c4p--add-select__global-filter-toggle--open {
5150
6069
  --cds-fluid-display-04-font-weight: 300;
5151
6070
  --cds-fluid-display-04-line-height: 1.19;
5152
6071
  --cds-fluid-display-04-letter-spacing: 0;
6072
+ --cds-button-separator: #161616;
6073
+ --cds-button-primary: #0f62fe;
6074
+ --cds-button-secondary: #6f6f6f;
6075
+ --cds-button-tertiary: #ffffff;
6076
+ --cds-button-danger-primary: #da1e28;
6077
+ --cds-button-danger-secondary: #fa4d56;
6078
+ --cds-button-danger-active: #750e13;
6079
+ --cds-button-primary-active: #002d9c;
6080
+ --cds-button-secondary-active: #393939;
6081
+ --cds-button-tertiary-active: #c6c6c6;
6082
+ --cds-button-danger-hover: #b81921;
6083
+ --cds-button-primary-hover: #0050e6;
6084
+ --cds-button-secondary-hover: #5e5e5e;
6085
+ --cds-button-tertiary-hover: #f4f4f4;
6086
+ --cds-button-disabled: rgba(141, 141, 141, 0.3);
5153
6087
  --cds-layer: var(--cds-layer-01, #f4f4f4);
5154
6088
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
5155
6089
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
@@ -7597,7 +8531,8 @@ button.c4p--add-select__global-filter-toggle--open {
7597
8531
  white-space: nowrap;
7598
8532
  }
7599
8533
  .c4p--page-header .c4p--page-header__title-row {
7600
- margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
8534
+ --title-row-margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
8535
+ margin-top: var(--title-row-margin-top);
7601
8536
  margin-bottom: 0;
7602
8537
  transform: translateY(0.125rem);
7603
8538
  }
@@ -7635,7 +8570,7 @@ button.c4p--add-select__global-filter-toggle--open {
7635
8570
  position: sticky;
7636
8571
  }
7637
8572
  .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs + .c4p--page-header__title-row--sticky {
7638
- top: var(--c4p--page-header--breadcrumb-top);
8573
+ top: calc(var(--c4p--page-header--breadcrumb-top) - var(--title-row-margin-top));
7639
8574
  }
7640
8575
  .c4p--page-header .c4p--page-header__title-column {
7641
8576
  min-height: 40px;
@@ -8597,6 +9532,22 @@ button.c4p--add-select__global-filter-toggle--open {
8597
9532
  content: "";
8598
9533
  }
8599
9534
 
9535
+ .c4p--tooltip-trigger {
9536
+ display: flex;
9537
+ width: 100%;
9538
+ height: 100%;
9539
+ box-sizing: border-box;
9540
+ align-items: center;
9541
+ justify-content: center;
9542
+ padding: 0;
9543
+ border: 0;
9544
+ margin: 0;
9545
+ appearance: none;
9546
+ background: none;
9547
+ cursor: pointer;
9548
+ outline: none;
9549
+ }
9550
+
8600
9551
  @keyframes web-terminal-entrance {
8601
9552
  from {
8602
9553
  opacity: 0;
@@ -8759,8 +9710,8 @@ button.c4p--add-select__global-filter-toggle--open {
8759
9710
  --cds-helper-text-01-font-size: 0.75rem;
8760
9711
  --cds-helper-text-01-line-height: 1.33333;
8761
9712
  --cds-helper-text-01-letter-spacing: 0.32px;
8762
- --cds-helper-text-02-font-size: carbon--type-scale(2);
8763
- --cds-helper-text-02-font-weight: carbon--font-weight("regular");
9713
+ --cds-helper-text-02-font-size: 0.875rem;
9714
+ --cds-helper-text-02-font-weight: 400;
8764
9715
  --cds-helper-text-02-line-height: 1.28572;
8765
9716
  --cds-helper-text-02-letter-spacing: 0.16px;
8766
9717
  --cds-body-short-01-font-size: 0.875rem;
@@ -8977,6 +9928,21 @@ button.c4p--add-select__global-filter-toggle--open {
8977
9928
  --cds-fluid-display-04-font-weight: 300;
8978
9929
  --cds-fluid-display-04-line-height: 1.19;
8979
9930
  --cds-fluid-display-04-letter-spacing: 0;
9931
+ --cds-button-separator: #161616;
9932
+ --cds-button-primary: #0f62fe;
9933
+ --cds-button-secondary: #6f6f6f;
9934
+ --cds-button-tertiary: #ffffff;
9935
+ --cds-button-danger-primary: #da1e28;
9936
+ --cds-button-danger-secondary: #ff8389;
9937
+ --cds-button-danger-active: #750e13;
9938
+ --cds-button-primary-active: #002d9c;
9939
+ --cds-button-secondary-active: #393939;
9940
+ --cds-button-tertiary-active: #c6c6c6;
9941
+ --cds-button-danger-hover: #b81921;
9942
+ --cds-button-primary-hover: #0050e6;
9943
+ --cds-button-secondary-hover: #5e5e5e;
9944
+ --cds-button-tertiary-hover: #f4f4f4;
9945
+ --cds-button-disabled: rgba(141, 141, 141, 0.3);
8980
9946
  --cds-layer: var(--cds-layer-01, #f4f4f4);
8981
9947
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
8982
9948
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
@@ -9152,8 +10118,8 @@ button.c4p--add-select__global-filter-toggle--open {
9152
10118
  --cds-helper-text-01-font-size: 0.75rem;
9153
10119
  --cds-helper-text-01-line-height: 1.33333;
9154
10120
  --cds-helper-text-01-letter-spacing: 0.32px;
9155
- --cds-helper-text-02-font-size: carbon--type-scale(2);
9156
- --cds-helper-text-02-font-weight: carbon--font-weight("regular");
10121
+ --cds-helper-text-02-font-size: 0.875rem;
10122
+ --cds-helper-text-02-font-weight: 400;
9157
10123
  --cds-helper-text-02-line-height: 1.28572;
9158
10124
  --cds-helper-text-02-letter-spacing: 0.16px;
9159
10125
  --cds-body-short-01-font-size: 0.875rem;
@@ -9370,6 +10336,21 @@ button.c4p--add-select__global-filter-toggle--open {
9370
10336
  --cds-fluid-display-04-font-weight: 300;
9371
10337
  --cds-fluid-display-04-line-height: 1.19;
9372
10338
  --cds-fluid-display-04-letter-spacing: 0;
10339
+ --cds-button-separator: #161616;
10340
+ --cds-button-primary: #0f62fe;
10341
+ --cds-button-secondary: #6f6f6f;
10342
+ --cds-button-tertiary: #ffffff;
10343
+ --cds-button-danger-primary: #da1e28;
10344
+ --cds-button-danger-secondary: #fa4d56;
10345
+ --cds-button-danger-active: #750e13;
10346
+ --cds-button-primary-active: #002d9c;
10347
+ --cds-button-secondary-active: #393939;
10348
+ --cds-button-tertiary-active: #c6c6c6;
10349
+ --cds-button-danger-hover: #b81921;
10350
+ --cds-button-primary-hover: #0050e6;
10351
+ --cds-button-secondary-hover: #5e5e5e;
10352
+ --cds-button-tertiary-hover: #f4f4f4;
10353
+ --cds-button-disabled: rgba(141, 141, 141, 0.3);
9373
10354
  --cds-layer: var(--cds-layer-01, #f4f4f4);
9374
10355
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9375
10356
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
@@ -10784,6 +11765,67 @@ button.c4p--add-select__global-filter-toggle--open {
10784
11765
  margin-top: 0;
10785
11766
  }
10786
11767
 
11768
+ .c4p--datagrid .c4p--datagrid__col-resizer-range {
11769
+ position: absolute;
11770
+ z-index: 2;
11771
+ top: 0;
11772
+ right: calc(0.5rem * -1);
11773
+ width: 1rem;
11774
+ height: 100%;
11775
+ margin: 0;
11776
+ -webkit-appearance: none;
11777
+ appearance: none;
11778
+ background: transparent;
11779
+ }
11780
+
11781
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus {
11782
+ outline: 0;
11783
+ }
11784
+
11785
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
11786
+ position: absolute;
11787
+ top: 50%;
11788
+ left: 50%;
11789
+ width: 2px;
11790
+ height: 100%;
11791
+ background-color: var(--cds-focus, #0f62fe);
11792
+ content: "";
11793
+ transform: translate(-50%, -50%);
11794
+ }
11795
+
11796
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator {
11797
+ position: absolute;
11798
+ z-index: 2;
11799
+ right: calc(0.5rem * -1);
11800
+ width: 0.5rem;
11801
+ height: 0.5rem;
11802
+ border-radius: 100%;
11803
+ margin: 0;
11804
+ background-color: var(--cds-focus, #0f62fe);
11805
+ transform: translate(-50%, 0);
11806
+ }
11807
+
11808
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
11809
+ position: absolute;
11810
+ /* stylelint-disable-next-line carbon/layout-token-use */
11811
+ top: var(--c4p--datagrid--row-height);
11812
+ right: 0.5rem;
11813
+ width: 1px;
11814
+ height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
11815
+ background-color: var(--cds-layer-active-01, #c6c6c6);
11816
+ content: "";
11817
+ }
11818
+
11819
+ .c4p--datagrid .c4p--datagrid__col-resizer-range::-webkit-slider-thumb {
11820
+ width: 16px;
11821
+ height: 16px;
11822
+ border: none;
11823
+ border-radius: 50%;
11824
+ -webkit-appearance: none;
11825
+ appearance: none;
11826
+ background: transparent;
11827
+ }
11828
+
10787
11829
  /*
10788
11830
  * Licensed Materials - Property of IBM
10789
11831
  * 5724-Q36
@@ -13462,6 +14504,74 @@ th.c4p--datagrid__select-all-toggle-on.button {
13462
14504
  transform-origin: left;
13463
14505
  }
13464
14506
  }
14507
+ :root {
14508
+ --cds-layer:var(--cds-layer-01, #f4f4f4);
14509
+ --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14510
+ --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14511
+ --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14512
+ --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14513
+ --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14514
+ --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14515
+ --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14516
+ --cds-field:var(--cds-field-01, #f4f4f4);
14517
+ --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14518
+ --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14519
+ --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14520
+ --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14521
+ --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14522
+ }
14523
+
14524
+ .cds--layer-one {
14525
+ --cds-layer:var(--cds-layer-01, #f4f4f4);
14526
+ --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14527
+ --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14528
+ --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14529
+ --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14530
+ --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14531
+ --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14532
+ --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14533
+ --cds-field:var(--cds-field-01, #f4f4f4);
14534
+ --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14535
+ --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14536
+ --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14537
+ --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14538
+ --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14539
+ }
14540
+
14541
+ .cds--layer-two {
14542
+ --cds-layer:var(--cds-layer-02, #ffffff);
14543
+ --cds-layer-active:var(--cds-layer-active-02, #c6c6c6);
14544
+ --cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);
14545
+ --cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);
14546
+ --cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);
14547
+ --cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);
14548
+ --cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);
14549
+ --cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);
14550
+ --cds-field:var(--cds-field-02, #ffffff);
14551
+ --cds-field-hover:var(--cds-field-hover-02, #e8e8e8);
14552
+ --cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);
14553
+ --cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);
14554
+ --cds-border-strong:var(--cds-border-strong-02, #8d8d8d);
14555
+ --cds-border-tile:var(--cds-border-tile-02, #a8a8a8);
14556
+ }
14557
+
14558
+ .cds--layer-three {
14559
+ --cds-layer:var(--cds-layer-03, #f4f4f4);
14560
+ --cds-layer-active:var(--cds-layer-active-03, #c6c6c6);
14561
+ --cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);
14562
+ --cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);
14563
+ --cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);
14564
+ --cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);
14565
+ --cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);
14566
+ --cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);
14567
+ --cds-field:var(--cds-field-03, #f4f4f4);
14568
+ --cds-field-hover:var(--cds-field-hover-03, #e8e8e8);
14569
+ --cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);
14570
+ --cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);
14571
+ --cds-border-strong:var(--cds-border-strong-03, #8d8d8d);
14572
+ --cds-border-tile:var(--cds-border-tile-03, #c6c6c6);
14573
+ }
14574
+
13465
14575
  .cds--side-nav {
13466
14576
  position: fixed;
13467
14577
  z-index: 8000;
@@ -13540,11 +14650,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
13540
14650
  }
13541
14651
 
13542
14652
  .cds--side-nav__items {
14653
+ box-sizing: border-box;
14654
+ padding: 0;
14655
+ border: 0;
14656
+ margin: 0;
14657
+ font-family: inherit;
14658
+ font-size: 100%;
14659
+ vertical-align: baseline;
13543
14660
  overflow: hidden;
13544
14661
  flex: 1 1 0%;
13545
14662
  padding: 1rem 0 0;
13546
14663
  }
13547
14664
 
14665
+ .cds--side-nav__items *,
14666
+ .cds--side-nav__items *::before,
14667
+ .cds--side-nav__items *::after {
14668
+ box-sizing: inherit;
14669
+ }
14670
+
13548
14671
  .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
13549
14672
  overflow-y: auto;
13550
14673
  }
@@ -13586,6 +14709,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
13586
14709
  height: 1px;
13587
14710
  margin: 0.5rem 1rem;
13588
14711
  background-color: var(--cds-border-subtle);
14712
+ list-style-type: none;
13589
14713
  }
13590
14714
 
13591
14715
  .cds--side-nav__submenu {
@@ -13702,11 +14826,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
13702
14826
  }
13703
14827
 
13704
14828
  .cds--side-nav__menu {
14829
+ box-sizing: border-box;
14830
+ padding: 0;
14831
+ border: 0;
14832
+ margin: 0;
14833
+ font-family: inherit;
14834
+ font-size: 100%;
14835
+ vertical-align: baseline;
13705
14836
  display: block;
13706
14837
  max-height: 0;
13707
14838
  visibility: hidden;
13708
14839
  }
13709
14840
 
14841
+ .cds--side-nav__menu *,
14842
+ .cds--side-nav__menu *::before,
14843
+ .cds--side-nav__menu *::after {
14844
+ box-sizing: inherit;
14845
+ }
14846
+
13710
14847
  .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
13711
14848
  max-height: 93.75rem;
13712
14849
  visibility: inherit;
@@ -13848,9 +14985,22 @@ a.cds--side-nav__link--current::before {
13848
14985
  }
13849
14986
  }
13850
14987
  .cds--side-nav__header-navigation {
14988
+ box-sizing: border-box;
14989
+ padding: 0;
14990
+ border: 0;
14991
+ margin: 0;
14992
+ font-family: inherit;
14993
+ font-size: 100%;
14994
+ vertical-align: baseline;
13851
14995
  display: none;
13852
14996
  }
13853
14997
 
14998
+ .cds--side-nav__header-navigation *,
14999
+ .cds--side-nav__header-navigation *::before,
15000
+ .cds--side-nav__header-navigation *::after {
15001
+ box-sizing: inherit;
15002
+ }
15003
+
13854
15004
  @media (max-width: 65.98rem) {
13855
15005
  .cds--side-nav__header-navigation {
13856
15006
  position: relative;
@@ -13929,21 +15079,6 @@ a.cds--side-nav__link--current::before {
13929
15079
  fill: ButtonText;
13930
15080
  }
13931
15081
  }
13932
- :root {
13933
- --cds-layout-size-height-xs:1.5rem;
13934
- --cds-layout-size-height-sm:2rem;
13935
- --cds-layout-size-height-md:2.5rem;
13936
- --cds-layout-size-height-lg:3rem;
13937
- --cds-layout-size-height-xl:4rem;
13938
- --cds-layout-size-height-2xl:5rem;
13939
- --cds-layout-size-height-min:0px;
13940
- --cds-layout-size-height-max:999999999px;
13941
- --cds-layout-density-padding-inline-condensed:0.5rem;
13942
- --cds-layout-density-padding-inline-normal:1rem;
13943
- --cds-layout-density-padding-inline-min:0px;
13944
- --cds-layout-density-padding-inline-max:999999999px;
13945
- }
13946
-
13947
15082
  .cds--layout--size-xs {
13948
15083
  --cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);
13949
15084
  --cds-layout-size-height:var(--cds-layout-size-height-context);
@@ -14080,6 +15215,21 @@ a.cds--side-nav__link--current::before {
14080
15215
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
14081
15216
  }
14082
15217
 
15218
+ :root {
15219
+ --cds-layout-size-height-xs:1.5rem;
15220
+ --cds-layout-size-height-sm:2rem;
15221
+ --cds-layout-size-height-md:2.5rem;
15222
+ --cds-layout-size-height-lg:3rem;
15223
+ --cds-layout-size-height-xl:4rem;
15224
+ --cds-layout-size-height-2xl:5rem;
15225
+ --cds-layout-size-height-min:0px;
15226
+ --cds-layout-size-height-max:999999999px;
15227
+ --cds-layout-density-padding-inline-condensed:0.5rem;
15228
+ --cds-layout-density-padding-inline-normal:1rem;
15229
+ --cds-layout-density-padding-inline-min:0px;
15230
+ --cds-layout-density-padding-inline-max:999999999px;
15231
+ }
15232
+
14083
15233
  .c4p--action-set {
14084
15234
  align-items: stretch;
14085
15235
  justify-content: flex-end;