@carbon/ibm-products 2.53.0 → 2.54.0-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/css/index-full-carbon.css +1700 -4375
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +8 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +996 -2631
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +92 -44
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyDownloader.d.ts +3 -1
  18. package/es/components/APIKeyModal/APIKeyDownloader.js +10 -3
  19. package/es/components/APIKeyModal/APIKeyModal.js +47 -7
  20. package/es/components/APIKeyModal/APIKeyModal.types.d.ts +9 -0
  21. package/es/components/ActionBar/ActionBar.d.ts +2 -1
  22. package/es/components/ActionSet/ActionSet.d.ts +1 -1
  23. package/es/components/ActionSet/ActionSet.js +2 -0
  24. package/es/components/AddSelect/types/index.d.ts +1 -1
  25. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +3 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +11 -3
  27. package/es/components/Checklist/Checklist.js +2 -3
  28. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +2 -2
  29. package/es/components/CreateFullPage/CreateFullPage.d.ts +5 -0
  30. package/es/components/CreateFullPage/CreateFullPage.js +31 -15
  31. package/es/components/CreateFullPage/CreateFullPageStep.d.ts +4 -0
  32. package/es/components/CreateFullPage/CreateFullPageStep.js +8 -2
  33. package/es/components/CreateInfluencer/CreateInfluencer.d.ts +9 -1
  34. package/es/components/CreateInfluencer/CreateInfluencer.js +8 -2
  35. package/es/components/CreateModal/CreateModal.d.ts +2 -2
  36. package/es/components/CreateModal/CreateModal.js +1 -1
  37. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +1 -0
  38. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +3 -1
  39. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +5 -2
  40. package/es/components/Datagrid/types/index.d.ts +3 -3
  41. package/es/components/EditInPlace/EditInPlace.js +1 -0
  42. package/es/components/EmptyStates/EmptyState.d.ts +1 -1
  43. package/es/components/EmptyStates/EmptyState.js +2 -0
  44. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +1 -1
  45. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -0
  46. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +1 -1
  47. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +2 -0
  48. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts +1 -1
  49. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -0
  50. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +1 -1
  51. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -0
  52. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts +1 -1
  53. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -0
  54. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts +1 -1
  55. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -0
  56. package/es/components/Guidebanner/Guidebanner.js +1 -1
  57. package/es/components/ImportModal/ImportModal.d.ts +1 -1
  58. package/es/components/ImportModal/ImportModal.js +3 -8
  59. package/es/components/InlineTip/InlineTipButton.d.ts +1 -1
  60. package/es/components/InterstitialScreen/InterstitialScreen.js +2 -2
  61. package/es/components/Nav/NavList.js +1 -1
  62. package/es/components/NotificationsPanel/NotificationsPanel.js +2 -1
  63. package/es/components/PageHeader/PageHeader.d.ts +9 -5
  64. package/es/components/PageHeader/PageHeader.js +9 -4
  65. package/es/components/SearchBar/SearchBar.js +1 -1
  66. package/es/components/SidePanel/SidePanel.d.ts +2 -2
  67. package/es/components/TagOverflow/TagOverflowModal.d.ts +1 -1
  68. package/es/components/TagOverflow/TagOverflowPopover.d.ts +3 -1
  69. package/es/components/TagOverflow/TagOverflowPopover.js +1 -1
  70. package/es/components/TagSet/TagSetModal.d.ts +1 -1
  71. package/es/components/Tearsheet/Tearsheet.d.ts +5 -2
  72. package/es/components/Tearsheet/Tearsheet.js +1 -0
  73. package/es/components/Tearsheet/TearsheetNarrow.d.ts +1 -1
  74. package/es/components/Tearsheet/TearsheetNarrow.js +1 -0
  75. package/es/components/Tearsheet/TearsheetShell.d.ts +2 -3
  76. package/es/components/Tearsheet/TearsheetShell.js +0 -1
  77. package/es/components/TooltipTrigger/TooltipTrigger.d.ts +17 -15
  78. package/es/components/TooltipTrigger/TooltipTrigger.js +2 -2
  79. package/es/components/TruncatedList/TruncatedList.d.ts +1 -1
  80. package/es/components/UserAvatar/UserAvatar.d.ts +1 -1
  81. package/es/components/UserAvatar/UserAvatar.js +3 -2
  82. package/es/components/UserProfileImage/UserProfileImage.d.ts +2 -2
  83. package/es/components/UserProfileImage/UserProfileImage.js +1 -5
  84. package/es/components/WebTerminal/WebTerminal.d.ts +1 -1
  85. package/es/components/WebTerminal/WebTerminal.js +1 -0
  86. package/es/node_modules/@carbon/icons-react/es/generated/{bucket-2.js → bucket-3.js} +963 -1037
  87. package/es/node_modules/@carbon/icons-react/es/generated/bucket-9.js +937 -885
  88. package/lib/components/APIKeyModal/APIKeyDownloader.d.ts +3 -1
  89. package/lib/components/APIKeyModal/APIKeyDownloader.js +10 -3
  90. package/lib/components/APIKeyModal/APIKeyModal.js +46 -6
  91. package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +9 -0
  92. package/lib/components/ActionBar/ActionBar.d.ts +2 -1
  93. package/lib/components/ActionSet/ActionSet.d.ts +1 -1
  94. package/lib/components/ActionSet/ActionSet.js +2 -0
  95. package/lib/components/AddSelect/types/index.d.ts +1 -1
  96. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +3 -1
  97. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +11 -3
  98. package/lib/components/Checklist/Checklist.js +2 -3
  99. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +2 -2
  100. package/lib/components/CreateFullPage/CreateFullPage.d.ts +5 -0
  101. package/lib/components/CreateFullPage/CreateFullPage.js +31 -15
  102. package/lib/components/CreateFullPage/CreateFullPageStep.d.ts +4 -0
  103. package/lib/components/CreateFullPage/CreateFullPageStep.js +8 -2
  104. package/lib/components/CreateInfluencer/CreateInfluencer.d.ts +9 -1
  105. package/lib/components/CreateInfluencer/CreateInfluencer.js +8 -2
  106. package/lib/components/CreateModal/CreateModal.d.ts +2 -2
  107. package/lib/components/CreateModal/CreateModal.js +1 -1
  108. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +1 -0
  109. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +3 -1
  110. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +5 -2
  111. package/lib/components/Datagrid/types/index.d.ts +3 -3
  112. package/lib/components/EditInPlace/EditInPlace.js +1 -0
  113. package/lib/components/EmptyStates/EmptyState.d.ts +1 -1
  114. package/lib/components/EmptyStates/EmptyState.js +2 -0
  115. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +1 -1
  116. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -0
  117. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +1 -1
  118. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +2 -0
  119. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts +1 -1
  120. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -0
  121. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +1 -1
  122. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -0
  123. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts +1 -1
  124. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -0
  125. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts +1 -1
  126. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -0
  127. package/lib/components/Guidebanner/Guidebanner.js +1 -1
  128. package/lib/components/ImportModal/ImportModal.d.ts +1 -1
  129. package/lib/components/ImportModal/ImportModal.js +3 -8
  130. package/lib/components/InlineTip/InlineTipButton.d.ts +1 -1
  131. package/lib/components/InterstitialScreen/InterstitialScreen.js +2 -2
  132. package/lib/components/Nav/NavList.js +2 -2
  133. package/lib/components/NotificationsPanel/NotificationsPanel.js +2 -1
  134. package/lib/components/PageHeader/PageHeader.d.ts +9 -5
  135. package/lib/components/PageHeader/PageHeader.js +8 -3
  136. package/lib/components/SearchBar/SearchBar.js +1 -1
  137. package/lib/components/SidePanel/SidePanel.d.ts +2 -2
  138. package/lib/components/TagOverflow/TagOverflowModal.d.ts +1 -1
  139. package/lib/components/TagOverflow/TagOverflowPopover.d.ts +3 -1
  140. package/lib/components/TagOverflow/TagOverflowPopover.js +1 -1
  141. package/lib/components/TagSet/TagSetModal.d.ts +1 -1
  142. package/lib/components/Tearsheet/Tearsheet.d.ts +5 -2
  143. package/lib/components/Tearsheet/Tearsheet.js +1 -0
  144. package/lib/components/Tearsheet/TearsheetNarrow.d.ts +1 -1
  145. package/lib/components/Tearsheet/TearsheetNarrow.js +1 -0
  146. package/lib/components/Tearsheet/TearsheetShell.d.ts +2 -3
  147. package/lib/components/Tearsheet/TearsheetShell.js +0 -1
  148. package/lib/components/TooltipTrigger/TooltipTrigger.d.ts +17 -15
  149. package/lib/components/TooltipTrigger/TooltipTrigger.js +2 -2
  150. package/lib/components/TruncatedList/TruncatedList.d.ts +1 -1
  151. package/lib/components/UserAvatar/UserAvatar.d.ts +1 -1
  152. package/lib/components/UserAvatar/UserAvatar.js +3 -2
  153. package/lib/components/UserProfileImage/UserProfileImage.d.ts +2 -2
  154. package/lib/components/UserProfileImage/UserProfileImage.js +1 -5
  155. package/lib/components/WebTerminal/WebTerminal.d.ts +1 -1
  156. package/lib/components/WebTerminal/WebTerminal.js +1 -0
  157. package/lib/node_modules/@carbon/icons-react/es/generated/{bucket-2.js → bucket-3.js} +1078 -1152
  158. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-9.js +980 -928
  159. package/package.json +11 -11
  160. package/scss/components/EditFullPage/_index.scss +1 -1
  161. package/scss/components/EditTearsheet/_index.scss +1 -1
  162. package/scss/components/EditTearsheetNarrow/_index.scss +1 -1
  163. package/scss/components/EditUpdateCards/_edit-update-cards.scss +3 -3
  164. package/scss/components/UserAvatar/_carbon-imports.scss +1 -0
  165. package/scss/components/UserAvatar/_user-avatar.scss +4 -0
  166. package/telemetry.yml +5 -1
package/css/index-without-carbon.css CHANGED
@@ -288,6 +288,14 @@ p.c4p--about-modal__copyright-text:first-child {
288
288
  --cds-grid-column-hang: 0.96875rem;
289
289
  }
290
290
 
291
+ .cds--css-grid--start {
292
+ margin-inline-start: 0;
293
+ }
294
+
295
+ .cds--css-grid--end {
296
+ margin-inline-end: 0;
297
+ }
298
+
291
299
  .cds--subgrid {
292
300
  display: grid;
293
301
  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
@@ -12266,2767 +12274,571 @@ th.c4p--datagrid__select-all-toggle-on.button {
12266
12274
  }
12267
12275
 
12268
12276
  :root {
12269
- --cds-grid-gutter: 2rem;
12270
- --cds-grid-columns: 4;
12271
- --cds-grid-margin: 0;
12277
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
12278
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
12279
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
12280
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
12281
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
12282
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
12283
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
12284
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
12285
+ --cds-field: var(--cds-field-01, #f4f4f4);
12286
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
12287
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
12288
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
12289
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
12290
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
12272
12291
  }
12273
12292
 
12274
- @media (min-width: 42rem) {
12275
- :root {
12276
- --cds-grid-columns: 8;
12277
- --cds-grid-margin: 1rem;
12278
- }
12293
+ .cds--layer-one {
12294
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
12295
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
12296
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
12297
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
12298
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
12299
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
12300
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
12301
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
12302
+ --cds-field: var(--cds-field-01, #f4f4f4);
12303
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
12304
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
12305
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
12306
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
12307
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
12279
12308
  }
12280
- @media (min-width: 66rem) {
12281
- :root {
12282
- --cds-grid-columns: 16;
12283
- }
12309
+
12310
+ .cds--layer-two {
12311
+ --cds-layer: var(--cds-layer-02, #ffffff);
12312
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
12313
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
12314
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
12315
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
12316
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
12317
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
12318
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
12319
+ --cds-field: var(--cds-field-02, #ffffff);
12320
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
12321
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
12322
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
12323
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
12324
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
12284
12325
  }
12285
- @media (min-width: 99rem) {
12286
- :root {
12287
- --cds-grid-margin: 1.5rem;
12288
- }
12326
+
12327
+ .cds--layer-three {
12328
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
12329
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
12330
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
12331
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
12332
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
12333
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
12334
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
12335
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
12336
+ --cds-field: var(--cds-field-03, #f4f4f4);
12337
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
12338
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
12339
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
12340
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
12341
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
12289
12342
  }
12290
- .cds--css-grid {
12291
- --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
12292
- --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
12293
- --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
12294
- display: grid;
12295
- grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
12296
- inline-size: 100%;
12297
- margin-inline: auto;
12298
- max-inline-size: 99rem;
12299
- padding-inline: var(--cds-grid-margin);
12343
+
12344
+ .cds--side-nav {
12345
+ position: fixed;
12346
+ z-index: 8000;
12347
+ overflow: hidden;
12348
+ background-color: var(--cds-background, #ffffff);
12349
+ color: var(--cds-text-secondary, #525252);
12350
+ inline-size: 3rem;
12351
+ inset-block: 0;
12352
+ inset-inline-start: 0;
12353
+ max-inline-size: 16rem;
12354
+ transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
12355
+ will-change: inline-size;
12300
12356
  }
12301
12357
 
12302
- .cds--css-grid--full-width {
12303
- max-inline-size: 100%;
12358
+ .cds--side-nav--ux {
12359
+ inline-size: 16rem;
12360
+ inset-block-start: 3rem;
12361
+ }
12362
+ @media (max-width: 65.98rem) {
12363
+ .cds--side-nav--ux {
12364
+ inline-size: 0;
12365
+ }
12304
12366
  }
12305
12367
 
12306
- .cds--css-grid-column {
12307
- --cds-grid-mode-start: var(--cds-grid-gutter-start);
12308
- --cds-grid-mode-end: var(--cds-grid-gutter-end);
12309
- margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
12368
+ .cds--side-nav--rail {
12369
+ inline-size: 3rem;
12310
12370
  }
12311
12371
 
12312
- [dir=rtl] .cds--css-grid-column {
12313
- margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
12372
+ .cds--side-nav--hidden {
12373
+ inline-size: 0;
12314
12374
  }
12315
12375
 
12316
- .cds--css-grid--narrow {
12317
- --cds-grid-gutter-start: 0;
12376
+ .cds--side-nav--expanded {
12377
+ inline-size: 16rem;
12318
12378
  }
12319
12379
 
12320
- .cds--css-grid--condensed {
12321
- --cds-grid-gutter: 0.0625rem;
12322
- --cds-grid-column-hang: 0.96875rem;
12380
+ .cds--side-nav__overlay {
12381
+ position: fixed;
12382
+ background-color: transparent;
12383
+ block-size: 0;
12384
+ inline-size: 0;
12385
+ inset-block-start: 3rem;
12386
+ inset-inline-start: 0;
12387
+ opacity: 0;
12388
+ transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
12323
12389
  }
12324
12390
 
12325
- .cds--subgrid {
12326
- display: grid;
12327
- grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
12328
- margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
12391
+ @media (max-width: 65.98rem) {
12392
+ .cds--side-nav__overlay-active {
12393
+ z-index: 6000;
12394
+ background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
12395
+ block-size: 100vh;
12396
+ inline-size: 100vw;
12397
+ opacity: 1;
12398
+ transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
12399
+ }
12329
12400
  }
12330
12401
 
12331
- [dir=rtl] .cds--subgrid {
12332
- margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
12402
+ .cds--header ~ .cds--side-nav {
12403
+ block-size: calc(100% - 48px);
12404
+ inset-block-start: 3rem;
12333
12405
  }
12334
12406
 
12335
- .cds--subgrid--wide {
12336
- --cds-grid-gutter-start: 1rem;
12337
- --cds-grid-gutter-end: 1rem;
12338
- --cds-grid-column-hang: 0;
12407
+ .cds--side-nav--fixed {
12408
+ inline-size: 16rem;
12339
12409
  }
12340
12410
 
12341
- .cds--subgrid--narrow {
12342
- --cds-grid-gutter-start: 0;
12343
- --cds-grid-gutter-end: 1rem;
12344
- --cds-grid-column-hang: 1rem;
12411
+ .cds--side-nav--collapsed {
12412
+ inline-size: 16rem;
12413
+ transform: translateX(-16rem);
12345
12414
  }
12346
12415
 
12347
- .cds--subgrid--condensed {
12348
- --cds-grid-gutter-start: 0.03125rem;
12349
- --cds-grid-gutter-end: 0.03125rem;
12350
- --cds-grid-column-hang: 0.96875rem;
12416
+ .cds--side-nav__navigation {
12417
+ display: flex;
12418
+ flex-direction: column;
12351
12419
  }
12352
12420
 
12353
- .cds--grid-column-hang {
12354
- margin-inline-start: var(--cds-grid-column-hang);
12421
+ .cds--side-nav__items {
12422
+ box-sizing: border-box;
12423
+ padding: 0;
12424
+ border: 0;
12425
+ margin: 0;
12426
+ font-family: inherit;
12427
+ font-size: 100%;
12428
+ vertical-align: baseline;
12429
+ overflow: hidden;
12430
+ flex: 1 1 0%;
12431
+ padding: 1rem 0 0;
12432
+ }
12433
+ .cds--side-nav__items *,
12434
+ .cds--side-nav__items *::before,
12435
+ .cds--side-nav__items *::after {
12436
+ box-sizing: inherit;
12437
+ }
12438
+ .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
12439
+ overflow-y: auto;
12355
12440
  }
12356
12441
 
12357
- [dir=rtl] .cds--grid-column-hang {
12358
- margin-inline: initial var(--cds-grid-column-hang);
12442
+ .cds--side-nav--ux .cds--side-nav__items {
12443
+ overflow-y: auto;
12359
12444
  }
12360
12445
 
12361
- .cds--col-span-0 {
12362
- display: none;
12446
+ .cds--side-nav__item {
12447
+ overflow: hidden;
12448
+ block-size: auto;
12449
+ inline-size: auto;
12363
12450
  }
12364
12451
 
12365
- .cds--col-span-1 {
12366
- --cds-grid-columns: 1;
12367
- display: block;
12368
- grid-column: span 1/span 1;
12452
+ .cds--side-nav--ux .cds--side-nav__item {
12453
+ block-size: auto;
12454
+ inline-size: auto;
12369
12455
  }
12370
12456
 
12371
- .cds--col-span-2 {
12372
- --cds-grid-columns: 2;
12373
- display: block;
12374
- grid-column: span 2/span 2;
12457
+ .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
12458
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
12459
+ .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
12460
+ .cds--side-nav a.cds--header__menu-item:hover,
12461
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
12462
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
12463
+ color: var(--cds-text-primary, #161616);
12375
12464
  }
12376
12465
 
12377
- .cds--col-span-3 {
12378
- --cds-grid-columns: 3;
12379
- display: block;
12380
- grid-column: span 3/span 3;
12466
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
12467
+ .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
12468
+ color: var(--cds-text-primary, #161616);
12381
12469
  }
12382
12470
 
12383
- .cds--col-span-4 {
12384
- --cds-grid-columns: 4;
12385
- display: block;
12386
- grid-column: span 4/span 4;
12471
+ .cds--side-nav__item--large {
12472
+ block-size: auto;
12387
12473
  }
12388
12474
 
12389
- .cds--col-span-5 {
12390
- --cds-grid-columns: 5;
12391
- display: block;
12392
- grid-column: span 5/span 5;
12475
+ .cds--side-nav__divider {
12476
+ margin: 0.5rem 1rem;
12477
+ background-color: var(--cds-border-subtle);
12478
+ block-size: 1px;
12479
+ list-style-type: none;
12393
12480
  }
12394
12481
 
12395
- .cds--col-span-6 {
12396
- --cds-grid-columns: 6;
12397
- display: block;
12398
- grid-column: span 6/span 6;
12482
+ .cds--side-nav__divider hr {
12483
+ border: none;
12399
12484
  }
12400
12485
 
12401
- .cds--col-span-7 {
12402
- --cds-grid-columns: 7;
12403
- display: block;
12404
- grid-column: span 7/span 7;
12405
- }
12406
-
12407
- .cds--col-span-8 {
12408
- --cds-grid-columns: 8;
12409
- display: block;
12410
- grid-column: span 8/span 8;
12411
- }
12412
-
12413
- .cds--col-span-9 {
12414
- --cds-grid-columns: 9;
12415
- display: block;
12416
- grid-column: span 9/span 9;
12417
- }
12418
-
12419
- .cds--col-span-10 {
12420
- --cds-grid-columns: 10;
12421
- display: block;
12422
- grid-column: span 10/span 10;
12423
- }
12424
-
12425
- .cds--col-span-11 {
12426
- --cds-grid-columns: 11;
12427
- display: block;
12428
- grid-column: span 11/span 11;
12429
- }
12430
-
12431
- .cds--col-span-12 {
12432
- --cds-grid-columns: 12;
12433
- display: block;
12434
- grid-column: span 12/span 12;
12435
- }
12436
-
12437
- .cds--col-span-13 {
12438
- --cds-grid-columns: 13;
12439
- display: block;
12440
- grid-column: span 13/span 13;
12441
- }
12442
-
12443
- .cds--col-span-14 {
12444
- --cds-grid-columns: 14;
12445
- display: block;
12446
- grid-column: span 14/span 14;
12447
- }
12448
-
12449
- .cds--col-span-15 {
12450
- --cds-grid-columns: 15;
12451
- display: block;
12452
- grid-column: span 15/span 15;
12453
- }
12454
-
12455
- .cds--col-span-16 {
12456
- --cds-grid-columns: 16;
12457
- display: block;
12458
- grid-column: span 16/span 16;
12459
- }
12460
-
12461
- .cds--sm\:col-span-0 {
12462
- display: none;
12463
- }
12464
-
12465
- .cds--sm\:col-span-1 {
12466
- --cds-grid-columns: 1;
12467
- display: block;
12468
- grid-column: span 1/span 1;
12469
- }
12470
-
12471
- .cds--sm\:col-span-2 {
12472
- --cds-grid-columns: 2;
12473
- display: block;
12474
- grid-column: span 2/span 2;
12475
- }
12476
-
12477
- .cds--sm\:col-span-3 {
12478
- --cds-grid-columns: 3;
12479
- display: block;
12480
- grid-column: span 3/span 3;
12481
- }
12482
-
12483
- .cds--sm\:col-span-4 {
12484
- --cds-grid-columns: 4;
12485
- display: block;
12486
- grid-column: span 4/span 4;
12487
- }
12488
-
12489
- .cds--sm\:col-span-auto {
12490
- grid-column: auto;
12491
- }
12492
-
12493
- .cds--sm\:col-span-100 {
12494
- grid-column: 1/-1;
12495
- }
12496
-
12497
- .cds--sm\:col-span-75 {
12498
- --cds-grid-columns: 3;
12499
- grid-column: span 3 / span 3;
12500
- }
12501
-
12502
- .cds--sm\:col-span-50 {
12503
- --cds-grid-columns: 2;
12504
- grid-column: span 2 / span 2;
12505
- }
12506
-
12507
- .cds--sm\:col-span-25 {
12508
- --cds-grid-columns: 1;
12509
- grid-column: span 1 / span 1;
12510
- }
12511
-
12512
- @media (min-width: 42rem) {
12513
- .cds--md\:col-span-0 {
12514
- display: none;
12515
- }
12516
- }
12517
- @media (min-width: 42rem) {
12518
- .cds--md\:col-span-1 {
12519
- --cds-grid-columns: 1;
12520
- display: block;
12521
- grid-column: span 1/span 1;
12522
- }
12523
- }
12524
- @media (min-width: 42rem) {
12525
- .cds--md\:col-span-2 {
12526
- --cds-grid-columns: 2;
12527
- display: block;
12528
- grid-column: span 2/span 2;
12529
- }
12530
- }
12531
- @media (min-width: 42rem) {
12532
- .cds--md\:col-span-3 {
12533
- --cds-grid-columns: 3;
12534
- display: block;
12535
- grid-column: span 3/span 3;
12536
- }
12537
- }
12538
- @media (min-width: 42rem) {
12539
- .cds--md\:col-span-4 {
12540
- --cds-grid-columns: 4;
12541
- display: block;
12542
- grid-column: span 4/span 4;
12543
- }
12544
- }
12545
- @media (min-width: 42rem) {
12546
- .cds--md\:col-span-5 {
12547
- --cds-grid-columns: 5;
12548
- display: block;
12549
- grid-column: span 5/span 5;
12550
- }
12551
- }
12552
- @media (min-width: 42rem) {
12553
- .cds--md\:col-span-6 {
12554
- --cds-grid-columns: 6;
12555
- display: block;
12556
- grid-column: span 6/span 6;
12557
- }
12558
- }
12559
- @media (min-width: 42rem) {
12560
- .cds--md\:col-span-7 {
12561
- --cds-grid-columns: 7;
12562
- display: block;
12563
- grid-column: span 7/span 7;
12564
- }
12565
- }
12566
- @media (min-width: 42rem) {
12567
- .cds--md\:col-span-8 {
12568
- --cds-grid-columns: 8;
12569
- display: block;
12570
- grid-column: span 8/span 8;
12571
- }
12572
- }
12573
- @media (min-width: 42rem) {
12574
- .cds--md\:col-span-auto {
12575
- grid-column: auto;
12576
- }
12577
- .cds--md\:col-span-100 {
12578
- grid-column: 1/-1;
12579
- }
12580
- .cds--md\:col-span-75 {
12581
- --cds-grid-columns: 6;
12582
- grid-column: span 6 / span 6;
12583
- }
12584
- .cds--md\:col-span-50 {
12585
- --cds-grid-columns: 4;
12586
- grid-column: span 4 / span 4;
12587
- }
12588
- .cds--md\:col-span-25 {
12589
- --cds-grid-columns: 2;
12590
- grid-column: span 2 / span 2;
12591
- }
12592
- }
12593
- @media (min-width: 66rem) {
12594
- .cds--lg\:col-span-0 {
12595
- display: none;
12596
- }
12597
- }
12598
- @media (min-width: 66rem) {
12599
- .cds--lg\:col-span-1 {
12600
- --cds-grid-columns: 1;
12601
- display: block;
12602
- grid-column: span 1/span 1;
12603
- }
12604
- }
12605
- @media (min-width: 66rem) {
12606
- .cds--lg\:col-span-2 {
12607
- --cds-grid-columns: 2;
12608
- display: block;
12609
- grid-column: span 2/span 2;
12610
- }
12611
- }
12612
- @media (min-width: 66rem) {
12613
- .cds--lg\:col-span-3 {
12614
- --cds-grid-columns: 3;
12615
- display: block;
12616
- grid-column: span 3/span 3;
12617
- }
12618
- }
12619
- @media (min-width: 66rem) {
12620
- .cds--lg\:col-span-4 {
12621
- --cds-grid-columns: 4;
12622
- display: block;
12623
- grid-column: span 4/span 4;
12624
- }
12625
- }
12626
- @media (min-width: 66rem) {
12627
- .cds--lg\:col-span-5 {
12628
- --cds-grid-columns: 5;
12629
- display: block;
12630
- grid-column: span 5/span 5;
12631
- }
12632
- }
12633
- @media (min-width: 66rem) {
12634
- .cds--lg\:col-span-6 {
12635
- --cds-grid-columns: 6;
12636
- display: block;
12637
- grid-column: span 6/span 6;
12638
- }
12639
- }
12640
- @media (min-width: 66rem) {
12641
- .cds--lg\:col-span-7 {
12642
- --cds-grid-columns: 7;
12643
- display: block;
12644
- grid-column: span 7/span 7;
12645
- }
12646
- }
12647
- @media (min-width: 66rem) {
12648
- .cds--lg\:col-span-8 {
12649
- --cds-grid-columns: 8;
12650
- display: block;
12651
- grid-column: span 8/span 8;
12652
- }
12653
- }
12654
- @media (min-width: 66rem) {
12655
- .cds--lg\:col-span-9 {
12656
- --cds-grid-columns: 9;
12657
- display: block;
12658
- grid-column: span 9/span 9;
12659
- }
12660
- }
12661
- @media (min-width: 66rem) {
12662
- .cds--lg\:col-span-10 {
12663
- --cds-grid-columns: 10;
12664
- display: block;
12665
- grid-column: span 10/span 10;
12666
- }
12667
- }
12668
- @media (min-width: 66rem) {
12669
- .cds--lg\:col-span-11 {
12670
- --cds-grid-columns: 11;
12671
- display: block;
12672
- grid-column: span 11/span 11;
12673
- }
12674
- }
12675
- @media (min-width: 66rem) {
12676
- .cds--lg\:col-span-12 {
12677
- --cds-grid-columns: 12;
12678
- display: block;
12679
- grid-column: span 12/span 12;
12680
- }
12681
- }
12682
- @media (min-width: 66rem) {
12683
- .cds--lg\:col-span-13 {
12684
- --cds-grid-columns: 13;
12685
- display: block;
12686
- grid-column: span 13/span 13;
12687
- }
12688
- }
12689
- @media (min-width: 66rem) {
12690
- .cds--lg\:col-span-14 {
12691
- --cds-grid-columns: 14;
12692
- display: block;
12693
- grid-column: span 14/span 14;
12694
- }
12695
- }
12696
- @media (min-width: 66rem) {
12697
- .cds--lg\:col-span-15 {
12698
- --cds-grid-columns: 15;
12699
- display: block;
12700
- grid-column: span 15/span 15;
12701
- }
12702
- }
12703
- @media (min-width: 66rem) {
12704
- .cds--lg\:col-span-16 {
12705
- --cds-grid-columns: 16;
12706
- display: block;
12707
- grid-column: span 16/span 16;
12708
- }
12709
- }
12710
- @media (min-width: 66rem) {
12711
- .cds--lg\:col-span-auto {
12712
- grid-column: auto;
12713
- }
12714
- .cds--lg\:col-span-100 {
12715
- grid-column: 1/-1;
12716
- }
12717
- .cds--lg\:col-span-75 {
12718
- --cds-grid-columns: 12;
12719
- grid-column: span 12 / span 12;
12720
- }
12721
- .cds--lg\:col-span-50 {
12722
- --cds-grid-columns: 8;
12723
- grid-column: span 8 / span 8;
12724
- }
12725
- .cds--lg\:col-span-25 {
12726
- --cds-grid-columns: 4;
12727
- grid-column: span 4 / span 4;
12728
- }
12729
- }
12730
- @media (min-width: 82rem) {
12731
- .cds--xlg\:col-span-0 {
12732
- display: none;
12733
- }
12734
- }
12735
- @media (min-width: 82rem) {
12736
- .cds--xlg\:col-span-1 {
12737
- --cds-grid-columns: 1;
12738
- display: block;
12739
- grid-column: span 1/span 1;
12740
- }
12741
- }
12742
- @media (min-width: 82rem) {
12743
- .cds--xlg\:col-span-2 {
12744
- --cds-grid-columns: 2;
12745
- display: block;
12746
- grid-column: span 2/span 2;
12747
- }
12748
- }
12749
- @media (min-width: 82rem) {
12750
- .cds--xlg\:col-span-3 {
12751
- --cds-grid-columns: 3;
12752
- display: block;
12753
- grid-column: span 3/span 3;
12754
- }
12755
- }
12756
- @media (min-width: 82rem) {
12757
- .cds--xlg\:col-span-4 {
12758
- --cds-grid-columns: 4;
12759
- display: block;
12760
- grid-column: span 4/span 4;
12761
- }
12762
- }
12763
- @media (min-width: 82rem) {
12764
- .cds--xlg\:col-span-5 {
12765
- --cds-grid-columns: 5;
12766
- display: block;
12767
- grid-column: span 5/span 5;
12768
- }
12769
- }
12770
- @media (min-width: 82rem) {
12771
- .cds--xlg\:col-span-6 {
12772
- --cds-grid-columns: 6;
12773
- display: block;
12774
- grid-column: span 6/span 6;
12775
- }
12776
- }
12777
- @media (min-width: 82rem) {
12778
- .cds--xlg\:col-span-7 {
12779
- --cds-grid-columns: 7;
12780
- display: block;
12781
- grid-column: span 7/span 7;
12782
- }
12783
- }
12784
- @media (min-width: 82rem) {
12785
- .cds--xlg\:col-span-8 {
12786
- --cds-grid-columns: 8;
12787
- display: block;
12788
- grid-column: span 8/span 8;
12789
- }
12790
- }
12791
- @media (min-width: 82rem) {
12792
- .cds--xlg\:col-span-9 {
12793
- --cds-grid-columns: 9;
12794
- display: block;
12795
- grid-column: span 9/span 9;
12796
- }
12797
- }
12798
- @media (min-width: 82rem) {
12799
- .cds--xlg\:col-span-10 {
12800
- --cds-grid-columns: 10;
12801
- display: block;
12802
- grid-column: span 10/span 10;
12803
- }
12804
- }
12805
- @media (min-width: 82rem) {
12806
- .cds--xlg\:col-span-11 {
12807
- --cds-grid-columns: 11;
12808
- display: block;
12809
- grid-column: span 11/span 11;
12810
- }
12811
- }
12812
- @media (min-width: 82rem) {
12813
- .cds--xlg\:col-span-12 {
12814
- --cds-grid-columns: 12;
12815
- display: block;
12816
- grid-column: span 12/span 12;
12817
- }
12818
- }
12819
- @media (min-width: 82rem) {
12820
- .cds--xlg\:col-span-13 {
12821
- --cds-grid-columns: 13;
12822
- display: block;
12823
- grid-column: span 13/span 13;
12824
- }
12825
- }
12826
- @media (min-width: 82rem) {
12827
- .cds--xlg\:col-span-14 {
12828
- --cds-grid-columns: 14;
12829
- display: block;
12830
- grid-column: span 14/span 14;
12831
- }
12832
- }
12833
- @media (min-width: 82rem) {
12834
- .cds--xlg\:col-span-15 {
12835
- --cds-grid-columns: 15;
12836
- display: block;
12837
- grid-column: span 15/span 15;
12838
- }
12839
- }
12840
- @media (min-width: 82rem) {
12841
- .cds--xlg\:col-span-16 {
12842
- --cds-grid-columns: 16;
12843
- display: block;
12844
- grid-column: span 16/span 16;
12845
- }
12846
- }
12847
- @media (min-width: 82rem) {
12848
- .cds--xlg\:col-span-auto {
12849
- grid-column: auto;
12850
- }
12851
- .cds--xlg\:col-span-100 {
12852
- grid-column: 1/-1;
12853
- }
12854
- .cds--xlg\:col-span-75 {
12855
- --cds-grid-columns: 12;
12856
- grid-column: span 12 / span 12;
12857
- }
12858
- .cds--xlg\:col-span-50 {
12859
- --cds-grid-columns: 8;
12860
- grid-column: span 8 / span 8;
12861
- }
12862
- .cds--xlg\:col-span-25 {
12863
- --cds-grid-columns: 4;
12864
- grid-column: span 4 / span 4;
12865
- }
12866
- }
12867
- @media (min-width: 99rem) {
12868
- .cds--max\:col-span-0 {
12869
- display: none;
12870
- }
12871
- }
12872
- @media (min-width: 99rem) {
12873
- .cds--max\:col-span-1 {
12874
- --cds-grid-columns: 1;
12875
- display: block;
12876
- grid-column: span 1/span 1;
12877
- }
12878
- }
12879
- @media (min-width: 99rem) {
12880
- .cds--max\:col-span-2 {
12881
- --cds-grid-columns: 2;
12882
- display: block;
12883
- grid-column: span 2/span 2;
12884
- }
12885
- }
12886
- @media (min-width: 99rem) {
12887
- .cds--max\:col-span-3 {
12888
- --cds-grid-columns: 3;
12889
- display: block;
12890
- grid-column: span 3/span 3;
12891
- }
12892
- }
12893
- @media (min-width: 99rem) {
12894
- .cds--max\:col-span-4 {
12895
- --cds-grid-columns: 4;
12896
- display: block;
12897
- grid-column: span 4/span 4;
12898
- }
12899
- }
12900
- @media (min-width: 99rem) {
12901
- .cds--max\:col-span-5 {
12902
- --cds-grid-columns: 5;
12903
- display: block;
12904
- grid-column: span 5/span 5;
12905
- }
12906
- }
12907
- @media (min-width: 99rem) {
12908
- .cds--max\:col-span-6 {
12909
- --cds-grid-columns: 6;
12910
- display: block;
12911
- grid-column: span 6/span 6;
12912
- }
12913
- }
12914
- @media (min-width: 99rem) {
12915
- .cds--max\:col-span-7 {
12916
- --cds-grid-columns: 7;
12917
- display: block;
12918
- grid-column: span 7/span 7;
12919
- }
12920
- }
12921
- @media (min-width: 99rem) {
12922
- .cds--max\:col-span-8 {
12923
- --cds-grid-columns: 8;
12924
- display: block;
12925
- grid-column: span 8/span 8;
12926
- }
12927
- }
12928
- @media (min-width: 99rem) {
12929
- .cds--max\:col-span-9 {
12930
- --cds-grid-columns: 9;
12931
- display: block;
12932
- grid-column: span 9/span 9;
12933
- }
12934
- }
12935
- @media (min-width: 99rem) {
12936
- .cds--max\:col-span-10 {
12937
- --cds-grid-columns: 10;
12938
- display: block;
12939
- grid-column: span 10/span 10;
12940
- }
12941
- }
12942
- @media (min-width: 99rem) {
12943
- .cds--max\:col-span-11 {
12944
- --cds-grid-columns: 11;
12945
- display: block;
12946
- grid-column: span 11/span 11;
12947
- }
12948
- }
12949
- @media (min-width: 99rem) {
12950
- .cds--max\:col-span-12 {
12951
- --cds-grid-columns: 12;
12952
- display: block;
12953
- grid-column: span 12/span 12;
12954
- }
12955
- }
12956
- @media (min-width: 99rem) {
12957
- .cds--max\:col-span-13 {
12958
- --cds-grid-columns: 13;
12959
- display: block;
12960
- grid-column: span 13/span 13;
12961
- }
12962
- }
12963
- @media (min-width: 99rem) {
12964
- .cds--max\:col-span-14 {
12965
- --cds-grid-columns: 14;
12966
- display: block;
12967
- grid-column: span 14/span 14;
12968
- }
12969
- }
12970
- @media (min-width: 99rem) {
12971
- .cds--max\:col-span-15 {
12972
- --cds-grid-columns: 15;
12973
- display: block;
12974
- grid-column: span 15/span 15;
12975
- }
12976
- }
12977
- @media (min-width: 99rem) {
12978
- .cds--max\:col-span-16 {
12979
- --cds-grid-columns: 16;
12980
- display: block;
12981
- grid-column: span 16/span 16;
12982
- }
12983
- }
12984
- @media (min-width: 99rem) {
12985
- .cds--max\:col-span-auto {
12986
- grid-column: auto;
12987
- }
12988
- .cds--max\:col-span-100 {
12989
- grid-column: 1/-1;
12990
- }
12991
- .cds--max\:col-span-75 {
12992
- --cds-grid-columns: 12;
12993
- grid-column: span 12 / span 12;
12994
- }
12995
- .cds--max\:col-span-50 {
12996
- --cds-grid-columns: 8;
12997
- grid-column: span 8 / span 8;
12998
- }
12999
- .cds--max\:col-span-25 {
13000
- --cds-grid-columns: 4;
13001
- grid-column: span 4 / span 4;
13002
- }
13003
- }
13004
- .cds--col-span-auto {
13005
- grid-column: auto;
13006
- }
13007
-
13008
- .cds--col-span-100 {
13009
- grid-column: 1/-1;
13010
- }
13011
-
13012
- .cds--col-span-75 {
13013
- --cds-grid-columns: 3;
13014
- grid-column: span 3 / span 3;
13015
- }
13016
-
13017
- @media (min-width: 42rem) {
13018
- .cds--col-span-75 {
13019
- --cds-grid-columns: 6;
13020
- grid-column: span 6 / span 6;
13021
- }
13022
- }
13023
- @media (min-width: 66rem) {
13024
- .cds--col-span-75 {
13025
- --cds-grid-columns: 12;
13026
- grid-column: span 12 / span 12;
13027
- }
13028
- }
13029
- .cds--col-span-50 {
13030
- --cds-grid-columns: 2;
13031
- grid-column: span 2 / span 2;
13032
- }
13033
-
13034
- @media (min-width: 42rem) {
13035
- .cds--col-span-50 {
13036
- --cds-grid-columns: 4;
13037
- grid-column: span 4 / span 4;
13038
- }
13039
- }
13040
- @media (min-width: 66rem) {
13041
- .cds--col-span-50 {
13042
- --cds-grid-columns: 8;
13043
- grid-column: span 8 / span 8;
13044
- }
13045
- }
13046
- .cds--col-span-25 {
13047
- --cds-grid-columns: 1;
13048
- grid-column: span 1 / span 1;
13049
- }
13050
-
13051
- @media (min-width: 42rem) {
13052
- .cds--col-span-25 {
13053
- --cds-grid-columns: 2;
13054
- grid-column: span 2 / span 2;
13055
- }
13056
- }
13057
- @media (min-width: 66rem) {
13058
- .cds--col-span-25 {
13059
- --cds-grid-columns: 4;
13060
- grid-column: span 4 / span 4;
13061
- }
13062
- }
13063
- .cds--col-start-1 {
13064
- grid-column-start: 1;
13065
- }
13066
-
13067
- .cds--col-start-2 {
13068
- grid-column-start: 2;
13069
- }
13070
-
13071
- .cds--col-start-3 {
13072
- grid-column-start: 3;
13073
- }
13074
-
13075
- .cds--col-start-4 {
13076
- grid-column-start: 4;
13077
- }
13078
-
13079
- .cds--col-start-5 {
13080
- grid-column-start: 5;
13081
- }
13082
-
13083
- .cds--col-start-6 {
13084
- grid-column-start: 6;
13085
- }
13086
-
13087
- .cds--col-start-7 {
13088
- grid-column-start: 7;
13089
- }
13090
-
13091
- .cds--col-start-8 {
13092
- grid-column-start: 8;
13093
- }
13094
-
13095
- .cds--col-start-9 {
13096
- grid-column-start: 9;
13097
- }
13098
-
13099
- .cds--col-start-10 {
13100
- grid-column-start: 10;
13101
- }
13102
-
13103
- .cds--col-start-11 {
13104
- grid-column-start: 11;
13105
- }
13106
-
13107
- .cds--col-start-12 {
13108
- grid-column-start: 12;
13109
- }
13110
-
13111
- .cds--col-start-13 {
13112
- grid-column-start: 13;
13113
- }
13114
-
13115
- .cds--col-start-14 {
13116
- grid-column-start: 14;
13117
- }
13118
-
13119
- .cds--col-start-15 {
13120
- grid-column-start: 15;
13121
- }
13122
-
13123
- .cds--col-start-16 {
13124
- grid-column-start: 16;
13125
- }
13126
-
13127
- .cds--col-end-2 {
13128
- grid-column-end: 2;
13129
- }
13130
-
13131
- .cds--col-end-3 {
13132
- grid-column-end: 3;
13133
- }
13134
-
13135
- .cds--col-end-4 {
13136
- grid-column-end: 4;
13137
- }
13138
-
13139
- .cds--col-end-5 {
13140
- grid-column-end: 5;
13141
- }
13142
-
13143
- .cds--col-end-6 {
13144
- grid-column-end: 6;
13145
- }
13146
-
13147
- .cds--col-end-7 {
13148
- grid-column-end: 7;
13149
- }
13150
-
13151
- .cds--col-end-8 {
13152
- grid-column-end: 8;
13153
- }
13154
-
13155
- .cds--col-end-9 {
13156
- grid-column-end: 9;
13157
- }
13158
-
13159
- .cds--col-end-10 {
13160
- grid-column-end: 10;
13161
- }
13162
-
13163
- .cds--col-end-11 {
13164
- grid-column-end: 11;
13165
- }
13166
-
13167
- .cds--col-end-12 {
13168
- grid-column-end: 12;
13169
- }
13170
-
13171
- .cds--col-end-13 {
13172
- grid-column-end: 13;
13173
- }
13174
-
13175
- .cds--col-end-14 {
13176
- grid-column-end: 14;
13177
- }
13178
-
13179
- .cds--col-end-15 {
13180
- grid-column-end: 15;
13181
- }
13182
-
13183
- .cds--col-end-16 {
13184
- grid-column-end: 16;
13185
- }
13186
-
13187
- .cds--col-end-17 {
13188
- grid-column-end: 17;
13189
- }
13190
-
13191
- .cds--col-start-auto {
13192
- grid-column-start: auto;
13193
- }
13194
-
13195
- .cds--col-end-auto {
13196
- grid-column-end: auto;
13197
- }
13198
-
13199
- .cds--sm\:col-start-1 {
13200
- grid-column-start: 1;
13201
- }
13202
-
13203
- .cds--sm\:col-start-2 {
13204
- grid-column-start: 2;
13205
- }
13206
-
13207
- .cds--sm\:col-start-3 {
13208
- grid-column-start: 3;
13209
- }
13210
-
13211
- .cds--sm\:col-start-4 {
13212
- grid-column-start: 4;
13213
- }
13214
-
13215
- .cds--sm\:col-start-5 {
13216
- grid-column-start: 5;
13217
- }
13218
-
13219
- .cds--sm\:col-start-6 {
13220
- grid-column-start: 6;
13221
- }
13222
-
13223
- .cds--sm\:col-start-7 {
13224
- grid-column-start: 7;
13225
- }
13226
-
13227
- .cds--sm\:col-start-8 {
13228
- grid-column-start: 8;
13229
- }
13230
-
13231
- .cds--sm\:col-start-9 {
13232
- grid-column-start: 9;
13233
- }
13234
-
13235
- .cds--sm\:col-start-10 {
13236
- grid-column-start: 10;
13237
- }
13238
-
13239
- .cds--sm\:col-start-11 {
13240
- grid-column-start: 11;
13241
- }
13242
-
13243
- .cds--sm\:col-start-12 {
13244
- grid-column-start: 12;
13245
- }
13246
-
13247
- .cds--sm\:col-start-13 {
13248
- grid-column-start: 13;
13249
- }
13250
-
13251
- .cds--sm\:col-start-14 {
13252
- grid-column-start: 14;
13253
- }
13254
-
13255
- .cds--sm\:col-start-15 {
13256
- grid-column-start: 15;
13257
- }
13258
-
13259
- .cds--sm\:col-start-16 {
13260
- grid-column-start: 16;
13261
- }
13262
-
13263
- .cds--sm\:col-end-2 {
13264
- grid-column-end: 2;
13265
- }
13266
-
13267
- .cds--sm\:col-end-3 {
13268
- grid-column-end: 3;
13269
- }
13270
-
13271
- .cds--sm\:col-end-4 {
13272
- grid-column-end: 4;
13273
- }
13274
-
13275
- .cds--sm\:col-end-5 {
13276
- grid-column-end: 5;
13277
- }
13278
-
13279
- .cds--sm\:col-end-6 {
13280
- grid-column-end: 6;
13281
- }
13282
-
13283
- .cds--sm\:col-end-7 {
13284
- grid-column-end: 7;
13285
- }
13286
-
13287
- .cds--sm\:col-end-8 {
13288
- grid-column-end: 8;
13289
- }
13290
-
13291
- .cds--sm\:col-end-9 {
13292
- grid-column-end: 9;
13293
- }
13294
-
13295
- .cds--sm\:col-end-10 {
13296
- grid-column-end: 10;
13297
- }
13298
-
13299
- .cds--sm\:col-end-11 {
13300
- grid-column-end: 11;
13301
- }
13302
-
13303
- .cds--sm\:col-end-12 {
13304
- grid-column-end: 12;
13305
- }
13306
-
13307
- .cds--sm\:col-end-13 {
13308
- grid-column-end: 13;
13309
- }
13310
-
13311
- .cds--sm\:col-end-14 {
13312
- grid-column-end: 14;
13313
- }
13314
-
13315
- .cds--sm\:col-end-15 {
13316
- grid-column-end: 15;
13317
- }
13318
-
13319
- .cds--sm\:col-end-16 {
13320
- grid-column-end: 16;
13321
- }
13322
-
13323
- .cds--sm\:col-end-17 {
13324
- grid-column-end: 17;
13325
- }
13326
-
13327
- .cds--sm\:col-start-auto {
13328
- grid-column-start: auto;
13329
- }
13330
-
13331
- .cds--sm\:col-end-auto {
13332
- grid-column-end: auto;
13333
- }
13334
-
13335
- @media (min-width: 42rem) {
13336
- .cds--md\:col-start-1 {
13337
- grid-column-start: 1;
13338
- }
13339
- .cds--md\:col-start-2 {
13340
- grid-column-start: 2;
13341
- }
13342
- .cds--md\:col-start-3 {
13343
- grid-column-start: 3;
13344
- }
13345
- .cds--md\:col-start-4 {
13346
- grid-column-start: 4;
13347
- }
13348
- .cds--md\:col-start-5 {
13349
- grid-column-start: 5;
13350
- }
13351
- .cds--md\:col-start-6 {
13352
- grid-column-start: 6;
13353
- }
13354
- .cds--md\:col-start-7 {
13355
- grid-column-start: 7;
13356
- }
13357
- .cds--md\:col-start-8 {
13358
- grid-column-start: 8;
13359
- }
13360
- .cds--md\:col-start-9 {
13361
- grid-column-start: 9;
13362
- }
13363
- .cds--md\:col-start-10 {
13364
- grid-column-start: 10;
13365
- }
13366
- .cds--md\:col-start-11 {
13367
- grid-column-start: 11;
13368
- }
13369
- .cds--md\:col-start-12 {
13370
- grid-column-start: 12;
13371
- }
13372
- .cds--md\:col-start-13 {
13373
- grid-column-start: 13;
13374
- }
13375
- .cds--md\:col-start-14 {
13376
- grid-column-start: 14;
13377
- }
13378
- .cds--md\:col-start-15 {
13379
- grid-column-start: 15;
13380
- }
13381
- .cds--md\:col-start-16 {
13382
- grid-column-start: 16;
13383
- }
13384
- .cds--md\:col-end-2 {
13385
- grid-column-end: 2;
13386
- }
13387
- .cds--md\:col-end-3 {
13388
- grid-column-end: 3;
13389
- }
13390
- .cds--md\:col-end-4 {
13391
- grid-column-end: 4;
13392
- }
13393
- .cds--md\:col-end-5 {
13394
- grid-column-end: 5;
13395
- }
13396
- .cds--md\:col-end-6 {
13397
- grid-column-end: 6;
13398
- }
13399
- .cds--md\:col-end-7 {
13400
- grid-column-end: 7;
13401
- }
13402
- .cds--md\:col-end-8 {
13403
- grid-column-end: 8;
13404
- }
13405
- .cds--md\:col-end-9 {
13406
- grid-column-end: 9;
13407
- }
13408
- .cds--md\:col-end-10 {
13409
- grid-column-end: 10;
13410
- }
13411
- .cds--md\:col-end-11 {
13412
- grid-column-end: 11;
13413
- }
13414
- .cds--md\:col-end-12 {
13415
- grid-column-end: 12;
13416
- }
13417
- .cds--md\:col-end-13 {
13418
- grid-column-end: 13;
13419
- }
13420
- .cds--md\:col-end-14 {
13421
- grid-column-end: 14;
13422
- }
13423
- .cds--md\:col-end-15 {
13424
- grid-column-end: 15;
13425
- }
13426
- .cds--md\:col-end-16 {
13427
- grid-column-end: 16;
13428
- }
13429
- .cds--md\:col-end-17 {
13430
- grid-column-end: 17;
13431
- }
13432
- .cds--md\:col-start-auto {
13433
- grid-column-start: auto;
13434
- }
13435
- .cds--md\:col-end-auto {
13436
- grid-column-end: auto;
13437
- }
13438
- }
13439
- @media (min-width: 66rem) {
13440
- .cds--lg\:col-start-1 {
13441
- grid-column-start: 1;
13442
- }
13443
- .cds--lg\:col-start-2 {
13444
- grid-column-start: 2;
13445
- }
13446
- .cds--lg\:col-start-3 {
13447
- grid-column-start: 3;
13448
- }
13449
- .cds--lg\:col-start-4 {
13450
- grid-column-start: 4;
13451
- }
13452
- .cds--lg\:col-start-5 {
13453
- grid-column-start: 5;
13454
- }
13455
- .cds--lg\:col-start-6 {
13456
- grid-column-start: 6;
13457
- }
13458
- .cds--lg\:col-start-7 {
13459
- grid-column-start: 7;
13460
- }
13461
- .cds--lg\:col-start-8 {
13462
- grid-column-start: 8;
13463
- }
13464
- .cds--lg\:col-start-9 {
13465
- grid-column-start: 9;
13466
- }
13467
- .cds--lg\:col-start-10 {
13468
- grid-column-start: 10;
13469
- }
13470
- .cds--lg\:col-start-11 {
13471
- grid-column-start: 11;
13472
- }
13473
- .cds--lg\:col-start-12 {
13474
- grid-column-start: 12;
13475
- }
13476
- .cds--lg\:col-start-13 {
13477
- grid-column-start: 13;
13478
- }
13479
- .cds--lg\:col-start-14 {
13480
- grid-column-start: 14;
13481
- }
13482
- .cds--lg\:col-start-15 {
13483
- grid-column-start: 15;
13484
- }
13485
- .cds--lg\:col-start-16 {
13486
- grid-column-start: 16;
13487
- }
13488
- .cds--lg\:col-end-2 {
13489
- grid-column-end: 2;
13490
- }
13491
- .cds--lg\:col-end-3 {
13492
- grid-column-end: 3;
13493
- }
13494
- .cds--lg\:col-end-4 {
13495
- grid-column-end: 4;
13496
- }
13497
- .cds--lg\:col-end-5 {
13498
- grid-column-end: 5;
13499
- }
13500
- .cds--lg\:col-end-6 {
13501
- grid-column-end: 6;
13502
- }
13503
- .cds--lg\:col-end-7 {
13504
- grid-column-end: 7;
13505
- }
13506
- .cds--lg\:col-end-8 {
13507
- grid-column-end: 8;
13508
- }
13509
- .cds--lg\:col-end-9 {
13510
- grid-column-end: 9;
13511
- }
13512
- .cds--lg\:col-end-10 {
13513
- grid-column-end: 10;
13514
- }
13515
- .cds--lg\:col-end-11 {
13516
- grid-column-end: 11;
13517
- }
13518
- .cds--lg\:col-end-12 {
13519
- grid-column-end: 12;
13520
- }
13521
- .cds--lg\:col-end-13 {
13522
- grid-column-end: 13;
13523
- }
13524
- .cds--lg\:col-end-14 {
13525
- grid-column-end: 14;
13526
- }
13527
- .cds--lg\:col-end-15 {
13528
- grid-column-end: 15;
13529
- }
13530
- .cds--lg\:col-end-16 {
13531
- grid-column-end: 16;
13532
- }
13533
- .cds--lg\:col-end-17 {
13534
- grid-column-end: 17;
13535
- }
13536
- .cds--lg\:col-start-auto {
13537
- grid-column-start: auto;
13538
- }
13539
- .cds--lg\:col-end-auto {
13540
- grid-column-end: auto;
13541
- }
13542
- }
13543
- @media (min-width: 82rem) {
13544
- .cds--xlg\:col-start-1 {
13545
- grid-column-start: 1;
13546
- }
13547
- .cds--xlg\:col-start-2 {
13548
- grid-column-start: 2;
13549
- }
13550
- .cds--xlg\:col-start-3 {
13551
- grid-column-start: 3;
13552
- }
13553
- .cds--xlg\:col-start-4 {
13554
- grid-column-start: 4;
13555
- }
13556
- .cds--xlg\:col-start-5 {
13557
- grid-column-start: 5;
13558
- }
13559
- .cds--xlg\:col-start-6 {
13560
- grid-column-start: 6;
13561
- }
13562
- .cds--xlg\:col-start-7 {
13563
- grid-column-start: 7;
13564
- }
13565
- .cds--xlg\:col-start-8 {
13566
- grid-column-start: 8;
13567
- }
13568
- .cds--xlg\:col-start-9 {
13569
- grid-column-start: 9;
13570
- }
13571
- .cds--xlg\:col-start-10 {
13572
- grid-column-start: 10;
13573
- }
13574
- .cds--xlg\:col-start-11 {
13575
- grid-column-start: 11;
13576
- }
13577
- .cds--xlg\:col-start-12 {
13578
- grid-column-start: 12;
13579
- }
13580
- .cds--xlg\:col-start-13 {
13581
- grid-column-start: 13;
13582
- }
13583
- .cds--xlg\:col-start-14 {
13584
- grid-column-start: 14;
13585
- }
13586
- .cds--xlg\:col-start-15 {
13587
- grid-column-start: 15;
13588
- }
13589
- .cds--xlg\:col-start-16 {
13590
- grid-column-start: 16;
13591
- }
13592
- .cds--xlg\:col-end-2 {
13593
- grid-column-end: 2;
13594
- }
13595
- .cds--xlg\:col-end-3 {
13596
- grid-column-end: 3;
13597
- }
13598
- .cds--xlg\:col-end-4 {
13599
- grid-column-end: 4;
13600
- }
13601
- .cds--xlg\:col-end-5 {
13602
- grid-column-end: 5;
13603
- }
13604
- .cds--xlg\:col-end-6 {
13605
- grid-column-end: 6;
13606
- }
13607
- .cds--xlg\:col-end-7 {
13608
- grid-column-end: 7;
13609
- }
13610
- .cds--xlg\:col-end-8 {
13611
- grid-column-end: 8;
13612
- }
13613
- .cds--xlg\:col-end-9 {
13614
- grid-column-end: 9;
13615
- }
13616
- .cds--xlg\:col-end-10 {
13617
- grid-column-end: 10;
13618
- }
13619
- .cds--xlg\:col-end-11 {
13620
- grid-column-end: 11;
13621
- }
13622
- .cds--xlg\:col-end-12 {
13623
- grid-column-end: 12;
13624
- }
13625
- .cds--xlg\:col-end-13 {
13626
- grid-column-end: 13;
13627
- }
13628
- .cds--xlg\:col-end-14 {
13629
- grid-column-end: 14;
13630
- }
13631
- .cds--xlg\:col-end-15 {
13632
- grid-column-end: 15;
13633
- }
13634
- .cds--xlg\:col-end-16 {
13635
- grid-column-end: 16;
13636
- }
13637
- .cds--xlg\:col-end-17 {
13638
- grid-column-end: 17;
13639
- }
13640
- .cds--xlg\:col-start-auto {
13641
- grid-column-start: auto;
13642
- }
13643
- .cds--xlg\:col-end-auto {
13644
- grid-column-end: auto;
13645
- }
13646
- }
13647
- @media (min-width: 99rem) {
13648
- .cds--max\:col-start-1 {
13649
- grid-column-start: 1;
13650
- }
13651
- .cds--max\:col-start-2 {
13652
- grid-column-start: 2;
13653
- }
13654
- .cds--max\:col-start-3 {
13655
- grid-column-start: 3;
13656
- }
13657
- .cds--max\:col-start-4 {
13658
- grid-column-start: 4;
13659
- }
13660
- .cds--max\:col-start-5 {
13661
- grid-column-start: 5;
13662
- }
13663
- .cds--max\:col-start-6 {
13664
- grid-column-start: 6;
13665
- }
13666
- .cds--max\:col-start-7 {
13667
- grid-column-start: 7;
13668
- }
13669
- .cds--max\:col-start-8 {
13670
- grid-column-start: 8;
13671
- }
13672
- .cds--max\:col-start-9 {
13673
- grid-column-start: 9;
13674
- }
13675
- .cds--max\:col-start-10 {
13676
- grid-column-start: 10;
13677
- }
13678
- .cds--max\:col-start-11 {
13679
- grid-column-start: 11;
13680
- }
13681
- .cds--max\:col-start-12 {
13682
- grid-column-start: 12;
13683
- }
13684
- .cds--max\:col-start-13 {
13685
- grid-column-start: 13;
13686
- }
13687
- .cds--max\:col-start-14 {
13688
- grid-column-start: 14;
13689
- }
13690
- .cds--max\:col-start-15 {
13691
- grid-column-start: 15;
13692
- }
13693
- .cds--max\:col-start-16 {
13694
- grid-column-start: 16;
13695
- }
13696
- .cds--max\:col-end-2 {
13697
- grid-column-end: 2;
13698
- }
13699
- .cds--max\:col-end-3 {
13700
- grid-column-end: 3;
13701
- }
13702
- .cds--max\:col-end-4 {
13703
- grid-column-end: 4;
13704
- }
13705
- .cds--max\:col-end-5 {
13706
- grid-column-end: 5;
13707
- }
13708
- .cds--max\:col-end-6 {
13709
- grid-column-end: 6;
13710
- }
13711
- .cds--max\:col-end-7 {
13712
- grid-column-end: 7;
13713
- }
13714
- .cds--max\:col-end-8 {
13715
- grid-column-end: 8;
13716
- }
13717
- .cds--max\:col-end-9 {
13718
- grid-column-end: 9;
13719
- }
13720
- .cds--max\:col-end-10 {
13721
- grid-column-end: 10;
13722
- }
13723
- .cds--max\:col-end-11 {
13724
- grid-column-end: 11;
13725
- }
13726
- .cds--max\:col-end-12 {
13727
- grid-column-end: 12;
13728
- }
13729
- .cds--max\:col-end-13 {
13730
- grid-column-end: 13;
13731
- }
13732
- .cds--max\:col-end-14 {
13733
- grid-column-end: 14;
13734
- }
13735
- .cds--max\:col-end-15 {
13736
- grid-column-end: 15;
13737
- }
13738
- .cds--max\:col-end-16 {
13739
- grid-column-end: 16;
13740
- }
13741
- .cds--max\:col-end-17 {
13742
- grid-column-end: 17;
13743
- }
13744
- .cds--max\:col-start-auto {
13745
- grid-column-start: auto;
13746
- }
13747
- .cds--max\:col-end-auto {
13748
- grid-column-end: auto;
13749
- }
13750
- }
13751
- .cds--assistive-text,
13752
- .cds--visually-hidden {
13753
- position: absolute;
13754
- overflow: hidden;
13755
- padding: 0;
13756
- border: 0;
13757
- margin: -1px;
13758
- block-size: 1px;
13759
- clip: rect(0, 0, 0, 0);
13760
- inline-size: 1px;
13761
- visibility: inherit;
13762
- white-space: nowrap;
13763
- }
13764
-
13765
- @keyframes cds--hide-feedback {
13766
- 0% {
13767
- opacity: 1;
13768
- visibility: inherit;
13769
- }
13770
- 100% {
13771
- opacity: 0;
13772
- visibility: hidden;
13773
- }
13774
- }
13775
- @keyframes cds--show-feedback {
13776
- 0% {
13777
- opacity: 0;
13778
- visibility: hidden;
13779
- }
13780
- 100% {
13781
- opacity: 1;
13782
- visibility: inherit;
13783
- }
13784
- }
13785
- @keyframes cds--skeleton {
13786
- 0% {
13787
- opacity: 0.3;
13788
- transform: scaleX(0);
13789
- transform-origin: left;
13790
- }
13791
- 20% {
13792
- opacity: 1;
13793
- transform: scaleX(1);
13794
- transform-origin: left;
13795
- }
13796
- 28% {
13797
- transform: scaleX(1);
13798
- transform-origin: right;
13799
- }
13800
- 51% {
13801
- transform: scaleX(0);
13802
- transform-origin: right;
13803
- }
13804
- 58% {
13805
- transform: scaleX(0);
13806
- transform-origin: right;
13807
- }
13808
- 82% {
13809
- transform: scaleX(1);
13810
- transform-origin: right;
13811
- }
13812
- 83% {
13813
- transform: scaleX(1);
13814
- transform-origin: left;
13815
- }
13816
- 96% {
13817
- transform: scaleX(0);
13818
- transform-origin: left;
13819
- }
13820
- 100% {
13821
- opacity: 0.3;
13822
- transform: scaleX(0);
13823
- transform-origin: left;
13824
- }
13825
- }
13826
- :root {
13827
- --cds-layer: var(--cds-layer-01, #f4f4f4);
13828
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
13829
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
13830
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
13831
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
13832
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
13833
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
13834
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13835
- --cds-field: var(--cds-field-01, #f4f4f4);
13836
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13837
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
13838
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13839
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
13840
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13841
- }
13842
-
13843
- .cds--layer-one {
13844
- --cds-layer: var(--cds-layer-01, #f4f4f4);
13845
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
13846
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
13847
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
13848
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
13849
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
13850
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
13851
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13852
- --cds-field: var(--cds-field-01, #f4f4f4);
13853
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13854
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
13855
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13856
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
13857
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13858
- }
13859
-
13860
- .cds--layer-two {
13861
- --cds-layer: var(--cds-layer-02, #ffffff);
13862
- --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
13863
- --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
13864
- --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
13865
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
13866
- --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
13867
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
13868
- --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
13869
- --cds-field: var(--cds-field-02, #ffffff);
13870
- --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
13871
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
13872
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
13873
- --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
13874
- --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
13875
- }
13876
-
13877
- .cds--layer-three {
13878
- --cds-layer: var(--cds-layer-03, #f4f4f4);
13879
- --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
13880
- --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
13881
- --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
13882
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
13883
- --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
13884
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
13885
- --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
13886
- --cds-field: var(--cds-field-03, #f4f4f4);
13887
- --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
13888
- --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
13889
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
13890
- --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
13891
- --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
13892
- }
13893
-
13894
- .cds--side-nav {
13895
- position: fixed;
13896
- z-index: 8000;
13897
- overflow: hidden;
13898
- background-color: var(--cds-background, #ffffff);
13899
- color: var(--cds-text-secondary, #525252);
13900
- inline-size: 3rem;
13901
- inset-block: 0 0;
13902
- inset-inline-start: 0;
13903
- max-inline-size: 16rem;
13904
- transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
13905
- will-change: inline-size;
13906
- }
13907
-
13908
- .cds--side-nav--ux {
13909
- inline-size: 16rem;
13910
- inset-block-start: 3rem;
13911
- }
13912
-
13913
- @media (max-width: 65.98rem) {
13914
- .cds--side-nav--ux {
13915
- inline-size: 0;
13916
- }
13917
- }
13918
- .cds--side-nav--rail {
13919
- inline-size: 3rem;
13920
- }
13921
-
13922
- .cds--side-nav--hidden {
13923
- inline-size: 0;
13924
- }
13925
-
13926
- .cds--side-nav--expanded {
13927
- inline-size: 16rem;
13928
- }
13929
-
13930
- .cds--side-nav__overlay {
13931
- position: fixed;
13932
- background-color: transparent;
13933
- block-size: 0;
13934
- inline-size: 0;
13935
- inset-block-start: 3rem;
13936
- inset-inline-start: 0;
13937
- opacity: 0;
13938
- transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
13939
- }
13940
-
13941
- @media (max-width: 65.98rem) {
13942
- .cds--side-nav__overlay-active {
13943
- z-index: 6000;
13944
- background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
13945
- block-size: 100vh;
13946
- inline-size: 100vw;
13947
- opacity: 1;
13948
- transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
13949
- }
13950
- }
13951
- .cds--header ~ .cds--side-nav {
13952
- block-size: calc(100% - 48px);
13953
- inset-block-start: 3rem;
13954
- }
13955
-
13956
- .cds--side-nav--fixed {
13957
- inline-size: 16rem;
13958
- }
13959
-
13960
- .cds--side-nav--collapsed {
13961
- inline-size: 16rem;
13962
- transform: translateX(-16rem);
13963
- }
13964
-
13965
- .cds--side-nav__navigation {
13966
- display: flex;
13967
- flex-direction: column;
13968
- }
13969
-
13970
- .cds--side-nav__items {
13971
- box-sizing: border-box;
13972
- padding: 0;
13973
- border: 0;
13974
- margin: 0;
13975
- font-family: inherit;
13976
- font-size: 100%;
13977
- vertical-align: baseline;
13978
- overflow: hidden;
13979
- flex: 1 1 0%;
13980
- padding: 1rem 0 0;
13981
- }
13982
-
13983
- .cds--side-nav__items *,
13984
- .cds--side-nav__items *::before,
13985
- .cds--side-nav__items *::after {
13986
- box-sizing: inherit;
13987
- }
13988
-
13989
- .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
13990
- overflow-y: auto;
13991
- }
13992
-
13993
- .cds--side-nav--ux .cds--side-nav__items {
13994
- overflow-y: auto;
13995
- }
13996
-
13997
- .cds--side-nav__item {
13998
- overflow: hidden;
13999
- block-size: auto;
14000
- inline-size: auto;
14001
- }
14002
-
14003
- .cds--side-nav--ux .cds--side-nav__item {
14004
- block-size: auto;
14005
- inline-size: auto;
14006
- }
14007
-
14008
- .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
14009
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
14010
- .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
14011
- .cds--side-nav a.cds--header__menu-item:hover,
14012
- .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
14013
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
14014
- color: var(--cds-text-primary, #161616);
14015
- }
14016
-
14017
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
14018
- .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
14019
- color: var(--cds-text-primary, #161616);
14020
- }
14021
-
14022
- .cds--side-nav__item--large {
14023
- block-size: auto;
14024
- }
14025
-
14026
- .cds--side-nav__divider {
14027
- margin: 0.5rem 1rem;
14028
- background-color: var(--cds-border-subtle);
14029
- block-size: 1px;
14030
- list-style-type: none;
14031
- }
14032
-
14033
- .cds--side-nav__divider hr {
14034
- border: none;
14035
- }
14036
-
14037
- .cds--side-nav__submenu {
14038
- box-sizing: border-box;
14039
- padding: 0;
14040
- border: 0;
14041
- margin: 0;
14042
- font-family: inherit;
14043
- font-size: 100%;
14044
- vertical-align: baseline;
14045
- display: inline-block;
14046
- padding: 0;
14047
- border: 0;
14048
- appearance: none;
14049
- background: none;
14050
- cursor: pointer;
14051
- text-align: start;
14052
- inline-size: 100%;
14053
- font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
14054
- font-weight: var(--cds-heading-compact-01-font-weight, 600);
14055
- line-height: var(--cds-heading-compact-01-line-height, 1.28572);
14056
- letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
14057
- outline: 2px solid transparent;
14058
- outline-offset: -2px;
14059
- display: flex;
14060
- align-items: center;
14061
- padding: 0 1rem;
14062
- block-size: 2rem;
14063
- color: var(--cds-text-secondary, #525252);
14064
- transition: color 110ms, background-color 110ms, outline 110ms;
14065
- user-select: none;
14066
- }
14067
-
14068
- .cds--side-nav__submenu *,
14069
- .cds--side-nav__submenu *::before,
14070
- .cds--side-nav__submenu *::after {
14071
- box-sizing: inherit;
14072
- }
14073
-
14074
- .cds--side-nav__submenu::-moz-focus-inner {
14075
- border: 0;
14076
- }
14077
-
14078
- .cds--side-nav__submenu:hover {
14079
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
14080
- color: var(--cds-text-primary, #161616);
14081
- }
14082
-
14083
- .cds--side-nav__submenu:focus {
14084
- outline: 2px solid var(--cds-focus, #0f62fe);
14085
- outline-offset: -2px;
14086
- }
14087
-
14088
- @media screen and (prefers-contrast) {
14089
- .cds--side-nav__submenu:focus {
14090
- outline-style: dotted;
14091
- }
14092
- }
14093
- .cds--side-nav__submenu-title {
14094
- overflow: hidden;
14095
- text-overflow: ellipsis;
14096
- white-space: nowrap;
14097
- text-align: start;
14098
- }
14099
-
14100
- .cds--side-nav__icon.cds--side-nav__submenu-chevron {
14101
- display: flex;
14102
- flex: 1;
14103
- justify-content: flex-end;
14104
- }
14105
-
14106
- .cds--side-nav__submenu-chevron > svg {
14107
- block-size: 1rem;
14108
- inline-size: 1rem;
14109
- transition: transform 110ms;
14110
- }
14111
-
14112
- .cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron > svg {
14113
- transform: rotate(180deg);
14114
- }
14115
-
14116
- .cds--side-nav__item--large .cds--side-nav__submenu {
14117
- block-size: 3rem;
14118
- }
14119
-
14120
- .cds--side-nav__item--active .cds--side-nav__submenu:hover {
14121
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
14122
- color: var(--cds-text-primary, #161616);
14123
- }
14124
-
14125
- .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
14126
- position: relative;
14127
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
14128
- color: var(--cds-text-primary, #161616);
14129
- }
14130
-
14131
- .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before {
14132
- position: absolute;
14133
- background-color: var(--cds-border-interactive, #0f62fe);
14134
- content: "";
14135
- inline-size: 3px;
14136
- inset-block: 0 0;
14137
- inset-inline-start: 0;
14138
- }
14139
-
14140
- .cds--side-nav__item--active .cds--side-nav__submenu-title {
14141
- color: var(--cds-text-primary, #161616);
14142
- font-weight: 600;
14143
- }
14144
-
14145
- .cds--side-nav__item--active .cds--side-nav__icon > svg {
14146
- fill: var(--cds-icon-primary, #161616);
14147
- }
14148
-
14149
- .cds--side-nav__menu {
14150
- box-sizing: border-box;
14151
- padding: 0;
14152
- border: 0;
14153
- margin: 0;
14154
- font-family: inherit;
14155
- font-size: 100%;
14156
- vertical-align: baseline;
14157
- display: block;
14158
- max-block-size: 0;
14159
- visibility: hidden;
14160
- }
14161
-
14162
- .cds--side-nav__menu *,
14163
- .cds--side-nav__menu *::before,
14164
- .cds--side-nav__menu *::after {
14165
- box-sizing: inherit;
14166
- }
14167
-
14168
- .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
14169
- max-block-size: 93.75rem;
14170
- visibility: inherit;
14171
- }
14172
-
14173
- .cds--side-nav__menu a.cds--side-nav__link {
14174
- block-size: 2rem;
14175
- font-weight: 400;
14176
- min-block-size: 2rem;
14177
- padding-inline-start: 2rem;
14178
- }
14179
-
14180
- .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link {
14181
- padding-inline-start: 4.5rem;
14182
- }
14183
-
14184
- .cds--side-nav__menu a.cds--side-nav__link--current,
14185
- .cds--side-nav__menu a.cds--side-nav__link[aria-current=page],
14186
- a.cds--side-nav__link--current {
14187
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
14188
- }
14189
-
14190
- .cds--side-nav__menu a.cds--side-nav__link--current > span,
14191
- .cds--side-nav__menu a.cds--side-nav__link[aria-current=page] > span,
14192
- a.cds--side-nav__link--current > span {
14193
- color: var(--cds-text-primary, #161616);
14194
- font-weight: 600;
14195
- }
14196
-
14197
- a.cds--side-nav__link,
14198
- .cds--side-nav a.cds--header__menu-item,
14199
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
14200
- outline: 2px solid transparent;
14201
- outline-offset: -2px;
14202
- font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
14203
- font-weight: var(--cds-heading-compact-01-font-weight, 600);
14204
- line-height: var(--cds-heading-compact-01-line-height, 1.28572);
14205
- letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
14206
- position: relative;
14207
- display: flex;
14208
- align-items: center;
14209
- padding: 0 1rem;
14210
- min-block-size: 2rem;
14211
- text-decoration: none;
14212
- transition: color 110ms, background-color 110ms, outline 110ms;
14213
- }
14214
-
14215
- .cds--side-nav__item--large a.cds--side-nav__link {
14216
- block-size: 3rem;
14217
- }
14218
-
14219
- a.cds--side-nav__link > .cds--side-nav__link-text,
14220
- .cds--side-nav a.cds--header__menu-item .cds--text-truncate-end {
14221
- overflow: hidden;
14222
- text-overflow: ellipsis;
14223
- white-space: nowrap;
14224
- color: var(--cds-text-secondary, #525252);
14225
- font-size: 0.875rem;
14226
- letter-spacing: 0.1px;
14227
- line-height: 1.25rem;
14228
- user-select: none;
14229
- }
14230
-
14231
- a.cds--side-nav__link:focus,
14232
- .cds--side-nav a.cds--header__menu-item:focus {
14233
- outline: 2px solid var(--cds-focus, #0f62fe);
14234
- outline-offset: -2px;
14235
- }
14236
-
14237
- @media screen and (prefers-contrast) {
14238
- a.cds--side-nav__link:focus,
14239
- .cds--side-nav a.cds--header__menu-item:focus {
14240
- outline-style: dotted;
14241
- }
14242
- }
14243
- a.cds--side-nav__link[aria-current=page],
14244
- a.cds--side-nav__link--current {
14245
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
14246
- font-weight: 600;
14247
- }
14248
-
14249
- a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text,
14250
- a.cds--side-nav__link--current .cds--side-nav__link-text {
14251
- color: var(--cds-text-primary, #161616);
14252
- }
14253
-
14254
- a.cds--side-nav__link[aria-current=page]::before,
14255
- a.cds--side-nav__link--current::before {
14256
- position: absolute;
14257
- background-color: var(--cds-border-interactive, #0f62fe);
14258
- content: "";
14259
- inline-size: 3px;
14260
- inset-block: 0 0;
14261
- inset-inline-start: 0;
14262
- }
14263
-
14264
- .cds--side-nav__icon {
14265
- display: flex;
14266
- flex: 0 0 1rem;
14267
- align-items: center;
14268
- justify-content: center;
14269
- }
14270
-
14271
- .cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) {
14272
- margin-inline-end: 1.5rem;
14273
- }
14274
-
14275
- .cds--side-nav__icon > svg {
14276
- block-size: 1rem;
14277
- fill: var(--cds-icon-secondary, #525252);
14278
- inline-size: 1rem;
14279
- }
14280
-
14281
- .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
14282
- display: none;
14283
- }
14284
-
14285
- .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-expand-icon {
14286
- display: none;
14287
- }
14288
-
14289
- .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
14290
- display: block;
14291
- }
14292
-
14293
- .cds--side-nav--fixed a.cds--side-nav__link,
14294
- .cds--side-nav--fixed .cds--side-nav__submenu {
14295
- padding-inline-start: 1rem;
14296
- }
14297
-
14298
- .cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link {
14299
- padding-inline-start: 2rem;
14300
- }
14301
-
14302
- @media (max-width: 65.98rem) {
14303
- .cds--side-nav .cds--header__nav {
14304
- display: block;
14305
- }
14306
- }
14307
- .cds--side-nav__header-navigation {
14308
- box-sizing: border-box;
14309
- padding: 0;
14310
- border: 0;
14311
- margin: 0;
14312
- font-family: inherit;
14313
- font-size: 100%;
14314
- vertical-align: baseline;
14315
- display: none;
14316
- }
14317
-
14318
- .cds--side-nav__header-navigation *,
14319
- .cds--side-nav__header-navigation *::before,
14320
- .cds--side-nav__header-navigation *::after {
14321
- box-sizing: inherit;
14322
- }
14323
-
14324
- @media (max-width: 65.98rem) {
14325
- .cds--side-nav__header-navigation {
14326
- position: relative;
14327
- display: block;
14328
- margin-block-end: 2rem;
14329
- }
14330
- }
14331
- .cds--side-nav__header-divider::after {
14332
- position: absolute;
14333
- background: var(--cds-border-subtle);
14334
- block-size: 0.0625rem;
14335
- content: "";
14336
- inline-size: calc(100% - 32px);
14337
- inset-block-end: -1rem;
14338
- inset-inline-start: 1rem;
14339
- }
14340
-
14341
- .cds--side-nav a.cds--header__menu-item {
14342
- justify-content: space-between;
14343
- color: var(--cds-text-secondary, #525252);
14344
- white-space: nowrap;
14345
- }
14346
-
14347
- .cds--side-nav a.cds--header__menu-item[aria-expanded=true] {
14348
- background-color: transparent;
14349
- }
14350
-
14351
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
14352
- padding: 0;
14353
- background-color: transparent;
14354
- box-shadow: none;
14355
- inline-size: 100%;
14356
- inset-block-end: inherit;
14357
- transform: none;
14358
- }
14359
-
14360
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li {
14361
- inline-size: 100%;
14362
- }
14363
-
14364
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item {
14365
- font-weight: 400;
14366
- padding-inline-start: 4.25rem;
14367
- }
14368
-
14369
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
14370
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
14371
- color: var(--cds-text-primary, #161616);
14372
- }
14373
-
14374
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
14375
- background-color: var(--cds-layer-selected-hover);
14376
- }
14377
-
14378
- .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
14379
- .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
14380
- block-size: calc(100% + 4px);
14381
- inline-size: 3px;
14382
- }
14383
-
14384
- .cds--side-nav .cds--header__menu a.cds--header__menu-item {
14385
- block-size: inherit;
14386
- }
14387
-
14388
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
14389
- .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
14390
- .cds--side-nav .cds--header__menu-arrow {
14391
- fill: var(--cds-icon-secondary, #525252);
14392
- }
14393
-
14394
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14395
- .cds--side-nav__icon > svg,
14396
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
14397
- .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
14398
- .cds--side-nav .cds--header__menu-arrow {
14399
- fill: ButtonText;
14400
- }
14401
- }
14402
- .cds--layout--size-xs {
14403
- --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
14404
- --cds-layout-size-height: var(--cds-layout-size-height-context);
14405
- }
14406
-
14407
- .cds--layout-constraint--size__default-xs {
14408
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
14409
- }
14410
-
14411
- .cds--layout-constraint--size__min-xs {
14412
- --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
14413
- }
14414
-
14415
- .cds--layout-constraint--size__max-xs {
14416
- --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
14417
- }
14418
-
14419
- .cds--layout--size-sm {
14420
- --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
14421
- --cds-layout-size-height: var(--cds-layout-size-height-context);
14422
- }
14423
-
14424
- .cds--layout-constraint--size__default-sm {
14425
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
14426
- }
14427
-
14428
- .cds--layout-constraint--size__min-sm {
14429
- --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
14430
- }
14431
-
14432
- .cds--layout-constraint--size__max-sm {
14433
- --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
14434
- }
14435
-
14436
- .cds--layout--size-md {
14437
- --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
14438
- --cds-layout-size-height: var(--cds-layout-size-height-context);
14439
- }
14440
-
14441
- .cds--layout-constraint--size__default-md {
14442
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
14443
- }
14444
-
14445
- .cds--layout-constraint--size__min-md {
14446
- --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
14447
- }
14448
-
14449
- .cds--layout-constraint--size__max-md {
14450
- --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
14451
- }
14452
-
14453
- .cds--layout--size-lg {
14454
- --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
14455
- --cds-layout-size-height: var(--cds-layout-size-height-context);
14456
- }
14457
-
14458
- .cds--layout-constraint--size__default-lg {
14459
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
14460
- }
14461
-
14462
- .cds--layout-constraint--size__min-lg {
14463
- --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
14464
- }
14465
-
14466
- .cds--layout-constraint--size__max-lg {
14467
- --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
14468
- }
14469
-
14470
- .cds--layout--size-xl {
14471
- --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
14472
- --cds-layout-size-height: var(--cds-layout-size-height-context);
14473
- }
14474
-
14475
- .cds--layout-constraint--size__default-xl {
14476
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
14477
- }
14478
-
14479
- .cds--layout-constraint--size__min-xl {
14480
- --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
14481
- }
14482
-
14483
- .cds--layout-constraint--size__max-xl {
14484
- --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
14485
- }
14486
-
14487
- .cds--layout--size-2xl {
14488
- --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
14489
- --cds-layout-size-height: var(--cds-layout-size-height-context);
14490
- }
14491
-
14492
- .cds--layout-constraint--size__default-2xl {
14493
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
14494
- }
14495
-
14496
- .cds--layout-constraint--size__min-2xl {
14497
- --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
14498
- }
14499
-
14500
- .cds--layout-constraint--size__max-2xl {
14501
- --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
14502
- }
14503
-
14504
- .cds--layout--density-condensed {
14505
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14506
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
14507
- }
14508
-
14509
- .cds--layout-constraint--density__default-condensed {
14510
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
14511
- }
14512
-
14513
- .cds--layout-constraint--density__min-condensed {
14514
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14515
- }
14516
-
14517
- .cds--layout-constraint--density__max-condensed {
14518
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14519
- }
14520
-
14521
- .cds--layout--density-normal {
14522
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
14523
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
14524
- }
14525
-
14526
- .cds--layout-constraint--density__default-normal {
14527
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
14528
- }
14529
-
14530
- .cds--layout-constraint--density__min-normal {
14531
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
14532
- }
14533
-
14534
- .cds--layout-constraint--density__max-normal {
14535
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
14536
- }
14537
-
14538
- :root {
14539
- --cds-layout-size-height-xs: 1.5rem;
14540
- --cds-layout-size-height-sm: 2rem;
14541
- --cds-layout-size-height-md: 2.5rem;
14542
- --cds-layout-size-height-lg: 3rem;
14543
- --cds-layout-size-height-xl: 4rem;
14544
- --cds-layout-size-height-2xl: 5rem;
14545
- --cds-layout-size-height-min: 0px;
14546
- --cds-layout-size-height-max: 999999999px;
14547
- --cds-layout-density-padding-inline-condensed: 0.5rem;
14548
- --cds-layout-density-padding-inline-normal: 1rem;
14549
- --cds-layout-density-padding-inline-min: 0px;
14550
- --cds-layout-density-padding-inline-max: 999999999px;
14551
- }
14552
-
14553
- .c4p--action-set {
14554
- align-items: stretch;
14555
- justify-content: flex-end;
14556
- background-color: var(--cds-layer-01, #f4f4f4);
14557
- }
14558
-
14559
- .c4p--action-set .c4p--action-set__action-button {
14560
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
14561
- font-weight: var(--cds-body-short-01-font-weight, 400);
14562
- line-height: var(--cds-body-short-01-line-height, 1.28572);
14563
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14564
- align-items: center;
14565
- margin: 0;
14566
- }
14567
-
14568
- .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
14569
- height: 4rem;
14570
- padding-top: 1rem;
14571
- padding-bottom: 2rem;
14572
- }
14573
-
14574
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
14575
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
14576
- max-width: none;
14577
- }
14578
-
14579
- .c4p--action-set:not(.c4p--action-set--stacking) .c4p--action-set__action-button--ghost {
14580
- padding-left: 2rem;
14581
- }
14582
-
14583
- .c4p--action-set.c4p--action-set--row-single.c4p--action-set--md .c4p--action-set__action-button,
14584
- .c4p--action-set.c4p--action-set--row-single .c4p--action-set__action-button--ghost {
14585
- flex: 0 0 100%;
14586
- }
14587
-
14588
- .c4p--action-set.c4p--action-set--row-double .c4p--action-set__action-button--ghost {
14589
- flex: 1 1 75%;
14590
- }
14591
-
14592
- .c4p--action-set.c4p--action-set--row-single.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
14593
- .c4p--action-set.c4p--action-set--row-double.c4p--action-set--md .c4p--action-set__action-button,
14594
- .c4p--action-set.c4p--action-set--row-double.c4p--action-set--lg .c4p--action-set__action-button,
14595
- .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
14596
- flex: 0 1 50%;
14597
- }
14598
-
14599
- .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
14600
- flex: 1 1 50%;
14601
- }
14602
-
14603
- .c4p--action-set.cds--btn-set.c4p--action-set--row-triple.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
14604
- .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
14605
- .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
14606
- .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
14607
- /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
14608
- max-width: 14.5rem;
14609
- flex: 0 1 25%;
14610
- }
14611
-
14612
- .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button--ghost {
14613
- flex: 1 1 25%;
14614
- }
14615
-
14616
- .c4p--action-set .c4p--action-set__action-button .cds--inline-loading {
14617
- position: absolute;
14618
- top: 0;
14619
- right: 0;
14620
- width: 2rem;
14621
- }
14622
-
14623
- .c4p--tearsheet.c4p--tearsheet {
14624
- --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
14625
- --overlay-opacity: 1;
14626
- z-index: 9001;
14627
- align-items: flex-end;
14628
- color: var(--cds-text-primary, #161616);
14629
- transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
14630
- --c4p--tearsheet--stacking-scale-factor-single: 0.95;
14631
- --c4p--tearsheet--stacking-scale-factor-double: 0.9;
14632
- }
14633
-
14634
- .c4p--tearsheet.c4p--tearsheet::before {
14635
- position: absolute;
14636
- display: block;
14637
- background: var(--overlay-color);
14638
- content: "";
14639
- inset: 0;
14640
- opacity: var(--overlay-opacity);
14641
- transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
14642
- }
14643
-
14644
- @media (prefers-reduced-motion: reduce) {
14645
- .c4p--tearsheet.c4p--tearsheet::before {
14646
- transition: none;
14647
- }
14648
- }
14649
- .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
14650
- /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
14651
- background: initial;
14652
- }
14653
-
14654
- .c4p--tearsheet.is-visible {
14655
- z-index: 9000;
14656
- align-items: flex-end;
14657
- transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
14658
- }
14659
-
14660
- @media (prefers-reduced-motion: reduce) {
14661
- .c4p--tearsheet.is-visible {
14662
- transition: none;
14663
- }
14664
- }
14665
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
14666
- --overlay-opacity: 0.67;
14667
- z-index: 8999;
14668
- }
14669
-
14670
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
14671
- --overlay-opacity: 0.22;
14672
- z-index: 8998;
14673
- }
14674
-
14675
- .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
14676
- --overlay-opacity: 0.5;
14677
- z-index: 8999;
14678
- }
14679
-
14680
- .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
14681
- --overlay-opacity: 0.5;
14682
- }
14683
-
14684
- .c4p--tearsheet .c4p--tearsheet__container {
14685
- top: auto;
14686
- height: 100%;
14687
- max-height: calc(100% - 3rem);
14688
- transform: translate3d(0, min(95vh, 500px), 0);
14689
- }
14690
-
14691
- .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-ai-label .c4p--tearsheet__container {
14692
- border: 1px solid transparent;
14693
- border-bottom: 0;
14694
- /* override carbon ai removing background gradient */
14695
- background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
14696
- box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
14697
- }
14698
-
14699
- .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
14700
- transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
14701
- }
14702
-
14703
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking), .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
14704
- max-height: calc(100% - 3rem + 1rem);
14705
- }
14706
-
14707
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
14708
- max-height: calc(100% - 3rem + 2 * 1rem);
14709
- }
14710
-
14711
- .c4p--tearsheet .c4p--tearsheet__container--lower {
14712
- max-height: calc(100% - (3rem + 2.5rem));
12486
+ .cds--side-nav__submenu {
12487
+ box-sizing: border-box;
12488
+ padding: 0;
12489
+ border: 0;
12490
+ margin: 0;
12491
+ font-family: inherit;
12492
+ font-size: 100%;
12493
+ vertical-align: baseline;
12494
+ display: inline-block;
12495
+ padding: 0;
12496
+ border: 0;
12497
+ appearance: none;
12498
+ background: none;
12499
+ cursor: pointer;
12500
+ text-align: start;
12501
+ inline-size: 100%;
12502
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12503
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
12504
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
12505
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
12506
+ outline: 2px solid transparent;
12507
+ outline-offset: -2px;
12508
+ display: flex;
12509
+ align-items: center;
12510
+ padding: 0 1rem;
12511
+ block-size: 2rem;
12512
+ color: var(--cds-text-secondary, #525252);
12513
+ transition: color 110ms, background-color 110ms, outline 110ms;
12514
+ user-select: none;
14713
12515
  }
14714
-
14715
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking), .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
14716
- max-height: calc(100% - (3rem + 2.5rem) + 1rem);
12516
+ .cds--side-nav__submenu *,
12517
+ .cds--side-nav__submenu *::before,
12518
+ .cds--side-nav__submenu *::after {
12519
+ box-sizing: inherit;
14717
12520
  }
14718
-
14719
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
14720
- max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
12521
+ .cds--side-nav__submenu::-moz-focus-inner {
12522
+ border: 0;
14721
12523
  }
14722
12524
 
14723
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
14724
- width: 100%;
12525
+ .cds--side-nav__submenu:hover {
12526
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
12527
+ color: var(--cds-text-primary, #161616);
14725
12528
  }
14726
12529
 
14727
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
14728
- height: 5rem;
12530
+ .cds--side-nav__submenu:focus {
12531
+ outline: 2px solid var(--cds-focus, #0f62fe);
12532
+ outline-offset: -2px;
14729
12533
  }
14730
-
14731
- @media (min-width: 42rem) {
14732
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
14733
- width: calc(100% - 2 * 4rem);
12534
+ @media screen and (prefers-contrast) {
12535
+ .cds--side-nav__submenu:focus {
12536
+ outline-style: dotted;
14734
12537
  }
14735
12538
  }
14736
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
14737
- transform: scale(var(--c4p--tearsheet--stacking-scale-factor-single));
14738
- }
14739
12539
 
14740
- .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3.is-visible .c4p--tearsheet__container {
14741
- transform: scale(var(--c4p--tearsheet--stacking-scale-factor-double));
12540
+ .cds--side-nav__submenu-title {
12541
+ overflow: hidden;
12542
+ text-overflow: ellipsis;
12543
+ white-space: nowrap;
12544
+ text-align: start;
14742
12545
  }
14743
12546
 
14744
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
14745
- padding: 1.5rem 2rem;
14746
- border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14747
- margin: 0;
14748
- background-color: var(--cds-layer);
12547
+ .cds--side-nav__icon.cds--side-nav__submenu-chevron {
12548
+ display: flex;
12549
+ flex: 1;
12550
+ justify-content: flex-end;
14749
12551
  }
14750
12552
 
14751
- .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
14752
- padding: 1rem;
14753
- border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14754
- margin: 0;
14755
- background-color: var(--cds-layer);
12553
+ .cds--side-nav__submenu-chevron > svg {
12554
+ block-size: 1rem;
12555
+ inline-size: 1rem;
12556
+ transition: transform 110ms;
14756
12557
  }
14757
12558
 
14758
- .c4p--tearsheet .c4p--tearsheet__header-content {
14759
- display: flex;
14760
- justify-content: space-between;
12559
+ .cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron > svg {
12560
+ transform: rotate(180deg);
14761
12561
  }
14762
12562
 
14763
- .c4p--tearsheet .c4p--tearsheet__header-fields {
14764
- flex: 1 1 100%;
12563
+ .cds--side-nav__item--large .cds--side-nav__submenu {
12564
+ block-size: 3rem;
14765
12565
  }
14766
12566
 
14767
- .c4p--tearsheet .c4p--tearsheet__header-actions {
14768
- flex: 0 0 auto;
14769
- padding-left: 1.5rem;
12567
+ .cds--side-nav__item--active .cds--side-nav__submenu:hover {
12568
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
12569
+ color: var(--cds-text-primary, #161616);
14770
12570
  }
14771
12571
 
14772
- .c4p--tearsheet .c4p--tearsheet__header-actions .cds--btn-set .cds--btn:not(:first-of-type) {
14773
- margin-left: 0.5rem;
12572
+ .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
12573
+ position: relative;
12574
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
12575
+ color: var(--cds-text-primary, #161616);
14774
12576
  }
14775
-
14776
- .c4p--tearsheet .c4p--tearsheet__header--no-close-icon {
14777
- display: none;
12577
+ .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before {
12578
+ position: absolute;
12579
+ background-color: var(--cds-border-interactive, #0f62fe);
12580
+ content: "";
12581
+ inline-size: 3px;
12582
+ inset-block: 0;
12583
+ inset-inline-start: 0;
14778
12584
  }
14779
12585
 
14780
- .c4p--tearsheet.c4p--tearsheet--wide .cds--modal-header__heading.c4p--tearsheet__heading {
14781
- font-size: var(--cds-heading-04-font-size, 1.75rem);
14782
- font-weight: var(--cds-heading-04-font-weight, 400);
14783
- line-height: var(--cds-heading-04-line-height, 1.28572);
14784
- letter-spacing: var(--cds-heading-04-letter-spacing, 0);
12586
+ .cds--side-nav__item--active .cds--side-nav__submenu-title {
12587
+ color: var(--cds-text-primary, #161616);
12588
+ font-weight: 600;
14785
12589
  }
14786
12590
 
14787
- .c4p--tearsheet .c4p--tearsheet__header-description {
14788
- display: -webkit-box;
14789
- overflow: hidden;
14790
- max-width: 100%;
14791
- margin-top: 1rem;
14792
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
14793
- font-weight: var(--cds-body-compact-01-font-weight, 400);
14794
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
14795
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
14796
- -webkit-box-orient: vertical;
14797
- -webkit-line-clamp: 2;
14798
- word-break: break-word;
12591
+ .cds--side-nav__item--active .cds--side-nav__icon > svg {
12592
+ fill: var(--cds-icon-primary, #161616);
14799
12593
  }
14800
12594
 
14801
- @media (min-width: 42rem) {
14802
- .c4p--tearsheet .c4p--tearsheet__header-description {
14803
- max-width: 60%;
14804
- }
12595
+ .cds--side-nav__menu {
12596
+ box-sizing: border-box;
12597
+ padding: 0;
12598
+ border: 0;
12599
+ margin: 0;
12600
+ font-family: inherit;
12601
+ font-size: 100%;
12602
+ vertical-align: baseline;
12603
+ display: block;
12604
+ max-block-size: 0;
12605
+ visibility: hidden;
14805
12606
  }
14806
- .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
14807
- margin-top: 0.5rem;
12607
+ .cds--side-nav__menu *,
12608
+ .cds--side-nav__menu *::before,
12609
+ .cds--side-nav__menu *::after {
12610
+ box-sizing: inherit;
14808
12611
  }
14809
12612
 
14810
- .c4p--tearsheet .c4p--tearsheet__header-navigation {
14811
- margin: 0.75rem 0 0;
12613
+ .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
12614
+ max-block-size: 93.75rem;
12615
+ visibility: inherit;
14812
12616
  }
14813
12617
 
14814
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
14815
- padding: 1.5rem 2rem 0;
12618
+ .cds--side-nav__menu a.cds--side-nav__link {
12619
+ block-size: 2rem;
12620
+ font-weight: 400;
12621
+ min-block-size: 2rem;
12622
+ padding-inline-start: 2rem;
14816
12623
  }
14817
12624
 
14818
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header, .c4p--tearsheet.c4p--tearsheet--has-ai-label .c4p--tearsheet__header.c4p--tearsheet__header {
14819
- padding-inline-end: 5rem;
12625
+ .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link {
12626
+ padding-inline-start: 4.5rem;
14820
12627
  }
14821
12628
 
14822
- .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-ai-label .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
14823
- /* spacing 11 plus additional space for slug/close */
14824
- /* stylelint-disable-next-line carbon/layout-token-use */
14825
- padding-inline-end: calc(8rem);
12629
+ .cds--side-nav__menu a.cds--side-nav__link--current,
12630
+ .cds--side-nav__menu a.cds--side-nav__link[aria-current=page],
12631
+ a.cds--side-nav__link--current {
12632
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
14826
12633
  }
14827
-
14828
- .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
14829
- max-width: 80%;
12634
+ .cds--side-nav__menu a.cds--side-nav__link--current > span,
12635
+ .cds--side-nav__menu a.cds--side-nav__link[aria-current=page] > span,
12636
+ a.cds--side-nav__link--current > span {
12637
+ color: var(--cds-text-primary, #161616);
12638
+ font-weight: 600;
14830
12639
  }
14831
12640
 
14832
- .c4p--tearsheet .c4p--tearsheet__header-navigation {
14833
- margin: 0.75rem 0 0;
12641
+ a.cds--side-nav__link,
12642
+ .cds--side-nav a.cds--header__menu-item,
12643
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
12644
+ outline: 2px solid transparent;
12645
+ outline-offset: -2px;
12646
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12647
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
12648
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
12649
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
12650
+ position: relative;
12651
+ display: flex;
12652
+ align-items: center;
12653
+ padding: 0 1rem;
12654
+ min-block-size: 2rem;
12655
+ text-decoration: none;
12656
+ transition: color 110ms, background-color 110ms, outline 110ms;
14834
12657
  }
14835
12658
 
14836
- .c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__body {
14837
- display: flex;
14838
- flex-direction: row;
14839
- padding: 0;
14840
- margin: 0;
12659
+ .cds--side-nav__item--large a.cds--side-nav__link {
12660
+ block-size: 3rem;
14841
12661
  }
14842
12662
 
14843
- .c4p--tearsheet .c4p--tearsheet__resize-detector {
14844
- width: 100%;
14845
- height: 0;
12663
+ a.cds--side-nav__link > .cds--side-nav__link-text,
12664
+ .cds--side-nav a.cds--header__menu-item .cds--text-truncate-end {
12665
+ overflow: hidden;
12666
+ text-overflow: ellipsis;
12667
+ white-space: nowrap;
12668
+ color: var(--cds-text-secondary, #525252);
12669
+ font-size: 0.875rem;
12670
+ letter-spacing: 0.1px;
12671
+ line-height: 1.25rem;
12672
+ user-select: none;
14846
12673
  }
14847
12674
 
14848
- .c4p--tearsheet .c4p--tearsheet__influencer {
14849
- flex: 0 0 257px;
14850
- border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14851
- overflow-y: auto;
12675
+ a.cds--side-nav__link:focus,
12676
+ .cds--side-nav a.cds--header__menu-item:focus {
12677
+ outline: 2px solid var(--cds-focus, #0f62fe);
12678
+ outline-offset: -2px;
14852
12679
  }
14853
-
14854
- .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
14855
- padding-right: 0;
12680
+ @media screen and (prefers-contrast) {
12681
+ a.cds--side-nav__link:focus,
12682
+ .cds--side-nav a.cds--header__menu-item:focus {
12683
+ outline-style: dotted;
12684
+ }
14856
12685
  }
14857
12686
 
14858
- @media (max-width: 41.98rem) {
14859
- .c4p--tearsheet .c4p--tearsheet__container {
14860
- max-height: 100%;
14861
- }
14862
- .c4p--tearsheet .c4p--tearsheet__influencer {
14863
- flex-basis: auto;
14864
- }
12687
+ a.cds--side-nav__link[aria-current=page],
12688
+ a.cds--side-nav__link--current {
12689
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
12690
+ font-weight: 600;
14865
12691
  }
14866
- .c4p--tearsheet .c4p--tearsheet__influencer--wide {
14867
- flex-basis: 321px;
12692
+
12693
+ a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text,
12694
+ a.cds--side-nav__link--current .cds--side-nav__link-text {
12695
+ color: var(--cds-text-primary, #161616);
14868
12696
  }
14869
12697
 
14870
- .c4p--tearsheet .c4p--tearsheet__right {
14871
- display: grid;
14872
- flex-grow: 1;
14873
- grid-template-columns: 100%;
14874
- grid-template-rows: 1fr auto;
12698
+ a.cds--side-nav__link[aria-current=page]::before,
12699
+ a.cds--side-nav__link--current::before {
12700
+ position: absolute;
12701
+ background-color: var(--cds-border-interactive, #0f62fe);
12702
+ content: "";
12703
+ inline-size: 3px;
12704
+ inset-block: 0;
12705
+ inset-inline-start: 0;
14875
12706
  }
14876
12707
 
14877
- .c4p--tearsheet .c4p--tearsheet__main {
12708
+ .cds--side-nav__icon {
14878
12709
  display: flex;
14879
- flex-direction: row;
14880
- background-color: var(--cds-background, #ffffff);
14881
- grid-column: 1/-1;
14882
- grid-row: 1/-1;
12710
+ flex: 0 0 1rem;
12711
+ align-items: center;
12712
+ justify-content: center;
14883
12713
  }
14884
12714
 
14885
- .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
14886
- background-color: var(--cds-layer);
12715
+ .cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) {
12716
+ margin-inline-end: 1.5rem;
14887
12717
  }
14888
12718
 
14889
- .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14890
- border-right: none;
14891
- border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
12719
+ .cds--side-nav__icon > svg {
12720
+ block-size: 1rem;
12721
+ fill: var(--cds-icon-secondary, #525252);
12722
+ inline-size: 1rem;
14892
12723
  }
14893
12724
 
14894
- .c4p--tearsheet .c4p--tearsheet__content {
14895
- overflow: auto;
14896
- flex-grow: 1;
12725
+ .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
12726
+ display: none;
14897
12727
  }
14898
12728
 
14899
- .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__content, .c4p--tearsheet.c4p--tearsheet--has-ai-label .c4p--tearsheet__content {
14900
- background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
14901
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
12729
+ .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-expand-icon {
12730
+ display: none;
14902
12731
  }
14903
12732
 
14904
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
14905
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
14906
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
14907
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-area,
14908
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--search-input,
14909
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select-input,
14910
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown,
14911
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
14912
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
14913
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
14914
- background-color: var(--cds-field);
12733
+ .cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
12734
+ display: block;
14915
12735
  }
14916
12736
 
14917
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
14918
- background-color: transparent;
12737
+ .cds--side-nav--fixed a.cds--side-nav__link,
12738
+ .cds--side-nav--fixed .cds--side-nav__submenu {
12739
+ padding-inline-start: 1rem;
14919
12740
  }
14920
12741
 
14921
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input--light,
14922
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-area--light,
14923
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--search--light .cds--search-input,
14924
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--light .cds--select-input,
14925
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown--light,
14926
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown--light .cds--dropdown-list,
14927
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number--light input[type=number],
14928
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker--light .cds--date-picker__input {
14929
- background-color: var(--cds-field-02, #ffffff);
12742
+ .cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link {
12743
+ padding-inline-start: 2rem;
14930
12744
  }
14931
12745
 
14932
- .c4p--tearsheet .c4p--tearsheet__button-container {
14933
- grid-column: 1/-1;
14934
- grid-row: -1/-1;
14935
- overflow-x: auto;
12746
+ @media (max-width: 65.98rem) {
12747
+ .cds--side-nav .cds--header__nav {
12748
+ display: block;
12749
+ }
14936
12750
  }
14937
12751
 
14938
- .c4p--tearsheet .c4p--tearsheet__buttons {
14939
- display: inline-flex;
14940
- min-width: 100%;
14941
- border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
12752
+ .cds--side-nav__header-navigation {
12753
+ box-sizing: border-box;
12754
+ padding: 0;
12755
+ border: 0;
12756
+ margin: 0;
12757
+ font-family: inherit;
12758
+ font-size: 100%;
12759
+ vertical-align: baseline;
12760
+ display: none;
14942
12761
  }
14943
-
14944
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
14945
- background: var(--cds-background, #ffffff);
12762
+ .cds--side-nav__header-navigation *,
12763
+ .cds--side-nav__header-navigation *::before,
12764
+ .cds--side-nav__header-navigation *::after {
12765
+ box-sizing: inherit;
12766
+ }
12767
+ @media (max-width: 65.98rem) {
12768
+ .cds--side-nav__header-navigation {
12769
+ position: relative;
12770
+ display: block;
12771
+ margin-block-end: 2rem;
12772
+ }
14946
12773
  }
14947
12774
 
14948
- .c4p--tearsheet.c4p--tearsheet--has-slug, .c4p--tearsheet.c4p--tearsheet--has-ai-label {
14949
- /* stylelint-disable-next-line carbon/theme-token-use */
14950
- --overlay-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
12775
+ .cds--side-nav__header-divider::after {
12776
+ position: absolute;
12777
+ background: var(--cds-border-subtle);
12778
+ block-size: 0.0625rem;
12779
+ content: "";
12780
+ inline-size: calc(100% - 32px);
12781
+ inset-block-end: -1rem;
12782
+ inset-inline-start: 1rem;
14951
12783
  }
14952
12784
 
14953
- .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug, .c4p--tearsheet.c4p--tearsheet--has-ai-label:not(.c4p--tearsheet--has-close) .cds--slug {
14954
- inset-inline-end: 0;
14955
- margin-block: 6px;
14956
- margin-inline-end: 1rem;
12785
+ .cds--side-nav a.cds--header__menu-item {
12786
+ justify-content: space-between;
12787
+ color: var(--cds-text-secondary, #525252);
12788
+ white-space: nowrap;
12789
+ }
12790
+ .cds--side-nav a.cds--header__menu-item[aria-expanded=true] {
12791
+ background-color: transparent;
14957
12792
  }
14958
12793
 
14959
- @keyframes influencer-menu-entrance {
14960
- 0% {
14961
- opacity: 0;
14962
- transform: translateX(calc(-1 * 1rem));
14963
- }
14964
- 100% {
14965
- opacity: 1;
14966
- transform: translateX(0);
14967
- }
12794
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
12795
+ padding: 0;
12796
+ background-color: transparent;
12797
+ box-shadow: none;
12798
+ inline-size: 100%;
12799
+ inset-block-end: inherit;
12800
+ transform: none;
14968
12801
  }
14969
- @keyframes influencer-menu-exit {
14970
- 0% {
14971
- opacity: 1;
14972
- transform: translateX(0);
14973
- }
14974
- 100% {
14975
- opacity: 0;
14976
- transform: translateX(calc(-1 * 1rem));
14977
- }
12802
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li {
12803
+ inline-size: 100%;
14978
12804
  }
14979
- .c4p--create-influencer {
14980
- display: grid;
14981
- height: 100%;
14982
- padding: 1.5rem 2rem;
14983
- grid-template-columns: 100%;
14984
- grid-template-rows: 1fr auto;
12805
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item {
12806
+ font-weight: 400;
12807
+ padding-inline-start: 4.25rem;
14985
12808
  }
14986
-
14987
- .c4p--create-influencer__left-nav {
14988
- grid-column: 1/-1;
14989
- grid-row: 1/-1;
14990
- overflow-y: auto;
12809
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
12810
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
12811
+ color: var(--cds-text-primary, #161616);
14991
12812
  }
14992
-
14993
- .c4p--create-influencer__title {
14994
- font-size: var(--cds-heading-03-font-size, 1.25rem);
14995
- font-weight: var(--cds-heading-03-font-weight, 400);
14996
- line-height: var(--cds-heading-03-line-height, 1.4);
14997
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
14998
- margin-bottom: 1.5rem;
12813
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
12814
+ background-color: var(--cds-layer-selected-hover);
14999
12815
  }
15000
12816
 
15001
- .c4p--create-influencer__view-all-toggle {
15002
- padding: 1.5rem;
15003
- grid-column: 1/-1;
15004
- grid-row: -1/-1;
12817
+ .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
12818
+ .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
12819
+ block-size: calc(100% + 4px);
12820
+ inline-size: 3px;
15005
12821
  }
15006
12822
 
15007
- .c4p--create-influencer__side-nav-opening,
15008
- .c4p--create-influencer__progress-indicator-opening {
15009
- animation: influencer-menu-entrance 240ms 1;
15010
- animation-fill-mode: forwards;
15011
- transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
12823
+ .cds--side-nav .cds--header__menu a.cds--header__menu-item {
12824
+ block-size: inherit;
15012
12825
  }
15013
12826
 
15014
- .c4p--create-influencer__side-nav-closing,
15015
- .c4p--create-influencer__progress-indicator-closing {
15016
- animation: influencer-menu-exit 240ms 1;
15017
- animation-fill-mode: forwards;
15018
- transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
12827
+ .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
12828
+ .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
12829
+ .cds--side-nav .cds--header__menu-arrow {
12830
+ fill: var(--cds-icon-secondary, #525252);
15019
12831
  }
15020
12832
 
15021
- @media (prefers-reduced-motion) {
15022
- .c4p--create-influencer__side-nav-opening,
15023
- .c4p--create-influencer__progress-indicator-opening,
15024
- .c4p--create-influencer__side-nav-closing,
15025
- .c4p--create-influencer__progress-indicator-closing {
15026
- animation: none;
15027
- opacity: 1;
12833
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
12834
+ .cds--side-nav__icon > svg,
12835
+ .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
12836
+ .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
12837
+ .cds--side-nav .cds--header__menu-arrow {
12838
+ fill: ButtonText;
15028
12839
  }
15029
12840
  }
12841
+
15030
12842
  @keyframes form-content-entrance {
15031
12843
  0% {
15032
12844
  opacity: 0;
@@ -18821,6 +16633,555 @@ a.cds--side-nav__link--current::before {
18821
16633
  inset-block-end: -1px !important;
18822
16634
  }
18823
16635
 
16636
+ .cds--popover-container {
16637
+ display: inline-block;
16638
+ }
16639
+
16640
+ .cds--popover-container:not(.cds--popover--auto-align) {
16641
+ position: relative;
16642
+ }
16643
+
16644
+ .cds--popover--high-contrast .cds--popover {
16645
+ --cds-popover-background-color: var(--cds-background-inverse, #393939);
16646
+ --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
16647
+ }
16648
+
16649
+ .cds--popover--drop-shadow .cds--popover > .cds--popover-content {
16650
+ filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
16651
+ }
16652
+
16653
+ .cds--popover--caret {
16654
+ --cds-popover-offset: 0.625rem;
16655
+ }
16656
+
16657
+ .cds--popover {
16658
+ position: absolute;
16659
+ z-index: 6000;
16660
+ filter: var(--cds-popover-drop-shadow, none);
16661
+ inset: 0;
16662
+ pointer-events: none;
16663
+ }
16664
+
16665
+ .cds--popover-content {
16666
+ --cds-layout-size-height-sm: 2rem;
16667
+ --cds-layout-size-height-md: 2.5rem;
16668
+ --cds-layout-size-height-lg: 3rem;
16669
+ box-sizing: border-box;
16670
+ padding: 0;
16671
+ border: 0;
16672
+ margin: 0;
16673
+ font-family: inherit;
16674
+ font-size: 100%;
16675
+ vertical-align: baseline;
16676
+ position: absolute;
16677
+ z-index: 6000;
16678
+ display: none;
16679
+ border-radius: var(--cds-popover-border-radius, 2px);
16680
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
16681
+ color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
16682
+ inline-size: max-content;
16683
+ max-inline-size: 23rem;
16684
+ pointer-events: auto;
16685
+ }
16686
+ .cds--layout--size-sm .cds--popover-content {
16687
+ --cds-layout-size-height: var(--cds-layout-size-height-sm);
16688
+ }
16689
+ .cds--layout--size-md .cds--popover-content {
16690
+ --cds-layout-size-height: var(--cds-layout-size-height-md);
16691
+ }
16692
+ .cds--layout--size-lg .cds--popover-content {
16693
+ --cds-layout-size-height: var(--cds-layout-size-height-lg);
16694
+ }
16695
+ .cds--popover-content *,
16696
+ .cds--popover-content *::before,
16697
+ .cds--popover-content *::after {
16698
+ box-sizing: inherit;
16699
+ }
16700
+
16701
+ .cds--popover--open > .cds--popover > .cds--popover-content {
16702
+ display: block;
16703
+ }
16704
+
16705
+ .cds--popover-content::before {
16706
+ position: absolute;
16707
+ display: none;
16708
+ content: "";
16709
+ }
16710
+
16711
+ .cds--popover--open > .cds--popover > .cds--popover-content::before {
16712
+ display: block;
16713
+ }
16714
+
16715
+ .cds--popover-caret,
16716
+ .cds--popover--auto-align.cds--popover-caret {
16717
+ position: absolute;
16718
+ z-index: 6000;
16719
+ display: none;
16720
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
16721
+ will-change: transform;
16722
+ }
16723
+
16724
+ .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
16725
+ display: block;
16726
+ }
16727
+
16728
+ .cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret {
16729
+ display: block;
16730
+ }
16731
+
16732
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
16733
+ display: none;
16734
+ }
16735
+
16736
+ .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16737
+ inset-block-end: 0;
16738
+ inset-inline-start: 50%;
16739
+ transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
16740
+ }
16741
+
16742
+ [dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16743
+ transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
16744
+ }
16745
+
16746
+ .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16747
+ .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16748
+ inset-block-end: 0;
16749
+ inset-inline-start: 0;
16750
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
16751
+ }
16752
+
16753
+ [dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16754
+ [dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16755
+ inset-inline-end: 0;
16756
+ inset-inline-start: initial;
16757
+ }
16758
+
16759
+ .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16760
+ .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16761
+ inset-block-end: 0;
16762
+ inset-inline-end: 0;
16763
+ transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
16764
+ }
16765
+
16766
+ [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16767
+ [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16768
+ inset-inline-start: 0;
16769
+ }
16770
+
16771
+ .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
16772
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
16773
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-content::before,
16774
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before,
16775
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-content::before {
16776
+ block-size: var(--cds-popover-offset, 0rem);
16777
+ inset-block-start: 0;
16778
+ inset-inline: 0;
16779
+ transform: translateY(-100%);
16780
+ }
16781
+
16782
+ .cds--popover--bottom > .cds--popover > .cds--popover-caret,
16783
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
16784
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
16785
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
16786
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
16787
+ block-size: var(--cds-popover-caret-height, 0.375rem);
16788
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
16789
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
16790
+ inset-block-end: 0;
16791
+ inset-inline-start: 50%;
16792
+ transform: translate(-50%, var(--cds-popover-offset, 0rem));
16793
+ }
16794
+
16795
+ [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
16796
+ [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
16797
+ [dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
16798
+ [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
16799
+ [dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
16800
+ transform: translate(50%, var(--cds-popover-offset, 0rem));
16801
+ }
16802
+
16803
+ .cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16804
+ .cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16805
+ .cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16806
+ .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16807
+ .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
16808
+ block-size: var(--cds-popover-caret-height, 0.375rem);
16809
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
16810
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
16811
+ }
16812
+
16813
+ .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16814
+ inset-block-start: 0;
16815
+ inset-inline-start: 50%;
16816
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
16817
+ }
16818
+
16819
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16820
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
16821
+ }
16822
+
16823
+ .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16824
+ .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16825
+ inset-block-start: 0;
16826
+ inset-inline-start: 0;
16827
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
16828
+ }
16829
+
16830
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16831
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16832
+ inset-inline-end: 0;
16833
+ inset-inline-start: initial;
16834
+ }
16835
+
16836
+ .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16837
+ .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16838
+ inset-block-start: 0;
16839
+ inset-inline-end: 0;
16840
+ transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
16841
+ }
16842
+
16843
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16844
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16845
+ inset-inline-start: 0;
16846
+ }
16847
+
16848
+ .cds--popover--top > .cds--popover > .cds--popover-content::before,
16849
+ .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
16850
+ .cds--popover--top-start > .cds--popover > .cds--popover-content::before,
16851
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before,
16852
+ .cds--popover--top-end > .cds--popover > .cds--popover-content::before {
16853
+ block-size: var(--cds-popover-offset, 0rem);
16854
+ inset-block-end: 0;
16855
+ inset-inline: 0;
16856
+ transform: translateY(100%);
16857
+ }
16858
+
16859
+ .cds--popover--top > .cds--popover > .cds--popover-caret,
16860
+ .cds--popover--top-left > .cds--popover > .cds--popover-caret,
16861
+ .cds--popover--top-start > .cds--popover > .cds--popover-caret,
16862
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret,
16863
+ .cds--popover--top-end > .cds--popover > .cds--popover-caret {
16864
+ block-size: var(--cds-popover-caret-height, 0.375rem);
16865
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
16866
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
16867
+ inset-block-start: 0;
16868
+ inset-inline-start: 50%;
16869
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
16870
+ }
16871
+
16872
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16873
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16874
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16875
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16876
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
16877
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
16878
+ }
16879
+
16880
+ .cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16881
+ .cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16882
+ .cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16883
+ .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16884
+ .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
16885
+ block-size: var(--cds-popover-caret-height, 0.375rem);
16886
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
16887
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
16888
+ }
16889
+
16890
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16891
+ inset-block-start: 50%;
16892
+ inset-inline-start: 100%;
16893
+ transform: translate(var(--cds-popover-offset, 0rem), -50%);
16894
+ }
16895
+
16896
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16897
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16898
+ inset-block-start: 50%;
16899
+ inset-inline-start: 100%;
16900
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
16901
+ }
16902
+
16903
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16904
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16905
+ inset-block-end: 50%;
16906
+ inset-inline-start: 100%;
16907
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
16908
+ }
16909
+
16910
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16911
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16912
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16913
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16914
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16915
+ inset-inline-end: 100%;
16916
+ inset-inline-start: initial;
16917
+ }
16918
+
16919
+ .cds--popover--right > .cds--popover > .cds--popover-content::before,
16920
+ .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
16921
+ .cds--popover--right-start > .cds--popover > .cds--popover-content::before,
16922
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before,
16923
+ .cds--popover--right-end > .cds--popover > .cds--popover-content::before {
16924
+ inline-size: var(--cds-popover-offset, 0rem);
16925
+ inset-block: 0;
16926
+ inset-inline-start: 0;
16927
+ transform: translateX(-100%);
16928
+ }
16929
+
16930
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16931
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16932
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16933
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16934
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
16935
+ block-size: var(--cds-popover-caret-width, 0.75rem);
16936
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
16937
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
16938
+ inset-block-start: 50%;
16939
+ inset-inline-start: 100%;
16940
+ transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
16941
+ }
16942
+
16943
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16944
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16945
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16946
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
16947
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
16948
+ inset-inline-end: 100%;
16949
+ inset-inline-start: initial;
16950
+ }
16951
+
16952
+ .cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16953
+ .cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16954
+ .cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16955
+ .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
16956
+ .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
16957
+ block-size: var(--cds-popover-caret-width, 0.75rem);
16958
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
16959
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
16960
+ }
16961
+
16962
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16963
+ inset-block-start: 50%;
16964
+ inset-inline-end: 100%;
16965
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
16966
+ }
16967
+
16968
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16969
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16970
+ inset-block-start: 50%;
16971
+ inset-inline-end: 100%;
16972
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
16973
+ }
16974
+
16975
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16976
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16977
+ inset-block-end: 50%;
16978
+ inset-inline-end: 100%;
16979
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
16980
+ }
16981
+
16982
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16983
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16984
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16985
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
16986
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
16987
+ inset-inline-end: initial;
16988
+ inset-inline-start: 100%;
16989
+ }
16990
+
16991
+ .cds--popover--left > .cds--popover > .cds--popover-content::before,
16992
+ .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
16993
+ .cds--popover--left-start > .cds--popover > .cds--popover-content::before,
16994
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before,
16995
+ .cds--popover--left-end > .cds--popover > .cds--popover-content::before {
16996
+ inline-size: var(--cds-popover-offset, 0rem);
16997
+ inset-block: 0;
16998
+ inset-inline-end: 0;
16999
+ transform: translateX(100%);
17000
+ }
17001
+
17002
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17003
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17004
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17005
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17006
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
17007
+ block-size: var(--cds-popover-caret-width, 0.75rem);
17008
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
17009
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
17010
+ inset-block-start: 50%;
17011
+ inset-inline-end: 100%;
17012
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
17013
+ }
17014
+
17015
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17016
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17017
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17018
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
17019
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
17020
+ inset-inline-end: initial;
17021
+ inset-inline-start: 100%;
17022
+ }
17023
+
17024
+ .cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
17025
+ .cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
17026
+ .cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
17027
+ .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
17028
+ .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
17029
+ block-size: var(--cds-popover-caret-width, 0.75rem);
17030
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
17031
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
17032
+ }
17033
+
17034
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
17035
+ border-radius: 0;
17036
+ }
17037
+
17038
+ .cds--popover--tab-tip .cds--popover {
17039
+ will-change: filter;
17040
+ }
17041
+
17042
+ .cds--popover--tab-tip__button {
17043
+ box-sizing: border-box;
17044
+ padding: 0;
17045
+ border: 0;
17046
+ margin: 0;
17047
+ font-family: inherit;
17048
+ font-size: 100%;
17049
+ vertical-align: baseline;
17050
+ display: inline-block;
17051
+ padding: 0;
17052
+ border: 0;
17053
+ appearance: none;
17054
+ background: none;
17055
+ cursor: pointer;
17056
+ text-align: start;
17057
+ inline-size: 100%;
17058
+ position: relative;
17059
+ display: inline-flex;
17060
+ align-items: center;
17061
+ justify-content: center;
17062
+ block-size: 2rem;
17063
+ inline-size: 2rem;
17064
+ }
17065
+ .cds--popover--tab-tip__button *,
17066
+ .cds--popover--tab-tip__button *::before,
17067
+ .cds--popover--tab-tip__button *::after {
17068
+ box-sizing: inherit;
17069
+ }
17070
+ .cds--popover--tab-tip__button::-moz-focus-inner {
17071
+ border: 0;
17072
+ }
17073
+ .cds--popover--tab-tip__button:focus {
17074
+ outline: 2px solid var(--cds-focus, #0f62fe);
17075
+ outline-offset: -2px;
17076
+ }
17077
+ @media screen and (prefers-contrast) {
17078
+ .cds--popover--tab-tip__button:focus {
17079
+ outline-style: dotted;
17080
+ }
17081
+ }
17082
+ .cds--popover--tab-tip__button:hover {
17083
+ background-color: var(--cds-layer-hover);
17084
+ }
17085
+
17086
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
17087
+ background: var(--cds-layer);
17088
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
17089
+ }
17090
+
17091
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
17092
+ position: absolute;
17093
+ z-index: 6001;
17094
+ background: var(--cds-layer);
17095
+ block-size: 2px;
17096
+ content: "";
17097
+ inline-size: 100%;
17098
+ inset-block-end: 0;
17099
+ }
17100
+
17101
+ .cds--popover--tab-tip__button svg {
17102
+ fill: var(--cds-icon-primary, #161616);
17103
+ }
17104
+
17105
+ .cds--tooltip {
17106
+ --cds-popover-offset: 12px;
17107
+ }
17108
+
17109
+ .cds--tooltip-content {
17110
+ font-size: var(--cds-body-01-font-size, 0.875rem);
17111
+ font-weight: var(--cds-body-01-font-weight, 400);
17112
+ line-height: var(--cds-body-01-line-height, 1.42857);
17113
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
17114
+ padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
17115
+ color: var(--cds-text-inverse, #ffffff);
17116
+ max-inline-size: 18rem;
17117
+ }
17118
+
17119
+ .cds--icon-tooltip {
17120
+ --cds-tooltip-padding-block: 0.125rem;
17121
+ --cds-popover-caret-width: 0.5rem;
17122
+ --cds-popover-caret-height: 0.25rem;
17123
+ --cds-popover-offset: 0.5rem;
17124
+ }
17125
+
17126
+ .cds--icon-tooltip .cds--tooltip-content {
17127
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
17128
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
17129
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
17130
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
17131
+ }
17132
+
17133
+ .cds--definition-term {
17134
+ box-sizing: border-box;
17135
+ padding: 0;
17136
+ border: 0;
17137
+ margin: 0;
17138
+ font-family: inherit;
17139
+ font-size: 100%;
17140
+ vertical-align: baseline;
17141
+ display: inline-block;
17142
+ padding: 0;
17143
+ border: 0;
17144
+ appearance: none;
17145
+ background: none;
17146
+ cursor: pointer;
17147
+ text-align: start;
17148
+ inline-size: 100%;
17149
+ border-radius: 0;
17150
+ border-block-end: 1px dotted var(--cds-border-strong);
17151
+ color: var(--cds-text-primary, #161616);
17152
+ }
17153
+ .cds--definition-term *,
17154
+ .cds--definition-term *::before,
17155
+ .cds--definition-term *::after {
17156
+ box-sizing: inherit;
17157
+ }
17158
+ .cds--definition-term::-moz-focus-inner {
17159
+ border: 0;
17160
+ }
17161
+
17162
+ .cds--definition-term:focus {
17163
+ outline: 1px solid var(--cds-focus, #0f62fe);
17164
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
17165
+ }
17166
+ @media screen and (prefers-contrast) {
17167
+ .cds--definition-term:focus {
17168
+ outline-style: dotted;
17169
+ }
17170
+ }
17171
+
17172
+ .cds--definition-term:hover {
17173
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
17174
+ }
17175
+
17176
+ .cds--definition-tooltip {
17177
+ font-size: var(--cds-body-01-font-size, 0.875rem);
17178
+ font-weight: var(--cds-body-01-font-weight, 400);
17179
+ line-height: var(--cds-body-01-line-height, 1.42857);
17180
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
17181
+ padding: 0.5rem 1rem;
17182
+ max-inline-size: 11rem;
17183
+ }
17184
+
18824
17185
  .c4p--user-avatar {
18825
17186
  position: relative;
18826
17187
  display: flex;
@@ -18841,6 +17202,7 @@ a.cds--side-nav__link--current::before {
18841
17202
 
18842
17203
  .c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
18843
17204
  outline: 2px solid var(--cds-focus, #0f62fe);
17205
+ outline-offset: 1px;
18844
17206
  }
18845
17207
 
18846
17208
  :root .c4p--user-avatar--order-1-cyan,
@@ -19703,7 +18065,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19703
18065
 
19704
18066
  .cds--tag--red {
19705
18067
  background-color: var(--cds-tag-background-red, #ffd7d9);
19706
- color: var(--cds-tag-color-red, #750e13);
18068
+ color: var(--cds-tag-color-red, #a2191f);
19707
18069
  }
19708
18070
  .cds--tag--red.cds--tag--operational {
19709
18071
  border: 1px solid var(--cds-tag-border-red, #ff8389);
@@ -19717,7 +18079,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19717
18079
 
19718
18080
  .cds--tag--magenta {
19719
18081
  background-color: var(--cds-tag-background-magenta, #ffd6e8);
19720
- color: var(--cds-tag-color-magenta, #740937);
18082
+ color: var(--cds-tag-color-magenta, #9f1853);
19721
18083
  }
19722
18084
  .cds--tag--magenta.cds--tag--operational {
19723
18085
  border: 1px solid var(--cds-tag-border-magenta, #ff7eb6);
@@ -19731,7 +18093,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19731
18093
 
19732
18094
  .cds--tag--purple {
19733
18095
  background-color: var(--cds-tag-background-purple, #e8daff);
19734
- color: var(--cds-tag-color-purple, #491d8b);
18096
+ color: var(--cds-tag-color-purple, #6929c4);
19735
18097
  }
19736
18098
  .cds--tag--purple.cds--tag--operational {
19737
18099
  border: 1px solid var(--cds-tag-border-purple, #be95ff);
@@ -19745,7 +18107,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19745
18107
 
19746
18108
  .cds--tag--blue {
19747
18109
  background-color: var(--cds-tag-background-blue, #d0e2ff);
19748
- color: var(--cds-tag-color-blue, #002d9c);
18110
+ color: var(--cds-tag-color-blue, #0043ce);
19749
18111
  }
19750
18112
  .cds--tag--blue.cds--tag--operational {
19751
18113
  border: 1px solid var(--cds-tag-border-blue, #78a9ff);
@@ -19759,7 +18121,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19759
18121
 
19760
18122
  .cds--tag--cyan {
19761
18123
  background-color: var(--cds-tag-background-cyan, #bae6ff);
19762
- color: var(--cds-tag-color-cyan, #003a6d);
18124
+ color: var(--cds-tag-color-cyan, #00539a);
19763
18125
  }
19764
18126
  .cds--tag--cyan.cds--tag--operational {
19765
18127
  border: 1px solid var(--cds-tag-border-cyan, #33b1ff);
@@ -19773,7 +18135,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19773
18135
 
19774
18136
  .cds--tag--teal {
19775
18137
  background-color: var(--cds-tag-background-teal, #9ef0f0);
19776
- color: var(--cds-tag-color-teal, #004144);
18138
+ color: var(--cds-tag-color-teal, #005d5d);
19777
18139
  }
19778
18140
  .cds--tag--teal.cds--tag--operational {
19779
18141
  border: 1px solid var(--cds-tag-border-teal, #08bdba);
@@ -19787,7 +18149,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
19787
18149
 
19788
18150
  .cds--tag--green {
19789
18151
  background-color: var(--cds-tag-background-green, #a7f0ba);
19790
- color: var(--cds-tag-color-green, #044317);
18152
+ color: var(--cds-tag-color-green, #0e6027);
19791
18153
  }
19792
18154
  .cds--tag--green.cds--tag--operational {
19793
18155
  border: 1px solid var(--cds-tag-border-green, #42be65);
@@ -20012,6 +18374,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
20012
18374
  block-size: 100%;
20013
18375
  content: "";
20014
18376
  inline-size: 100%;
18377
+ inset-inline-start: 0;
20015
18378
  will-change: transform-origin, transform, opacity;
20016
18379
  }
20017
18380
  @media (prefers-reduced-motion: reduce) {
@@ -20049,7 +18412,10 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
20049
18412
  border-color: currentColor;
20050
18413
  }
20051
18414
 
20052
- /* stylelint-disable */
18415
+ .cds--tag--filter .cds--slug {
18416
+ min-inline-size: 2.00875rem;
18417
+ }
18418
+
20053
18419
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20054
18420
  .cds--tag {
20055
18421
  outline: 1px solid transparent;
@@ -20082,7 +18448,6 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
20082
18448
  max-inline-size: 9.875rem;
20083
18449
  }
20084
18450
 
20085
- /* stylelint-enable */
20086
18451
  .cds--interactive--tag-children {
20087
18452
  display: inline-flex;
20088
18453
  max-inline-size: 12.5rem;
@@ -21688,7 +20053,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
21688
20053
  .c4p--condition-builder__add-button,
21689
20054
  .c4p--condition-builder__add-condition-sub-group) {
21690
20055
  background-color: var(--cds-tag-background-red, #ffd7d9);
21691
- color: var(--cds-tag-color-red, #750e13);
20056
+ color: var(--cds-tag-color-red, #a2191f);
21692
20057
  }
21693
20058
 
21694
20059
  .c4p--condition-builder__condition__deletion-preview .c4p--condition-builder__button:not(.c4p--condition-builder__statement-button,