@carbon/ibm-products 0.99.1 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. package/css/index-full-carbon.css +895 -922
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +8 -8
  4. package/css/index-without-carbon-released-only.css +808 -796
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +8 -8
  7. package/css/index-without-carbon.css +895 -922
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +8 -8
  10. package/css/index.css +895 -922
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +8 -8
  13. package/es/components/ActionBar/ActionBar.js +11 -36
  14. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +42 -115
  15. package/es/components/CreateSidePanel/CreateSidePanel.js +5 -17
  16. package/es/components/PageHeader/PageHeader.js +17 -100
  17. package/es/components/SidePanel/SidePanel.js +13 -28
  18. package/es/components/Tearsheet/Tearsheet.js +1 -10
  19. package/es/components/Tearsheet/TearsheetNarrow.js +1 -10
  20. package/es/components/Tearsheet/TearsheetShell.js +0 -10
  21. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  22. package/es/components/index.js +0 -1
  23. package/es/global/js/package-settings.js +1 -2
  24. package/lib/components/ActionBar/ActionBar.js +11 -37
  25. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +44 -116
  26. package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -19
  27. package/lib/components/PageHeader/PageHeader.js +16 -99
  28. package/lib/components/SidePanel/SidePanel.js +13 -29
  29. package/lib/components/Tearsheet/Tearsheet.js +0 -9
  30. package/lib/components/Tearsheet/TearsheetNarrow.js +0 -9
  31. package/lib/components/Tearsheet/TearsheetShell.js +0 -11
  32. package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
  33. package/lib/components/index.js +0 -8
  34. package/lib/global/js/package-settings.js +1 -2
  35. package/package.json +2 -2
  36. package/scss/components/PageHeader/_page-header.scss +26 -5
  37. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  38. package/scss/components/_index.scss +0 -1
  39. package/scss/global/styles/_project-settings.scss +1 -1
  40. package/es/components/ContextHeader/ContextHeader.js +0 -46
  41. package/es/components/ContextHeader/index.js +0 -7
  42. package/lib/components/ContextHeader/ContextHeader.js +0 -62
  43. package/lib/components/ContextHeader/index.js +0 -15
  44. package/scss/components/ContextHeader/_context-header.scss +0 -43
  45. package/scss/components/ContextHeader/_index.scss +0 -8
@@ -4541,30 +4541,30 @@ fieldset[disabled] .bx--form__helper-text {
4541
4541
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4542
4542
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4543
4543
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4544
- .exp--apikey-modal .bx--modal-close {
4544
+ .c4p--apikey-modal .bx--modal-close {
4545
4545
  display: none;
4546
4546
  }
4547
4547
 
4548
- .exp--apikey-modal .bx--inline-loading {
4548
+ .c4p--apikey-modal .bx--inline-loading {
4549
4549
  min-height: 3rem;
4550
4550
  }
4551
4551
 
4552
- .exp--apikey-modal .bx--modal-content {
4552
+ .c4p--apikey-modal .bx--modal-content {
4553
4553
  padding-right: var(--cds-spacing-05, 1rem);
4554
4554
  }
4555
4555
 
4556
- .exp--apikey-modal__body {
4556
+ .c4p--apikey-modal__body {
4557
4557
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4558
4558
  margin-bottom: var(--cds-spacing-05, 1rem);
4559
4559
  }
4560
4560
 
4561
- .exp--apikey-modal__messaging {
4561
+ .c4p--apikey-modal__messaging {
4562
4562
  display: flex;
4563
4563
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4564
4564
  margin-top: var(--cds-spacing-03, 0.5rem);
4565
4565
  }
4566
4566
 
4567
- .exp--apikey-modal__messaging-text {
4567
+ .c4p--apikey-modal__messaging-text {
4568
4568
  flex: 1;
4569
4569
  margin-left: var(--cds-spacing-03, 0.5rem);
4570
4570
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -4573,11 +4573,11 @@ fieldset[disabled] .bx--form__helper-text {
4573
4573
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
4574
4574
  }
4575
4575
 
4576
- .exp--apikey-modal__messaging-text > * {
4576
+ .c4p--apikey-modal__messaging-text > * {
4577
4577
  font: inherit;
4578
4578
  }
4579
4579
 
4580
- .exp--apikey-modal__error-icon svg {
4580
+ .c4p--apikey-modal__error-icon svg {
4581
4581
  fill: var(--cds-danger-01, #da1e28);
4582
4582
  }
4583
4583
 
@@ -5525,21 +5525,21 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5525
5525
  }
5526
5526
  }
5527
5527
 
5528
- .exp--about-modal .bx--modal-container {
5528
+ .c4p--about-modal .bx--modal-container {
5529
5529
  grid-template-rows: auto auto 1fr auto;
5530
5530
  }
5531
5531
 
5532
- .exp--about-modal .exp--about-modal__logo {
5532
+ .c4p--about-modal .c4p--about-modal__logo {
5533
5533
  margin: var(--cds-spacing-05, 1rem);
5534
5534
  }
5535
5535
 
5536
- .exp--about-modal .exp--about-modal__header {
5536
+ .c4p--about-modal .c4p--about-modal__header {
5537
5537
  padding: 0 20% var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
5538
5538
  margin-bottom: 0;
5539
5539
  grid-row: auto;
5540
5540
  }
5541
5541
 
5542
- .exp--about-modal .exp--about-modal__title {
5542
+ .c4p--about-modal .c4p--about-modal__title {
5543
5543
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
5544
5544
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
5545
5545
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -5547,7 +5547,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5547
5547
  color: var(--cds-text-01, #161616);
5548
5548
  }
5549
5549
 
5550
- .exp--about-modal .exp--about-modal__body {
5550
+ .c4p--about-modal .c4p--about-modal__body {
5551
5551
  font-size: var(--cds-body-short-02-font-size, 1rem);
5552
5552
  font-weight: var(--cds-body-short-02-font-weight, 400);
5553
5553
  line-height: var(--cds-body-short-02-line-height, 1.375);
@@ -5559,37 +5559,37 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5559
5559
  overflow-y: auto;
5560
5560
  }
5561
5561
 
5562
- .exp--about-modal.exp--about-modal--with-tabs .exp--about-modal__body {
5562
+ .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
5563
5563
  min-height: calc(var(--cds-layout-05, 4rem) + var(--cds-spacing-08, 2.5rem));
5564
5564
  margin-bottom: calc(var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem));
5565
5565
  }
5566
5566
 
5567
- .exp--about-modal.exp--about-modal--with-tabs .bx--modal-content--overflow-indicator {
5567
+ .c4p--about-modal.c4p--about-modal--with-tabs .bx--modal-content--overflow-indicator {
5568
5568
  bottom: calc(var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem));
5569
5569
  }
5570
5570
 
5571
- .exp--about-modal .exp--about-modal__links-container {
5571
+ .c4p--about-modal .c4p--about-modal__links-container {
5572
5572
  margin-top: var(--cds-spacing-05, 1rem);
5573
5573
  }
5574
5574
 
5575
- .exp--about-modal .exp--about-modal__links-container a + a {
5575
+ .c4p--about-modal .c4p--about-modal__links-container a + a {
5576
5576
  padding-left: var(--cds-spacing-03, 0.5rem);
5577
5577
  border-left: 1px solid var(--cds-text-01, #161616);
5578
5578
  margin-left: var(--cds-spacing-03, 0.5rem);
5579
5579
  }
5580
5580
 
5581
- .exp--about-modal .exp--about-modal__legal-text,
5582
- .exp--about-modal .exp--about-modal__copyright-text {
5581
+ .c4p--about-modal .c4p--about-modal__legal-text,
5582
+ .c4p--about-modal .c4p--about-modal__copyright-text {
5583
5583
  margin-top: var(--cds-spacing-07, 2rem);
5584
5584
  margin-bottom: 0;
5585
5585
  color: var(--cds-text-02, #525252);
5586
5586
  }
5587
5587
 
5588
- .exp--about-modal .exp--about-modal__copyright-text {
5588
+ .c4p--about-modal .c4p--about-modal__copyright-text {
5589
5589
  margin-top: var(--cds-spacing-05, 1rem);
5590
5590
  }
5591
5591
 
5592
- .exp--about-modal .exp--about-modal__footer {
5592
+ .c4p--about-modal .c4p--about-modal__footer {
5593
5593
  position: relative;
5594
5594
  height: 4.5rem;
5595
5595
  flex-direction: column;
@@ -5598,13 +5598,13 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5598
5598
  color: var(--cds-inverse-01, #ffffff);
5599
5599
  }
5600
5600
 
5601
- .exp--about-modal .exp--about-modal__tab-container {
5601
+ .c4p--about-modal .c4p--about-modal__tab-container {
5602
5602
  position: absolute;
5603
5603
  bottom: 100%;
5604
5604
  }
5605
5605
 
5606
- .exp--about-modal .exp--about-modal__version-label,
5607
- .exp--about-modal .exp--about-modal__version-number {
5606
+ .c4p--about-modal .c4p--about-modal__version-label,
5607
+ .c4p--about-modal .c4p--about-modal__version-number {
5608
5608
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
5609
5609
  font-weight: var(--cds-body-short-01-font-weight, 400);
5610
5610
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -5615,7 +5615,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5615
5615
  color: var(--cds-inverse-01, #ffffff);
5616
5616
  }
5617
5617
 
5618
- .exp--about-modal .exp--about-modal__version-label {
5618
+ .c4p--about-modal .c4p--about-modal__version-label {
5619
5619
  font-weight: 600;
5620
5620
  }
5621
5621
 
@@ -5717,13 +5717,13 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5717
5717
  stroke-dashoffset: 0;
5718
5718
  }
5719
5719
  }
5720
- .exp--action-set {
5720
+ .c4p--action-set {
5721
5721
  align-items: stretch;
5722
5722
  justify-content: flex-end;
5723
5723
  background-color: var(--cds-ui-01, #f4f4f4);
5724
5724
  }
5725
5725
 
5726
- .exp--action-set .exp--action-set__action-button {
5726
+ .c4p--action-set .c4p--action-set__action-button {
5727
5727
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
5728
5728
  font-weight: var(--cds-body-short-01-font-weight, 400);
5729
5729
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -5735,47 +5735,47 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5735
5735
  margin: 0;
5736
5736
  }
5737
5737
 
5738
- .exp--action-set.bx--btn-set .exp--action-set__action-button.bx--btn.bx--btn--expressive {
5738
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive {
5739
5739
  max-width: none;
5740
5740
  }
5741
5741
 
5742
- .exp--action-set:not(.exp--action-set--stacking) .exp--action-set__action-button--ghost {
5742
+ .c4p--action-set:not(.c4p--action-set--stacking) .c4p--action-set__action-button--ghost {
5743
5743
  padding-left: var(--cds-spacing-07, 2rem);
5744
5744
  }
5745
5745
 
5746
- .exp--action-set.exp--action-set--row-single.exp--action-set--md .exp--action-set__action-button,
5747
- .exp--action-set.exp--action-set--row-single .exp--action-set__action-button--ghost {
5746
+ .c4p--action-set.c4p--action-set--row-single.c4p--action-set--md .c4p--action-set__action-button,
5747
+ .c4p--action-set.c4p--action-set--row-single .c4p--action-set__action-button--ghost {
5748
5748
  flex: 0 0 100%;
5749
5749
  }
5750
5750
 
5751
- .exp--action-set.exp--action-set--row-double .exp--action-set__action-button--ghost {
5751
+ .c4p--action-set.c4p--action-set--row-double .c4p--action-set__action-button--ghost {
5752
5752
  flex: 1 1 75%;
5753
5753
  }
5754
5754
 
5755
- .exp--action-set.exp--action-set--row-single.exp--action-set--lg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5756
- .exp--action-set.exp--action-set--row-double.exp--action-set--md .exp--action-set__action-button,
5757
- .exp--action-set.exp--action-set--row-double.exp--action-set--lg .exp--action-set__action-button,
5758
- .exp--action-set.exp--action-set--row-triple .exp--action-set__action-button--ghost {
5755
+ .c4p--action-set.c4p--action-set--row-single.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5756
+ .c4p--action-set.c4p--action-set--row-double.c4p--action-set--md .c4p--action-set__action-button,
5757
+ .c4p--action-set.c4p--action-set--row-double.c4p--action-set--lg .c4p--action-set__action-button,
5758
+ .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
5759
5759
  flex: 0 1 50%;
5760
5760
  }
5761
5761
 
5762
- .exp--action-set.exp--action-set--row-triple .exp--action-set__action-button--ghost {
5762
+ .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
5763
5763
  flex: 1 1 50%;
5764
5764
  }
5765
5765
 
5766
- .exp--action-set.bx--btn-set.exp--action-set--row-triple.exp--action-set--lg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5767
- .exp--action-set.bx--btn-set.exp--action-set--xlg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5768
- .exp--action-set.bx--btn-set.exp--action-set--max .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5769
- .exp--action-set.bx--btn-set.exp--action-set--row-quadruple .exp--action-set__action-button:not(.exp--action-set__action-button--ghost) {
5766
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-triple.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5767
+ .c4p--action-set.bx--btn-set.c4p--action-set--xlg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5768
+ .c4p--action-set.bx--btn-set.c4p--action-set--max .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5769
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
5770
5770
  max-width: 14.5rem;
5771
5771
  flex: 0 1 25%;
5772
5772
  }
5773
5773
 
5774
- .exp--action-set.bx--btn-set.exp--action-set--row-quadruple .exp--action-set__action-button--ghost {
5774
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button--ghost {
5775
5775
  flex: 1 1 25%;
5776
5776
  }
5777
5777
 
5778
- .exp--action-set .exp--action-set__action-button .bx--inline-loading {
5778
+ .c4p--action-set .c4p--action-set__action-button .bx--inline-loading {
5779
5779
  position: absolute;
5780
5780
  top: 0;
5781
5781
  right: 0;
@@ -5785,15 +5785,15 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5785
5785
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5786
5786
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5787
5787
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5788
- .exp--button-menu {
5788
+ .c4p--button-menu {
5789
5789
  min-width: 160px;
5790
5790
  }
5791
- .exp--button-menu .exp--button-menu__trigger {
5791
+ .c4p--button-menu .c4p--button-menu__trigger {
5792
5792
  width: 100%;
5793
5793
  padding: 0 var(--cds-spacing-05, 1rem);
5794
5794
  }
5795
5795
 
5796
- .exp--button-menu__options.bx--overflow-menu-options::after {
5796
+ .c4p--button-menu__options.bx--overflow-menu-options::after {
5797
5797
  content: initial;
5798
5798
  }
5799
5799
 
@@ -7684,51 +7684,51 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
7684
7684
  }
7685
7685
  }
7686
7686
  @media (prefers-reduced-motion: no-preference) {
7687
- .exp--cascade__element,
7688
- .exp--cascade__col {
7687
+ .c4p--cascade__element,
7688
+ .c4p--cascade__col {
7689
7689
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
7690
7690
  animation-fill-mode: forwards;
7691
7691
  opacity: 0;
7692
7692
  }
7693
7693
  }
7694
7694
 
7695
- .exp--cascade__element:nth-child(n+1),
7696
- .exp--cascade__col-1 {
7695
+ .c4p--cascade__element:nth-child(n+1),
7696
+ .c4p--cascade__col-1 {
7697
7697
  animation-delay: 60ms;
7698
7698
  }
7699
7699
 
7700
- .exp--cascade__element:nth-child(n+2),
7701
- .exp--cascade__col-2 {
7700
+ .c4p--cascade__element:nth-child(n+2),
7701
+ .c4p--cascade__col-2 {
7702
7702
  animation-delay: 120ms;
7703
7703
  }
7704
7704
 
7705
- .exp--cascade__element:nth-child(n+3),
7706
- .exp--cascade__col-3 {
7705
+ .c4p--cascade__element:nth-child(n+3),
7706
+ .c4p--cascade__col-3 {
7707
7707
  animation-delay: 180ms;
7708
7708
  }
7709
7709
 
7710
- .exp--cascade__element:nth-child(n+4),
7711
- .exp--cascade__col-4 {
7710
+ .c4p--cascade__element:nth-child(n+4),
7711
+ .c4p--cascade__col-4 {
7712
7712
  animation-delay: 240ms;
7713
7713
  }
7714
7714
 
7715
- .exp--cascade__element:nth-child(n+5),
7716
- .exp--cascade__col-5 {
7715
+ .c4p--cascade__element:nth-child(n+5),
7716
+ .c4p--cascade__col-5 {
7717
7717
  animation-delay: 300ms;
7718
7718
  }
7719
7719
 
7720
- .exp--cascade__element:nth-child(n+6),
7721
- .exp--cascade__col-6 {
7720
+ .c4p--cascade__element:nth-child(n+6),
7721
+ .c4p--cascade__col-6 {
7722
7722
  animation-delay: 360ms;
7723
7723
  }
7724
7724
 
7725
- .exp--cascade__element:nth-child(n+7),
7726
- .exp--cascade__col-7 {
7725
+ .c4p--cascade__element:nth-child(n+7),
7726
+ .c4p--cascade__col-7 {
7727
7727
  animation-delay: 420ms;
7728
7728
  }
7729
7729
 
7730
- .exp--cascade__element:nth-child(n+8),
7731
- .exp--cascade__col-8 {
7730
+ .c4p--cascade__element:nth-child(n+8),
7731
+ .c4p--cascade__col-8 {
7732
7732
  animation-delay: 480ms;
7733
7733
  }
7734
7734
 
@@ -8247,45 +8247,6 @@ a.bx--overflow-menu-options__btn::before {
8247
8247
  margin-left: auto;
8248
8248
  }
8249
8249
 
8250
- /* stylelint-disable-line no-invalid-position-at-import-rule */
8251
- /* stylelint-disable-line no-invalid-position-at-import-rule */
8252
- /* stylelint-disable-line no-invalid-position-at-import-rule */
8253
- .exp-context-header {
8254
- display: flex;
8255
- width: 100%;
8256
- height: var(--cds-spacing-07, 2rem);
8257
- padding: 0 var(--cds-spacing-05, 1rem);
8258
- border-bottom: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
8259
- background: var(--cds-ui-background, #ffffff);
8260
- }
8261
-
8262
- .exp-context-header--task,
8263
- .exp-context-header--name,
8264
- .exp-context-header--namespace,
8265
- .exp-context-header--separator {
8266
- font-size: var(--cds-label-01-font-size, 0.75rem);
8267
- font-weight: var(--cds-label-01-font-weight, 400);
8268
- line-height: var(--cds-label-01-line-height, 1.33333);
8269
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
8270
- display: inline-flex;
8271
- align-items: center;
8272
- }
8273
-
8274
- .exp-context-header--task {
8275
- padding-right: var(--cds-spacing-05, 1rem);
8276
- color: var(--cds-text-01, #161616);
8277
- }
8278
-
8279
- .exp-context-header--name,
8280
- .exp-context-header--namespace,
8281
- .exp-context-header--separator {
8282
- color: var(--cds-text-02, #525252);
8283
- }
8284
-
8285
- .exp-context-header--separator {
8286
- padding: 0 var(--cds-spacing-03, 0.5rem);
8287
- }
8288
-
8289
8250
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8290
8251
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8291
8252
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -11640,48 +11601,48 @@ a.bx--overflow-menu-options__btn::before {
11640
11601
  transform: translateX(calc(-1 * var(--cds-spacing-05, 1rem)));
11641
11602
  }
11642
11603
  }
11643
- .exp--create-influencer {
11604
+ .c4p--create-influencer {
11644
11605
  display: grid;
11645
11606
  height: 100%;
11646
11607
  grid-template-columns: 100%;
11647
11608
  grid-template-rows: 1fr auto;
11648
11609
  }
11649
11610
 
11650
- .exp--create-influencer__left-nav {
11611
+ .c4p--create-influencer__left-nav {
11651
11612
  grid-column: 1/-1;
11652
11613
  grid-row: 1/-1;
11653
11614
  overflow-y: auto;
11654
11615
  }
11655
11616
 
11656
- .exp--create-influencer__progress-indicator {
11617
+ .c4p--create-influencer__progress-indicator {
11657
11618
  padding: var(--cds-spacing-06, 1.5rem);
11658
11619
  }
11659
11620
 
11660
- .exp--create-influencer__view-all-toggle {
11621
+ .c4p--create-influencer__view-all-toggle {
11661
11622
  padding: var(--cds-spacing-06, 1.5rem);
11662
11623
  grid-column: 1/-1;
11663
11624
  grid-row: -1/-1;
11664
11625
  }
11665
11626
 
11666
- .exp--create-influencer__side-nav-opening,
11667
- .exp--create-influencer__progress-indicator-opening {
11627
+ .c4p--create-influencer__side-nav-opening,
11628
+ .c4p--create-influencer__progress-indicator-opening {
11668
11629
  animation: influencerMenuEntrance 240ms 1;
11669
11630
  animation-fill-mode: forwards;
11670
11631
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
11671
11632
  }
11672
11633
 
11673
- .exp--create-influencer__side-nav-closing,
11674
- .exp--create-influencer__progress-indicator-closing {
11634
+ .c4p--create-influencer__side-nav-closing,
11635
+ .c4p--create-influencer__progress-indicator-closing {
11675
11636
  animation: influencerMenuExit 240ms 1;
11676
11637
  animation-fill-mode: forwards;
11677
11638
  transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
11678
11639
  }
11679
11640
 
11680
11641
  @media (prefers-reduced-motion) {
11681
- .exp--create-influencer__side-nav-opening,
11682
- .exp--create-influencer__progress-indicator-opening,
11683
- .exp--create-influencer__side-nav-closing,
11684
- .exp--create-influencer__progress-indicator-closing {
11642
+ .c4p--create-influencer__side-nav-opening,
11643
+ .c4p--create-influencer__progress-indicator-opening,
11644
+ .c4p--create-influencer__side-nav-closing,
11645
+ .c4p--create-influencer__progress-indicator-closing {
11685
11646
  animation: none;
11686
11647
  opacity: 1;
11687
11648
  }
@@ -11784,31 +11745,31 @@ a.bx--overflow-menu-options__btn::before {
11784
11745
  stroke-dashoffset: 0;
11785
11746
  }
11786
11747
  }
11787
- .exp--create-full-page .exp--create-full-page {
11748
+ .c4p--create-full-page .c4p--create-full-page {
11788
11749
  color: var(--cds-text-01, #161616);
11789
11750
  }
11790
11751
 
11791
- .exp--create-full-page .exp--create-full-page__content .bx--grid {
11752
+ .c4p--create-full-page .c4p--create-full-page__content .bx--grid {
11792
11753
  padding-top: var(--cds-spacing-06, 1.5rem);
11793
11754
  margin-right: 0;
11794
11755
  margin-left: 0;
11795
11756
  }
11796
11757
 
11797
- .exp--create-full-page .exp--create-full-page__step--hidden-step,
11798
- .exp--create-full-page .exp--create-full-page__step--hidden-section {
11758
+ .c4p--create-full-page .c4p--create-full-page__step--hidden-step,
11759
+ .c4p--create-full-page .c4p--create-full-page__step--hidden-section {
11799
11760
  display: none;
11800
11761
  }
11801
11762
 
11802
- .exp--create-full-page .exp--create-full-page__step--visible-section {
11763
+ .c4p--create-full-page .c4p--create-full-page__step--visible-section {
11803
11764
  display: block;
11804
11765
  }
11805
11766
 
11806
- .exp--create-full-page .exp--create-full-page__step--visible-step {
11767
+ .c4p--create-full-page .c4p--create-full-page__step--visible-step {
11807
11768
  opacity: 1;
11808
11769
  }
11809
11770
 
11810
- .exp--create-full-page .exp--create-full-page__section-subtitle,
11811
- .exp--create-full-page .exp--create-full-page__step-subtitle {
11771
+ .c4p--create-full-page .c4p--create-full-page__section-subtitle,
11772
+ .c4p--create-full-page .c4p--create-full-page__step-subtitle {
11812
11773
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
11813
11774
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
11814
11775
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -11817,8 +11778,8 @@ a.bx--overflow-menu-options__btn::before {
11817
11778
  margin-bottom: var(--cds-spacing-03, 0.5rem);
11818
11779
  }
11819
11780
 
11820
- .exp--create-full-page .exp--create-full-page__section-description,
11821
- .exp--create-full-page .exp--create-full-page__step-description {
11781
+ .c4p--create-full-page .c4p--create-full-page__section-description,
11782
+ .c4p--create-full-page .c4p--create-full-page__step-description {
11822
11783
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
11823
11784
  font-weight: var(--cds-body-long-01-font-weight, 400);
11824
11785
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -11827,45 +11788,45 @@ a.bx--overflow-menu-options__btn::before {
11827
11788
  margin-bottom: var(--cds-spacing-06, 1.5rem);
11828
11789
  }
11829
11790
 
11830
- .exp--create-full-page .bx--fieldset {
11791
+ .c4p--create-full-page .bx--fieldset {
11831
11792
  margin-bottom: 0;
11832
11793
  }
11833
11794
 
11834
- .exp--create-full-page .exp--create-full-page__step-fieldset > * {
11795
+ .c4p--create-full-page .c4p--create-full-page__step-fieldset > * {
11835
11796
  margin-bottom: var(--cds-spacing-05, 1rem);
11836
11797
  }
11837
11798
 
11838
- .exp--create-full-page .bx--modal-close {
11799
+ .c4p--create-full-page .bx--modal-close {
11839
11800
  display: none;
11840
11801
  }
11841
11802
 
11842
- .exp--create-full-page {
11803
+ .c4p--create-full-page {
11843
11804
  display: flex;
11844
11805
  height: 100vh;
11845
11806
  padding: 0;
11846
11807
  margin: 0;
11847
11808
  }
11848
11809
 
11849
- .exp--create-full-page .exp--create-full-page__left-nav {
11810
+ .c4p--create-full-page .c4p--create-full-page__left-nav {
11850
11811
  grid-column: 1/-1;
11851
11812
  grid-row: 1/-1;
11852
11813
  overflow-y: auto;
11853
11814
  }
11854
11815
 
11855
- .exp--create-full-page .exp--create-full-page__body {
11816
+ .c4p--create-full-page .c4p--create-full-page__body {
11856
11817
  display: flex;
11857
11818
  flex-direction: column;
11858
11819
  flex-grow: 1;
11859
11820
  }
11860
11821
 
11861
- .exp--create-full-page .exp--create-full-page__main {
11822
+ .c4p--create-full-page .c4p--create-full-page__main {
11862
11823
  display: flex;
11863
11824
  max-height: 100%;
11864
11825
  flex-direction: column;
11865
11826
  flex-grow: 1;
11866
11827
  }
11867
11828
 
11868
- .exp--create-full-page .exp--create-full-page__content {
11829
+ .c4p--create-full-page .c4p--create-full-page__content {
11869
11830
  overflow: auto;
11870
11831
  flex-grow: 1;
11871
11832
  background-color: var(--cds-ui-background, #ffffff);
@@ -11873,12 +11834,12 @@ a.bx--overflow-menu-options__btn::before {
11873
11834
  overflow-x: hidden;
11874
11835
  }
11875
11836
 
11876
- .exp--create-full-page .exp--create-full-page__step {
11837
+ .c4p--create-full-page .c4p--create-full-page__step {
11877
11838
  position: relative;
11878
11839
  padding-bottom: var(--cds-spacing-07, 2rem);
11879
11840
  }
11880
11841
 
11881
- .exp--create-full-page .bx--side-nav--ux {
11842
+ .c4p--create-full-page .bx--side-nav--ux {
11882
11843
  top: 0;
11883
11844
  height: min-content;
11884
11845
  padding-top: 0;
@@ -11888,14 +11849,14 @@ a.bx--overflow-menu-options__btn::before {
11888
11849
  overflow-x: auto;
11889
11850
  }
11890
11851
 
11891
- .exp--create-full-page .exp--create-full-page__section-divider {
11852
+ .c4p--create-full-page .c4p--create-full-page__section-divider {
11892
11853
  position: relative;
11893
11854
  display: block;
11894
11855
  width: 0;
11895
11856
  height: 1px;
11896
11857
  margin: var(--cds-spacing-07, 2rem) calc(-1 * var(--cds-spacing-08, 2.5rem)) var(--cds-spacing-07, 2rem) calc(-1 * var(--cds-spacing-08, 2.5rem));
11897
11858
  }
11898
- .exp--create-full-page .exp--create-full-page__section-divider::after {
11859
+ .c4p--create-full-page .c4p--create-full-page__section-divider::after {
11899
11860
  position: absolute;
11900
11861
  top: 0;
11901
11862
  left: 0;
@@ -11905,8 +11866,8 @@ a.bx--overflow-menu-options__btn::before {
11905
11866
  content: "";
11906
11867
  }
11907
11868
 
11908
- .exp--create-full-page .exp--create-full-page__step-title,
11909
- .exp--create-full-page .exp--create-full-page__section-title {
11869
+ .c4p--create-full-page .c4p--create-full-page__step-title,
11870
+ .c4p--create-full-page .c4p--create-full-page__section-title {
11910
11871
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
11911
11872
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
11912
11873
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -11915,7 +11876,7 @@ a.bx--overflow-menu-options__btn::before {
11915
11876
  margin-bottom: var(--cds-spacing-05, 1rem);
11916
11877
  }
11917
11878
 
11918
- .exp--create-full-page .exp--create-full-page__influencer {
11879
+ .c4p--create-full-page .c4p--create-full-page__influencer {
11919
11880
  display: grid;
11920
11881
  flex: 0 0 257px;
11921
11882
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
@@ -11924,17 +11885,17 @@ a.bx--overflow-menu-options__btn::before {
11924
11885
  grid-template-rows: 1fr auto;
11925
11886
  }
11926
11887
 
11927
- .exp--create-full-page .exp--create-full-page__progress-indicator {
11888
+ .c4p--create-full-page .c4p--create-full-page__progress-indicator {
11928
11889
  padding: var(--cds-spacing-06, 1.5rem);
11929
11890
  }
11930
11891
 
11931
- .exp--create-full-page .exp--create-full-page__influencer-toggle {
11892
+ .c4p--create-full-page .c4p--create-full-page__influencer-toggle {
11932
11893
  padding: var(--cds-spacing-06, 1.5rem);
11933
11894
  grid-column: 1/-1;
11934
11895
  grid-row: -1/-1;
11935
11896
  }
11936
11897
 
11937
- .exp--create-full-page .exp--create-full-page__buttons {
11898
+ .c4p--create-full-page .c4p--create-full-page__buttons {
11938
11899
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
11939
11900
  }
11940
11901
 
@@ -12057,37 +12018,37 @@ a.bx--overflow-menu-options__btn::before {
12057
12018
  /* stylelint-disable-line no-invalid-position-at-import-rule */
12058
12019
  /* stylelint-disable-line no-invalid-position-at-import-rule */
12059
12020
  /* stylelint-disable-line no-invalid-position-at-import-rule */
12060
- .exp--create-modal {
12021
+ .c4p--create-modal {
12061
12022
  background-color: var(--cds-ui-background, #ffffff);
12062
12023
  }
12063
12024
 
12064
- .exp--create-modal .bx--modal-close {
12025
+ .c4p--create-modal .bx--modal-close {
12065
12026
  display: none;
12066
12027
  }
12067
12028
 
12068
12029
  @media (min-width: 42rem) {
12069
- .exp--create-modal .bx--modal-container {
12030
+ .c4p--create-modal .bx--modal-container {
12070
12031
  max-height: 95%;
12071
12032
  }
12072
12033
  }
12073
12034
  @media (min-width: 66rem) {
12074
- .exp--create-modal .bx--modal-container {
12035
+ .c4p--create-modal .bx--modal-container {
12075
12036
  max-height: 95%;
12076
12037
  }
12077
12038
  }
12078
12039
 
12079
- .exp--create-modal .bx--modal-header {
12040
+ .c4p--create-modal .bx--modal-header {
12080
12041
  padding-right: 20%;
12081
12042
  padding-bottom: var(--cds-spacing-03, 0.5rem);
12082
12043
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
12083
12044
  margin-bottom: 0;
12084
12045
  }
12085
12046
 
12086
- .exp--create-modal .bx--modal-footer .bx--btn {
12047
+ .c4p--create-modal .bx--modal-footer .bx--btn {
12087
12048
  max-width: none;
12088
12049
  }
12089
12050
 
12090
- .exp--create-modal__title {
12051
+ .c4p--create-modal__title {
12091
12052
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
12092
12053
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12093
12054
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -12095,7 +12056,7 @@ a.bx--overflow-menu-options__btn::before {
12095
12056
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12096
12057
  }
12097
12058
 
12098
- .exp--create-modal__subtitle {
12059
+ .c4p--create-modal__subtitle {
12099
12060
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
12100
12061
  font-weight: var(--cds-body-short-01-font-weight, 400);
12101
12062
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -12104,7 +12065,7 @@ a.bx--overflow-menu-options__btn::before {
12104
12065
  color: var(--cds-text-02, #525252);
12105
12066
  }
12106
12067
 
12107
- .exp--create-modal__description {
12068
+ .c4p--create-modal__description {
12108
12069
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
12109
12070
  font-weight: var(--cds-body-long-01-font-weight, 400);
12110
12071
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -12113,15 +12074,15 @@ a.bx--overflow-menu-options__btn::before {
12113
12074
  margin: var(--cds-spacing-03, 0.5rem) 0 var(--cds-spacing-05, 1rem) 0;
12114
12075
  }
12115
12076
 
12116
- .exp--create-modal__form .bx--fieldset {
12077
+ .c4p--create-modal__form .bx--fieldset {
12117
12078
  min-width: 100%;
12118
12079
  margin-bottom: 0;
12119
12080
  }
12120
12081
 
12121
- .exp--create-modal__form > * {
12082
+ .c4p--create-modal__form > * {
12122
12083
  margin-bottom: var(--cds-spacing-05, 1rem);
12123
12084
  }
12124
- .exp--create-modal__form > *:last-child {
12085
+ .c4p--create-modal__form > *:last-child {
12125
12086
  margin-bottom: 0;
12126
12087
  }
12127
12088
 
@@ -12321,17 +12282,17 @@ a.bx--overflow-menu-options__btn::before {
12321
12282
  transform: translateX(30rem);
12322
12283
  }
12323
12284
  }
12324
- .exp--side-panel__container {
12325
- --exp--side-panel--subtitle-opacity: 1;
12326
- --exp--side-panel--title-container-height: 0;
12327
- --exp--side-panel--title-text-height: 0;
12328
- --exp--side-panel--subtitle-container-height: 0;
12329
- --exp--side-panel--action-bar-container-height: 0;
12330
- --exp--side-panel--divider-opacity: 0;
12331
- --exp--side-panel--title-y-position: 0;
12332
- --exp--side-panel--content-bottom-padding: var(--cds-spacing-10, 4rem);
12333
- --exp--side-panel--collapsed-title-y-position: 1rem;
12334
- --exp--side-panel--label-text-height: 0;
12285
+ .c4p--side-panel__container {
12286
+ --c4p--side-panel--subtitle-opacity: 1;
12287
+ --c4p--side-panel--title-container-height: 0;
12288
+ --c4p--side-panel--title-text-height: 0;
12289
+ --c4p--side-panel--subtitle-container-height: 0;
12290
+ --c4p--side-panel--action-bar-container-height: 0;
12291
+ --c4p--side-panel--divider-opacity: 0;
12292
+ --c4p--side-panel--title-y-position: 0;
12293
+ --c4p--side-panel--content-bottom-padding: var(--cds-spacing-10, 4rem);
12294
+ --c4p--side-panel--collapsed-title-y-position: 1rem;
12295
+ --c4p--side-panel--label-text-height: 0;
12335
12296
  position: fixed;
12336
12297
  z-index: 9000;
12337
12298
  top: var(--cds-spacing-09, 3rem);
@@ -12342,18 +12303,18 @@ a.bx--overflow-menu-options__btn::before {
12342
12303
  transition: transform 240ms;
12343
12304
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
12344
12305
  }
12345
- .exp--side-panel__container.exp--side-panel__container--xs {
12306
+ .c4p--side-panel__container.c4p--side-panel__container--xs {
12346
12307
  min-width: 16rem;
12347
12308
  max-width: 16rem;
12348
12309
  }
12349
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12350
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12351
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12352
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__actions-container.exp--action-set--xs {
12310
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12311
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12312
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12313
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--xs {
12353
12314
  min-width: 16rem;
12354
12315
  max-width: 16rem;
12355
12316
  }
12356
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--xs {
12317
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
12357
12318
  min-width: 16rem;
12358
12319
  max-width: 16rem;
12359
12320
  right: 0;
@@ -12369,7 +12330,7 @@ a.bx--overflow-menu-options__btn::before {
12369
12330
  transform: translateX(0);
12370
12331
  }
12371
12332
  }
12372
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--xs {
12333
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
12373
12334
  min-width: 16rem;
12374
12335
  max-width: 16rem;
12375
12336
  left: 0;
@@ -12385,18 +12346,18 @@ a.bx--overflow-menu-options__btn::before {
12385
12346
  transform: translateX(0);
12386
12347
  }
12387
12348
  }
12388
- .exp--side-panel__container.exp--side-panel__container--sm {
12349
+ .c4p--side-panel__container.c4p--side-panel__container--sm {
12389
12350
  min-width: 20rem;
12390
12351
  max-width: 20rem;
12391
12352
  }
12392
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12393
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12394
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12395
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__actions-container.exp--action-set--sm {
12353
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12354
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12355
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12356
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__actions-container.c4p--action-set--sm {
12396
12357
  min-width: 20rem;
12397
12358
  max-width: 20rem;
12398
12359
  }
12399
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--sm {
12360
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
12400
12361
  min-width: 20rem;
12401
12362
  max-width: 20rem;
12402
12363
  right: 0;
@@ -12412,7 +12373,7 @@ a.bx--overflow-menu-options__btn::before {
12412
12373
  transform: translateX(0);
12413
12374
  }
12414
12375
  }
12415
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--sm {
12376
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
12416
12377
  min-width: 20rem;
12417
12378
  max-width: 20rem;
12418
12379
  left: 0;
@@ -12428,18 +12389,18 @@ a.bx--overflow-menu-options__btn::before {
12428
12389
  transform: translateX(0);
12429
12390
  }
12430
12391
  }
12431
- .exp--side-panel__container.exp--side-panel__container--md {
12392
+ .c4p--side-panel__container.c4p--side-panel__container--md {
12432
12393
  min-width: 30rem;
12433
12394
  max-width: 30rem;
12434
12395
  }
12435
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12436
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12437
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12438
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__actions-container.exp--action-set--md {
12396
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12397
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12398
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12399
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__actions-container.c4p--action-set--md {
12439
12400
  min-width: 30rem;
12440
12401
  max-width: 30rem;
12441
12402
  }
12442
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--md {
12403
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
12443
12404
  min-width: 30rem;
12444
12405
  max-width: 30rem;
12445
12406
  right: 0;
@@ -12455,7 +12416,7 @@ a.bx--overflow-menu-options__btn::before {
12455
12416
  transform: translateX(0);
12456
12417
  }
12457
12418
  }
12458
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--md {
12419
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
12459
12420
  min-width: 30rem;
12460
12421
  max-width: 30rem;
12461
12422
  left: 0;
@@ -12471,18 +12432,18 @@ a.bx--overflow-menu-options__btn::before {
12471
12432
  transform: translateX(0);
12472
12433
  }
12473
12434
  }
12474
- .exp--side-panel__container.exp--side-panel__container--lg {
12435
+ .c4p--side-panel__container.c4p--side-panel__container--lg {
12475
12436
  min-width: 40rem;
12476
12437
  max-width: 40rem;
12477
12438
  }
12478
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12479
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12480
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12481
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__actions-container.exp--action-set--lg {
12439
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12440
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12441
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12442
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__actions-container.c4p--action-set--lg {
12482
12443
  min-width: 40rem;
12483
12444
  max-width: 40rem;
12484
12445
  }
12485
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--lg {
12446
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
12486
12447
  min-width: 40rem;
12487
12448
  max-width: 40rem;
12488
12449
  right: 0;
@@ -12498,7 +12459,7 @@ a.bx--overflow-menu-options__btn::before {
12498
12459
  transform: translateX(0);
12499
12460
  }
12500
12461
  }
12501
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--lg {
12462
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
12502
12463
  min-width: 40rem;
12503
12464
  max-width: 40rem;
12504
12465
  left: 0;
@@ -12514,18 +12475,18 @@ a.bx--overflow-menu-options__btn::before {
12514
12475
  transform: translateX(0);
12515
12476
  }
12516
12477
  }
12517
- .exp--side-panel__container.exp--side-panel__container--max {
12478
+ .c4p--side-panel__container.c4p--side-panel__container--max {
12518
12479
  min-width: 75%;
12519
12480
  max-width: 75%;
12520
12481
  }
12521
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12522
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12523
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12524
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__actions-container.exp--action-set--max {
12482
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12483
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12484
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12485
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__actions-container.c4p--action-set--max {
12525
12486
  min-width: 75%;
12526
12487
  max-width: 75%;
12527
12488
  }
12528
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--max {
12489
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--max {
12529
12490
  min-width: 75%;
12530
12491
  max-width: 75%;
12531
12492
  right: 0;
@@ -12541,7 +12502,7 @@ a.bx--overflow-menu-options__btn::before {
12541
12502
  transform: translateX(0);
12542
12503
  }
12543
12504
  }
12544
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--max {
12505
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--max {
12545
12506
  min-width: 75%;
12546
12507
  max-width: 75%;
12547
12508
  left: 0;
@@ -12557,10 +12518,10 @@ a.bx--overflow-menu-options__btn::before {
12557
12518
  transform: translateX(0);
12558
12519
  }
12559
12520
  }
12560
- .exp--side-panel__container.exp--side-panel__container-with-action-toolbar.exp--side-panel__with-condensed-header .exp--side-panel__title-container::before {
12521
+ .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
12561
12522
  content: none;
12562
12523
  }
12563
- .exp--side-panel__container.exp--side-panel__container-with-action-toolbar.exp--side-panel__with-condensed-header .exp--side-panel__action-toolbar::before {
12524
+ .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
12564
12525
  position: absolute;
12565
12526
  bottom: 0;
12566
12527
  left: 0;
@@ -12568,20 +12529,20 @@ a.bx--overflow-menu-options__btn::before {
12568
12529
  height: 1px;
12569
12530
  background-color: var(--cds-decorative-01, #e0e0e0);
12570
12531
  content: "";
12571
- opacity: var(--exp--side-panel--divider-opacity);
12532
+ opacity: var(--c4p--side-panel--divider-opacity);
12572
12533
  }
12573
- .exp--side-panel__container.exp--side-panel__container-without-overlay {
12534
+ .c4p--side-panel__container.c4p--side-panel__container-without-overlay {
12574
12535
  box-shadow: 0 var(--cds-spacing-01, 0.125rem) var(--cds-spacing-02, 0.25rem) var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
12575
12536
  }
12576
- .exp--side-panel__container .exp--side-panel__title-container {
12537
+ .c4p--side-panel__container .c4p--side-panel__title-container {
12577
12538
  position: sticky;
12578
12539
  z-index: 4;
12579
12540
  top: 0;
12580
- height: calc(var(--exp--side-panel--title-container-height) - var(--exp--side-panel--label-text-height));
12541
+ height: calc(var(--c4p--side-panel--title-container-height) - var(--c4p--side-panel--label-text-height));
12581
12542
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
12582
12543
  background-color: var(--cds-ui-01, #f4f4f4);
12583
12544
  }
12584
- .exp--side-panel__container .exp--side-panel__title-container::before {
12545
+ .c4p--side-panel__container .c4p--side-panel__title-container::before {
12585
12546
  position: absolute;
12586
12547
  bottom: 0;
12587
12548
  left: 0;
@@ -12589,34 +12550,34 @@ a.bx--overflow-menu-options__btn::before {
12589
12550
  height: 1px;
12590
12551
  background-color: var(--cds-decorative-01, #e0e0e0);
12591
12552
  content: "";
12592
- opacity: var(--exp--side-panel--divider-opacity);
12553
+ opacity: var(--c4p--side-panel--divider-opacity);
12593
12554
  }
12594
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__on-detail-step .exp--side-panel__collapsed-title-text {
12555
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
12595
12556
  top: var(--cds-spacing-09, 3rem);
12596
12557
  }
12597
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title {
12558
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
12598
12559
  padding: 0;
12599
12560
  }
12600
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title.exp--side-panel__on-detail-step-without-title {
12561
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title.c4p--side-panel__on-detail-step-without-title {
12601
12562
  height: calc(var(--cds-spacing-08, 2.5rem) + var(--cds-spacing-02, 0.25rem));
12602
12563
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
12603
12564
  }
12604
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title::before {
12565
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title::before {
12605
12566
  background-color: transparent;
12606
12567
  }
12607
- .exp--side-panel__container.exp--side-panel__container-is-animating {
12568
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating {
12608
12569
  pointer-events: none;
12609
12570
  }
12610
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation {
12571
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
12611
12572
  top: 0;
12612
12573
  }
12613
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation {
12614
- top: var(--exp--side-panel--title-text-height);
12574
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
12575
+ top: var(--c4p--side-panel--title-text-height);
12615
12576
  }
12616
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation {
12617
- top: calc(var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height));
12577
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
12578
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
12618
12579
  }
12619
- .exp--side-panel__container .exp--side-panel__title-text {
12580
+ .c4p--side-panel__container .c4p--side-panel__title-text {
12620
12581
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
12621
12582
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12622
12583
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -12629,22 +12590,22 @@ a.bx--overflow-menu-options__btn::before {
12629
12590
  position: inherit;
12630
12591
  z-index: 4;
12631
12592
  background-color: var(--cds-ui-01, #f4f4f4);
12632
- opacity: var(--exp--side-panel--subtitle-opacity);
12633
- transform: translateY(var(--exp--side-panel--title-y-position));
12593
+ opacity: var(--c4p--side-panel--subtitle-opacity);
12594
+ transform: translateY(var(--c4p--side-panel--title-y-position));
12634
12595
  }
12635
- .exp--side-panel__container .exp--side-panel__label-text {
12596
+ .c4p--side-panel__container .c4p--side-panel__label-text {
12636
12597
  font-size: var(--cds-label-01-font-size, 0.75rem);
12637
12598
  font-weight: var(--cds-label-01-font-weight, 400);
12638
12599
  line-height: var(--cds-label-01-line-height, 1.33333);
12639
12600
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
12640
12601
  overflow: hidden;
12641
12602
  padding-right: var(--cds-spacing-05, 1rem);
12642
- opacity: var(--exp--side-panel--subtitle-opacity);
12603
+ opacity: var(--c4p--side-panel--subtitle-opacity);
12643
12604
  text-overflow: ellipsis;
12644
- transform: translateY(var(--exp--side-panel--title-y-position));
12605
+ transform: translateY(var(--c4p--side-panel--title-y-position));
12645
12606
  white-space: nowrap;
12646
12607
  }
12647
- .exp--side-panel__container .exp--side-panel__collapsed-title-text {
12608
+ .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
12648
12609
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
12649
12610
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
12650
12611
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -12656,10 +12617,10 @@ a.bx--overflow-menu-options__btn::before {
12656
12617
  -webkit-line-clamp: 2;
12657
12618
  position: absolute;
12658
12619
  top: var(--cds-spacing-05, 1rem);
12659
- opacity: var(--exp--side-panel--divider-opacity);
12660
- transform: translateY(var(--exp--side-panel--collapsed-title-y-position));
12620
+ opacity: var(--c4p--side-panel--divider-opacity);
12621
+ transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
12661
12622
  }
12662
- .exp--side-panel__container .exp--side-panel__subtitle-text {
12623
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text {
12663
12624
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
12664
12625
  font-weight: var(--cds-body-short-01-font-weight, 400);
12665
12626
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -12668,65 +12629,65 @@ a.bx--overflow-menu-options__btn::before {
12668
12629
  padding: 0 var(--cds-spacing-09, 3rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
12669
12630
  -webkit-box-orient: vertical;
12670
12631
  -webkit-line-clamp: 3;
12671
- opacity: var(--exp--side-panel--subtitle-opacity);
12632
+ opacity: var(--c4p--side-panel--subtitle-opacity);
12672
12633
  }
12673
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation {
12634
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
12674
12635
  position: fixed;
12675
12636
  z-index: 2;
12676
- top: calc(var(--exp--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
12637
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
12677
12638
  background-color: var(--cds-ui-01, #f4f4f4);
12678
12639
  }
12679
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation.exp--side-panel__subtitle-text-is-animating {
12680
- top: var(--exp--side-panel--title-text-height);
12640
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
12641
+ top: var(--c4p--side-panel--title-text-height);
12681
12642
  }
12682
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-without-title {
12643
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
12683
12644
  padding-top: var(--cds-spacing-05, 1rem);
12684
12645
  padding-right: var(--cds-spacing-09, 3rem);
12685
12646
  }
12686
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation.exp--side-panel__title-container-is-animating {
12647
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
12687
12648
  top: 0;
12688
12649
  }
12689
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation {
12650
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
12690
12651
  position: fixed;
12691
12652
  top: var(--cds-spacing-09, 3rem);
12692
- height: var(--exp--side-panel--title-text-height);
12653
+ height: var(--c4p--side-panel--title-text-height);
12693
12654
  }
12694
- .exp--side-panel__container .exp--side-panel__inner-content {
12655
+ .c4p--side-panel__container .c4p--side-panel__inner-content {
12695
12656
  overflow: auto;
12696
12657
  height: calc(100vh - 3rem);
12697
- margin-top: calc(var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height) + var(--exp--side-panel--action-bar-container-height));
12658
+ margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height));
12698
12659
  overflow-x: hidden;
12699
12660
  }
12700
- .exp--side-panel__container .exp--side-panel__inner-content-with-actions {
12701
- height: calc(100vh - (var(--exp--side-panel--content-bottom-padding) + 2rem));
12661
+ .c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
12662
+ height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
12702
12663
  }
12703
- .exp--side-panel__container .exp--side-panel__inner-content.exp--side-panel__static-inner-content {
12704
- height: calc(100vh - (var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height) + var(--exp--side-panel--action-bar-container-height)) + -1 * (var(--cds-spacing-09, 3rem) + var(--cds-spacing-10, 4rem)));
12664
+ .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content {
12665
+ height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height)) + -1 * (var(--cds-spacing-09, 3rem) + var(--cds-spacing-10, 4rem)));
12705
12666
  padding-top: var(--cds-spacing-05, 1rem);
12706
12667
  }
12707
- .exp--side-panel__container .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation {
12668
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
12708
12669
  position: fixed;
12709
12670
  top: calc(
12710
- var(--exp--side-panel--title-text-height) +
12711
- var(--exp--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12671
+ var(--c4p--side-panel--title-text-height) +
12672
+ var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12712
12673
  );
12713
12674
  width: 100%;
12714
12675
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
12715
12676
  }
12716
- .exp--side-panel__container .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation + .exp--side-panel__body-content {
12677
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
12717
12678
  margin-top: calc(
12718
- var(--exp--side-panel--title-text-height) +
12719
- var(--exp--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12679
+ var(--c4p--side-panel--title-text-height) +
12680
+ var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12720
12681
  );
12721
12682
  }
12722
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation.exp--side-panel__subtitle-text-no-animation-no-action-toolbar {
12683
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
12723
12684
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
12724
12685
  margin-bottom: var(--cds-spacing-05, 1rem);
12725
12686
  }
12726
- .exp--side-panel__container .exp--side-panel__action-toolbar {
12687
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar {
12727
12688
  position: sticky;
12728
12689
  z-index: 4;
12729
- top: var(--exp--side-panel--title-height);
12690
+ top: var(--c4p--side-panel--title-height);
12730
12691
  display: flex;
12731
12692
  align-items: center;
12732
12693
  justify-content: flex-start;
@@ -12736,32 +12697,32 @@ a.bx--overflow-menu-options__btn::before {
12736
12697
  transition: transform 150ms;
12737
12698
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
12738
12699
  }
12739
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button {
12700
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
12740
12701
  min-width: 2rem;
12741
12702
  }
12742
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-icon-only-button {
12703
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button {
12743
12704
  padding: 0;
12744
12705
  color: var(--cds-text-01, #161616);
12745
12706
  }
12746
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-icon-only-button svg {
12707
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button svg {
12747
12708
  margin-left: var(--cds-spacing-03, 0.5rem);
12748
12709
  }
12749
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-leading-button {
12710
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-leading-button {
12750
12711
  margin-right: var(--cds-spacing-03, 0.5rem);
12751
12712
  }
12752
- .exp--side-panel__container .bx--btn.exp--side-panel__navigation-back-button {
12713
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__navigation-back-button {
12753
12714
  position: relative;
12754
12715
  z-index: 5;
12755
12716
  top: calc(-1 * var(--cds-spacing-03, 0.5rem));
12756
12717
  left: calc(-1 * var(--cds-spacing-03, 0.5rem));
12757
12718
  }
12758
- .exp--side-panel__container .bx--btn.exp--side-panel__navigation-back-button,
12759
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button {
12719
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__navigation-back-button,
12720
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button {
12760
12721
  min-width: 2rem;
12761
12722
  padding: 0;
12762
12723
  color: var(--cds-text-01, #161616);
12763
12724
  }
12764
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button {
12725
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button {
12765
12726
  position: absolute;
12766
12727
  z-index: 5;
12767
12728
  top: var(--cds-spacing-03, 0.5rem);
@@ -12771,53 +12732,53 @@ a.bx--overflow-menu-options__btn::before {
12771
12732
  justify-content: center;
12772
12733
  background-color: var(--cds-ui-01, #f4f4f4);
12773
12734
  }
12774
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button .bx--btn__icon {
12735
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button .bx--btn__icon {
12775
12736
  margin: 0;
12776
12737
  }
12777
- .exp--side-panel__container .exp--side-panel__body-content {
12738
+ .c4p--side-panel__container .c4p--side-panel__body-content {
12778
12739
  padding: var(--cds-spacing-05, 1rem);
12779
12740
  padding-top: 0;
12780
12741
  }
12781
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__actions-container.exp--action-set--max {
12742
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--max {
12782
12743
  min-width: 100%;
12783
12744
  max-width: 100%;
12784
12745
  }
12785
- .exp--side-panel__container .exp--side-panel__actions-container {
12746
+ .c4p--side-panel__container .c4p--side-panel__actions-container {
12786
12747
  position: fixed;
12787
12748
  bottom: 0;
12788
12749
  border-top: 1px solid var(--cds-decorative-01, #e0e0e0);
12789
12750
  background-color: var(--cds-ui-01, #f4f4f4);
12790
12751
  }
12791
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max {
12752
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max {
12792
12753
  flex-direction: column;
12793
12754
  }
12794
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max .exp--action-set__action-button {
12755
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max .c4p--action-set__action-button {
12795
12756
  width: 100%;
12796
12757
  max-width: 100%;
12797
12758
  }
12798
12759
  @media (min-width: 42rem) {
12799
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max {
12760
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max {
12800
12761
  flex-direction: row;
12801
12762
  }
12802
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max .exp--action-set__action-button {
12763
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max .c4p--action-set__action-button {
12803
12764
  width: 25%;
12804
12765
  }
12805
12766
  }
12806
- .exp--side-panel__container .exp--side-panel__actions-container .exp--action-set__action-button {
12767
+ .c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
12807
12768
  height: var(--cds-layout-05, 4rem);
12808
12769
  }
12809
- .exp--side-panel__container .exp--side-panel__actions-container.exp--side-panel__actions-container-condensed .exp--action-set__action-button {
12770
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
12810
12771
  height: var(--cds-layout-04, 3rem);
12811
12772
  }
12812
12773
 
12813
- .exp--side-panel__container .bx--text-input,
12814
- .exp--side-panel__container .bx--text-area,
12815
- .exp--side-panel__container .bx--search-input,
12816
- .exp--side-panel__container .bx--select-input,
12817
- .exp--side-panel__container .bx--dropdown,
12818
- .exp--side-panel__container .bx--dropdown-list,
12819
- .exp--side-panel__container .bx--number input[type=number],
12820
- .exp--side-panel__container .bx--date-picker__input {
12774
+ .c4p--side-panel__container .bx--text-input,
12775
+ .c4p--side-panel__container .bx--text-area,
12776
+ .c4p--side-panel__container .bx--search-input,
12777
+ .c4p--side-panel__container .bx--select-input,
12778
+ .c4p--side-panel__container .bx--dropdown,
12779
+ .c4p--side-panel__container .bx--dropdown-list,
12780
+ .c4p--side-panel__container .bx--number input[type=number],
12781
+ .c4p--side-panel__container .bx--date-picker__input {
12821
12782
  background-color: var(--cds-field-02, #ffffff);
12822
12783
  }
12823
12784
 
@@ -12837,7 +12798,7 @@ a.bx--overflow-menu-options__btn::before {
12837
12798
  opacity: 0;
12838
12799
  }
12839
12800
  }
12840
- .exp--side-panel__visually-hidden {
12801
+ .c4p--side-panel__visually-hidden {
12841
12802
  position: absolute;
12842
12803
  overflow: hidden;
12843
12804
  width: 1px;
@@ -12850,7 +12811,7 @@ a.bx--overflow-menu-options__btn::before {
12850
12811
  white-space: nowrap;
12851
12812
  }
12852
12813
 
12853
- .exp--side-panel__overlay {
12814
+ .c4p--side-panel__overlay {
12854
12815
  position: fixed;
12855
12816
  z-index: 6000;
12856
12817
  top: 0;
@@ -12864,17 +12825,17 @@ a.bx--overflow-menu-options__btn::before {
12864
12825
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
12865
12826
  }
12866
12827
 
12867
- .exp--create-side-panel.exp--side-panel__container .exp--create-side-panel__content-text {
12828
+ .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
12868
12829
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
12869
12830
  }
12870
12831
 
12871
- .exp--create-side-panel.exp--side-panel__container--xs .exp--side-panel__title-text {
12832
+ .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
12872
12833
  width: calc(16rem - var(--cds-spacing-05, 1rem));
12873
12834
  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
12874
12835
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12875
12836
  }
12876
12837
 
12877
- .exp--create-side-panel.exp--side-panel__container--xs .exp--side-panel__subtitle-text {
12838
+ .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
12878
12839
  width: calc(16rem - var(--cds-spacing-05, 1rem));
12879
12840
  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
12880
12841
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12882,13 +12843,13 @@ a.bx--overflow-menu-options__btn::before {
12882
12843
  color: var(--cds-text-02, #525252);
12883
12844
  }
12884
12845
 
12885
- .exp--create-side-panel.exp--side-panel__container--sm .exp--side-panel__title-text {
12846
+ .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
12886
12847
  width: calc(20rem - var(--cds-spacing-05, 1rem));
12887
12848
  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
12888
12849
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12889
12850
  }
12890
12851
 
12891
- .exp--create-side-panel.exp--side-panel__container--sm .exp--side-panel__subtitle-text {
12852
+ .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
12892
12853
  width: calc(20rem - var(--cds-spacing-05, 1rem));
12893
12854
  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
12894
12855
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12896,13 +12857,13 @@ a.bx--overflow-menu-options__btn::before {
12896
12857
  color: var(--cds-text-02, #525252);
12897
12858
  }
12898
12859
 
12899
- .exp--create-side-panel.exp--side-panel__container--md .exp--side-panel__title-text {
12860
+ .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
12900
12861
  width: calc(30rem - var(--cds-spacing-05, 1rem));
12901
12862
  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
12902
12863
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12903
12864
  }
12904
12865
 
12905
- .exp--create-side-panel.exp--side-panel__container--md .exp--side-panel__subtitle-text {
12866
+ .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
12906
12867
  width: calc(30rem - var(--cds-spacing-05, 1rem));
12907
12868
  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
12908
12869
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12910,13 +12871,13 @@ a.bx--overflow-menu-options__btn::before {
12910
12871
  color: var(--cds-text-02, #525252);
12911
12872
  }
12912
12873
 
12913
- .exp--create-side-panel.exp--side-panel__container--lg .exp--side-panel__title-text {
12874
+ .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
12914
12875
  width: calc(40rem - var(--cds-spacing-05, 1rem));
12915
12876
  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
12916
12877
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12917
12878
  }
12918
12879
 
12919
- .exp--create-side-panel.exp--side-panel__container--lg .exp--side-panel__subtitle-text {
12880
+ .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
12920
12881
  width: calc(40rem - var(--cds-spacing-05, 1rem));
12921
12882
  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
12922
12883
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12924,13 +12885,13 @@ a.bx--overflow-menu-options__btn::before {
12924
12885
  color: var(--cds-text-02, #525252);
12925
12886
  }
12926
12887
 
12927
- .exp--create-side-panel.exp--side-panel__container--max .exp--side-panel__title-text {
12888
+ .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__title-text {
12928
12889
  width: calc(75% - var(--cds-spacing-05, 1rem));
12929
12890
  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
12930
12891
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12931
12892
  }
12932
12893
 
12933
- .exp--create-side-panel.exp--side-panel__container--max .exp--side-panel__subtitle-text {
12894
+ .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__subtitle-text {
12934
12895
  width: calc(75% - var(--cds-spacing-05, 1rem));
12935
12896
  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
12936
12897
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12938,19 +12899,19 @@ a.bx--overflow-menu-options__btn::before {
12938
12899
  color: var(--cds-text-02, #525252);
12939
12900
  }
12940
12901
 
12941
- .bx--form.exp--create-side-panel__form {
12902
+ .bx--form.c4p--create-side-panel__form {
12942
12903
  padding-top: var(--cds-spacing-05, 1rem);
12943
12904
  }
12944
12905
 
12945
- .exp--create-side-panel__form.bx--fieldset {
12906
+ .c4p--create-side-panel__form.bx--fieldset {
12946
12907
  padding-top: var(--cds-spacing-03, 0.5rem);
12947
12908
  }
12948
12909
 
12949
- .exp--create-side-panel__form > * {
12910
+ .c4p--create-side-panel__form > * {
12950
12911
  margin-bottom: var(--cds-spacing-05, 1rem);
12951
12912
  }
12952
12913
 
12953
- .exp--create-side-panel__form-title-text {
12914
+ .c4p--create-side-panel__form-title-text {
12954
12915
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
12955
12916
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
12956
12917
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -12958,18 +12919,18 @@ a.bx--overflow-menu-options__btn::before {
12958
12919
  padding-bottom: var(--cds-spacing-03, 0.5rem);
12959
12920
  }
12960
12921
 
12961
- .exp--create-side-panel__form-description-text {
12922
+ .c4p--create-side-panel__form-description-text {
12962
12923
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
12963
12924
  font-weight: var(--cds-body-long-01-font-weight, 400);
12964
12925
  line-height: var(--cds-body-long-01-line-height, 1.42857);
12965
12926
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
12966
12927
  }
12967
12928
 
12968
- .exp--create-side-panel.exp--side-panel .bx--btn.exp--side-panel__close-button {
12929
+ .c4p--create-side-panel.c4p--side-panel .bx--btn.c4p--side-panel__close-button {
12969
12930
  display: none;
12970
12931
  }
12971
12932
 
12972
- .exp--create-side-panel__title {
12933
+ .c4p--create-side-panel__title {
12973
12934
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
12974
12935
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12975
12936
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -12977,7 +12938,7 @@ a.bx--overflow-menu-options__btn::before {
12977
12938
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12978
12939
  }
12979
12940
 
12980
- .exp--create-side-panel__subtitle {
12941
+ .c4p--create-side-panel__subtitle {
12981
12942
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
12982
12943
  font-weight: var(--cds-body-short-01-font-weight, 400);
12983
12944
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -12986,7 +12947,7 @@ a.bx--overflow-menu-options__btn::before {
12986
12947
  color: var(--cds-text-02, #525252);
12987
12948
  }
12988
12949
 
12989
- .exp--side-panel .exp--create-side-panel__actions-container {
12950
+ .c4p--side-panel .c4p--create-side-panel__actions-container {
12990
12951
  position: absolute;
12991
12952
  z-index: 4;
12992
12953
  bottom: 0;
@@ -13893,114 +13854,114 @@ a.bx--side-nav__link--current::before {
13893
13854
  stroke-dashoffset: 0;
13894
13855
  }
13895
13856
  }
13896
- .exp--tearsheet.exp--tearsheet {
13857
+ .c4p--tearsheet.c4p--tearsheet {
13897
13858
  z-index: 9001;
13898
13859
  align-items: flex-end;
13899
13860
  color: var(--cds-text-01, #161616);
13900
13861
  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);
13901
- --exp--tearsheet--stacking-scale-factor-single: 0.95;
13902
- --exp--tearsheet--stacking-scale-factor-double: 0.9;
13862
+ --c4p--tearsheet--stacking-scale-factor-single: 0.95;
13863
+ --c4p--tearsheet--stacking-scale-factor-double: 0.9;
13903
13864
  }
13904
- .exp--tearsheet.is-visible {
13865
+ .c4p--tearsheet.is-visible {
13905
13866
  z-index: 9000;
13906
13867
  align-items: flex-end;
13907
13868
  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13908
13869
  }
13909
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 {
13870
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
13910
13871
  z-index: 8999;
13911
13872
  background-color: rgba(22, 22, 22, 0.33);
13912
13873
  }
13913
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 {
13874
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
13914
13875
  z-index: 8998;
13915
13876
  background-color: rgba(22, 22, 22, 0.11);
13916
13877
  }
13917
- .exp--tearsheet.exp--tearsheet--stacked-2-of-3 {
13878
+ .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
13918
13879
  z-index: 8999;
13919
13880
  background-color: rgba(22, 22, 22, 0.25);
13920
13881
  }
13921
- .exp--tearsheet.exp--tearsheet--stacked-2-of-2, .exp--tearsheet.exp--tearsheet--stacked-3-of-3 {
13882
+ .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
13922
13883
  background-color: rgba(22, 22, 22, 0.25);
13923
13884
  }
13924
- .exp--tearsheet .exp--tearsheet__container {
13885
+ .c4p--tearsheet .c4p--tearsheet__container {
13925
13886
  top: auto;
13926
13887
  height: 100%;
13927
13888
  max-height: calc(100% - var(--cds-spacing-09, 3rem));
13928
13889
  transform: translate3d(0, min(95vh, 500px), 0);
13929
13890
  }
13930
- .exp--tearsheet.exp--tearsheet.exp--tearsheet .exp--tearsheet__container {
13891
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
13931
13892
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
13932
13893
  }
13933
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 .exp--tearsheet__container, .exp--tearsheet.exp--tearsheet--stacked-2-of-3 .exp--tearsheet__container {
13894
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container {
13934
13895
  max-height: calc(100% - var(--cds-spacing-09, 3rem) + var(--cds-spacing-05, 1rem));
13935
13896
  }
13936
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 .exp--tearsheet__container {
13897
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
13937
13898
  max-height: calc(100% - var(--cds-spacing-09, 3rem) + (2 * var(--cds-spacing-05, 1rem)));
13938
13899
  }
13939
- .exp--tearsheet .exp--tearsheet__container--lower {
13900
+ .c4p--tearsheet .c4p--tearsheet__container--lower {
13940
13901
  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)));
13941
13902
  }
13942
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 .exp--tearsheet__container--lower, .exp--tearsheet.exp--tearsheet--stacked-2-of-3 .exp--tearsheet__container--lower {
13903
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
13943
13904
  max-height: calc(
13944
13905
  100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + var(--cds-spacing-05, 1rem)
13945
13906
  );
13946
13907
  }
13947
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 .exp--tearsheet__container--lower {
13908
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
13948
13909
  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + (2 * var(--cds-spacing-05, 1rem)));
13949
13910
  }
13950
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__container {
13911
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
13951
13912
  width: 100%;
13952
13913
  }
13953
13914
  @media (min-width: 42rem) {
13954
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__container {
13915
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
13955
13916
  width: calc(100% - (2 * var(--cds-spacing-10, 4rem)));
13956
13917
  }
13957
13918
  }
13958
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2.is-visible .exp--tearsheet__container, .exp--tearsheet.exp--tearsheet--stacked-2-of-3.is-visible .exp--tearsheet__container {
13959
- transform: scale(var(--exp--tearsheet--stacking-scale-factor-single));
13919
+ .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 {
13920
+ transform: scale(var(--c4p--tearsheet--stacking-scale-factor-single));
13960
13921
  }
13961
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3.is-visible .exp--tearsheet__container {
13962
- transform: scale(var(--exp--tearsheet--stacking-scale-factor-double));
13922
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3.is-visible .c4p--tearsheet__container {
13923
+ transform: scale(var(--c4p--tearsheet--stacking-scale-factor-double));
13963
13924
  }
13964
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header {
13925
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
13965
13926
  padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-07, 2rem);
13966
13927
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
13967
13928
  margin: 0;
13968
13929
  }
13969
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header--with-nav {
13930
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-nav {
13970
13931
  padding-bottom: 0;
13971
13932
  }
13972
- .exp--tearsheet.exp--tearsheet--narrow .exp--tearsheet__header {
13933
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
13973
13934
  padding: var(--cds-spacing-05, 1rem);
13974
13935
  margin: 0;
13975
13936
  }
13976
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header--with-close-icon {
13937
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-close-icon {
13977
13938
  padding-right: var(--cds-spacing-05, 1rem);
13978
13939
  margin-right: var(--cds-spacing-09, 3rem);
13979
13940
  }
13980
- .exp--tearsheet .exp--tearsheet__header-content {
13941
+ .c4p--tearsheet .c4p--tearsheet__header-content {
13981
13942
  display: flex;
13982
13943
  justify-content: space-between;
13983
13944
  }
13984
- .exp--tearsheet .exp--tearsheet__header-fields {
13945
+ .c4p--tearsheet .c4p--tearsheet__header-fields {
13985
13946
  flex: 1 1 100%;
13986
13947
  }
13987
- .exp--tearsheet .exp--tearsheet__header-actions {
13948
+ .c4p--tearsheet .c4p--tearsheet__header-actions {
13988
13949
  flex: 0 0 auto;
13989
13950
  padding-left: var(--cds-spacing-06, 1.5rem);
13990
13951
  }
13991
- .exp--tearsheet .exp--tearsheet__header-actions .bx--btn-set .bx--btn:not(:first-of-type) {
13952
+ .c4p--tearsheet .c4p--tearsheet__header-actions .bx--btn-set .bx--btn:not(:first-of-type) {
13992
13953
  margin-left: var(--cds-spacing-03, 0.5rem);
13993
13954
  }
13994
- .exp--tearsheet .exp--tearsheet__header--no-close-icon {
13955
+ .c4p--tearsheet .c4p--tearsheet__header--no-close-icon {
13995
13956
  display: none;
13996
13957
  }
13997
- .exp--tearsheet.exp--tearsheet--wide .bx--modal-header__heading.exp--tearsheet__heading {
13958
+ .c4p--tearsheet.c4p--tearsheet--wide .bx--modal-header__heading.c4p--tearsheet__heading {
13998
13959
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
13999
13960
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
14000
13961
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
14001
13962
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
14002
13963
  }
14003
- .exp--tearsheet .exp--tearsheet__header-description {
13964
+ .c4p--tearsheet .c4p--tearsheet__header-description {
14004
13965
  display: -webkit-box;
14005
13966
  overflow: hidden;
14006
13967
  max-width: 100%;
@@ -14013,90 +13974,90 @@ a.bx--side-nav__link--current::before {
14013
13974
  -webkit-line-clamp: 2;
14014
13975
  }
14015
13976
  @media (min-width: 42rem) {
14016
- .exp--tearsheet .exp--tearsheet__header-description {
13977
+ .c4p--tearsheet .c4p--tearsheet__header-description {
14017
13978
  max-width: 60%;
14018
13979
  }
14019
13980
  }
14020
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header-description {
13981
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header-description {
14021
13982
  margin-top: var(--cds-spacing-03, 0.5rem);
14022
13983
  }
14023
- .exp--tearsheet .exp--tearsheet__header-navigation {
13984
+ .c4p--tearsheet .c4p--tearsheet__header-navigation {
14024
13985
  margin: var(--cds-spacing-04, 0.75rem) 0 0;
14025
13986
  }
14026
- .exp--tearsheet.exp--tearsheet .exp--tearsheet__body {
13987
+ .c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__body {
14027
13988
  display: flex;
14028
13989
  flex-direction: row;
14029
13990
  padding: 0;
14030
13991
  margin: 0;
14031
13992
  }
14032
- .exp--tearsheet .exp--tearsheet__resize-detector {
13993
+ .c4p--tearsheet .c4p--tearsheet__resize-detector {
14033
13994
  width: 100%;
14034
13995
  height: 0;
14035
13996
  }
14036
- .exp--tearsheet .exp--tearsheet__influencer {
13997
+ .c4p--tearsheet .c4p--tearsheet__influencer {
14037
13998
  flex: 0 0 257px;
14038
13999
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
14039
14000
  overflow-y: auto;
14040
14001
  }
14041
- .exp--tearsheet .exp--tearsheet__influencer--wide {
14002
+ .c4p--tearsheet .c4p--tearsheet__influencer--wide {
14042
14003
  flex-basis: 321px;
14043
14004
  }
14044
- .exp--tearsheet .exp--tearsheet__right {
14005
+ .c4p--tearsheet .c4p--tearsheet__right {
14045
14006
  display: grid;
14046
14007
  flex-grow: 1;
14047
14008
  grid-template-columns: 100%;
14048
14009
  grid-template-rows: 1fr auto;
14049
14010
  }
14050
- .exp--tearsheet .exp--tearsheet__main {
14011
+ .c4p--tearsheet .c4p--tearsheet__main {
14051
14012
  display: flex;
14052
14013
  flex-direction: row;
14053
14014
  grid-column: 1/-1;
14054
14015
  grid-row: 1/-1;
14055
14016
  }
14056
- .exp--tearsheet .exp--tearsheet__main .exp--tearsheet__influencer {
14017
+ .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14057
14018
  border-right: none;
14058
14019
  border-left: 1px solid var(--cds-ui-03, #e0e0e0);
14059
14020
  }
14060
- .exp--tearsheet .exp--tearsheet__content {
14021
+ .c4p--tearsheet .c4p--tearsheet__content {
14061
14022
  overflow: auto;
14062
14023
  flex-grow: 1;
14063
14024
  }
14064
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content {
14025
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
14065
14026
  background: var(--cds-ui-background, #ffffff);
14066
14027
  }
14067
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--pagination,
14068
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--pagination__control-buttons,
14069
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-input,
14070
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-area,
14071
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--search-input,
14072
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--select-input,
14073
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown,
14074
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown-list,
14075
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--number input[type=number],
14076
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--date-picker__input {
14028
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--pagination,
14029
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--pagination__control-buttons,
14030
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-input,
14031
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-area,
14032
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--search-input,
14033
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--select-input,
14034
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown,
14035
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown-list,
14036
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--number input[type=number],
14037
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--date-picker__input {
14077
14038
  background-color: var(--cds-field-01, #f4f4f4);
14078
14039
  }
14079
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-input--light,
14080
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-area--light,
14081
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--search--light .bx--search-input,
14082
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--select--light .bx--select-input,
14083
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown--light,
14084
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown--light .bx--dropdown-list,
14085
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--number--light input[type=number],
14086
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--date-picker--light .bx--date-picker__input {
14040
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-input--light,
14041
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-area--light,
14042
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--search--light .bx--search-input,
14043
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--select--light .bx--select-input,
14044
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown--light,
14045
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown--light .bx--dropdown-list,
14046
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--number--light input[type=number],
14047
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--date-picker--light .bx--date-picker__input {
14087
14048
  background-color: var(--cds-field-02, #ffffff);
14088
14049
  }
14089
- .exp--tearsheet .exp--tearsheet__button-container {
14050
+ .c4p--tearsheet .c4p--tearsheet__button-container {
14090
14051
  grid-column: 1/-1;
14091
14052
  grid-row: -1/-1;
14092
14053
  overflow-x: auto;
14093
14054
  }
14094
- .exp--tearsheet .exp--tearsheet__buttons {
14055
+ .c4p--tearsheet .c4p--tearsheet__buttons {
14095
14056
  display: inline-flex;
14096
14057
  min-width: 100%;
14097
14058
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14098
14059
  }
14099
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__buttons {
14060
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
14100
14061
  background: var(--cds-ui-background, #ffffff);
14101
14062
  }
14102
14063
 
@@ -14204,20 +14165,20 @@ a.bx--side-nav__link--current::before {
14204
14165
  transform: translateY(0);
14205
14166
  }
14206
14167
  }
14207
- .exp--tearsheet-create {
14208
- --exp--tearsheet-create--total-width: 0;
14168
+ .c4p--tearsheet-create {
14169
+ --c4p--tearsheet-create--total-width: 0;
14209
14170
  }
14210
14171
 
14211
- .exp--tearsheet-create .exp--tearsheet-create__step--hidden-step,
14212
- .exp--tearsheet-create .exp--tearsheet-create__step--hidden-section {
14172
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-step,
14173
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-section {
14213
14174
  display: none;
14214
14175
  }
14215
14176
 
14216
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-section {
14177
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-section {
14217
14178
  display: block;
14218
14179
  }
14219
14180
 
14220
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-step {
14181
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14221
14182
  animation: 400ms stepContentEntrance;
14222
14183
  animation-fill-mode: forwards;
14223
14184
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -14225,51 +14186,51 @@ a.bx--side-nav__link--current::before {
14225
14186
  }
14226
14187
 
14227
14188
  @media (prefers-reduced-motion) {
14228
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-step {
14189
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14229
14190
  animation: none;
14230
14191
  opacity: 1;
14231
14192
  }
14232
14193
  }
14233
- .exp--tearsheet-create .exp--tearsheet-create__content {
14194
+ .c4p--tearsheet-create .c4p--tearsheet-create__content {
14234
14195
  height: 100%;
14235
14196
  padding: var(--cds-spacing-06, 1.5rem);
14236
14197
  overflow-x: hidden;
14237
14198
  }
14238
14199
 
14239
- .exp--tearsheet-create .exp--tearsheet-create__content .bx--grid {
14200
+ .c4p--tearsheet-create .c4p--tearsheet-create__content .bx--grid {
14240
14201
  padding: 0;
14241
14202
  margin: 0;
14242
14203
  }
14243
14204
 
14244
- .exp--tearsheet-create .exp--tearsheet-create__step--heading {
14205
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--heading {
14245
14206
  padding-bottom: var(--cds-spacing-06, 1.5rem);
14246
14207
  }
14247
14208
 
14248
- .exp--tearsheet-create .bx--btn-set .bx--btn.bx--btn--disabled {
14209
+ .c4p--tearsheet-create .bx--btn-set .bx--btn.bx--btn--disabled {
14249
14210
  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
14250
14211
  }
14251
14212
 
14252
- .exp--tearsheet-create .bx--side-nav--ux {
14213
+ .c4p--tearsheet-create .bx--side-nav--ux {
14253
14214
  position: initial;
14254
14215
  background-color: transparent;
14255
14216
  }
14256
14217
 
14257
- .exp--tearsheet-create .exp--tearsheet-create__section--divider {
14218
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--divider {
14258
14219
  position: relative;
14259
14220
  display: block;
14260
- width: var(--exp--tearsheet-create--total-width);
14221
+ width: var(--c4p--tearsheet-create--total-width);
14261
14222
  height: 1px;
14262
14223
  margin: var(--cds-spacing-06, 1.5rem) calc(-1 * var(--cds-spacing-08, 2.5rem)) var(--cds-spacing-07, 2rem) calc(-1 * var(--cds-spacing-06, 1.5rem));
14263
14224
  background-color: var(--cds-ui-03, #e0e0e0);
14264
14225
  }
14265
14226
 
14266
- .exp--tearsheet-create .exp--tearsheet-create__step--title,
14267
- .exp--tearsheet-create .exp--tearsheet-create__section--title {
14227
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--title,
14228
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--title {
14268
14229
  margin-bottom: var(--cds-spacing-05, 1rem);
14269
14230
  }
14270
14231
 
14271
- .exp--tearsheet-create .exp--tearsheet-create__section--subtitle,
14272
- .exp--tearsheet-create .exp--tearsheet-create__step--subtitle {
14232
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--subtitle,
14233
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--subtitle {
14273
14234
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
14274
14235
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
14275
14236
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -14277,8 +14238,8 @@ a.bx--side-nav__link--current::before {
14277
14238
  margin-bottom: var(--cds-spacing-03, 0.5rem);
14278
14239
  }
14279
14240
 
14280
- .exp--tearsheet-create .exp--tearsheet-create__section--description,
14281
- .exp--tearsheet-create .exp--tearsheet-create__step--description {
14241
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--description,
14242
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--description {
14282
14243
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
14283
14244
  font-weight: var(--cds-body-long-01-font-weight, 400);
14284
14245
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -14286,11 +14247,11 @@ a.bx--side-nav__link--current::before {
14286
14247
  margin-bottom: var(--cds-spacing-06, 1.5rem);
14287
14248
  }
14288
14249
 
14289
- .exp--tearsheet-create .bx--fieldset {
14250
+ .c4p--tearsheet-create .bx--fieldset {
14290
14251
  margin-bottom: 0;
14291
14252
  }
14292
14253
 
14293
- .exp--tearsheet-create .exp--tearsheet-create__step--fieldset > * {
14254
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--fieldset > * {
14294
14255
  margin-bottom: var(--cds-spacing-05, 1rem);
14295
14256
  }
14296
14257
 
@@ -14469,37 +14430,37 @@ a.bx--side-nav__link--current::before {
14469
14430
  stroke-dashoffset: 0;
14470
14431
  }
14471
14432
  }
14472
- .exp--create-tearsheet-narrow .bx--modal-header__heading,
14473
- .exp--create-tearsheet-narrow .bx--modal-header__label,
14474
- .exp--create-tearsheet-narrow .exp--tearsheet__header-description {
14433
+ .c4p--create-tearsheet-narrow .bx--modal-header__heading,
14434
+ .c4p--create-tearsheet-narrow .bx--modal-header__label,
14435
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14475
14436
  max-width: 100%;
14476
14437
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
14477
14438
  }
14478
14439
 
14479
- .exp--create-tearsheet-narrow .exp--tearsheet__header-description {
14440
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14480
14441
  margin-top: var(--cds-spacing-02, 0.25rem);
14481
14442
  }
14482
14443
 
14483
- .exp--create-tearsheet-narrow .exp--tearsheet__header {
14444
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header {
14484
14445
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
14485
14446
  }
14486
14447
 
14487
- .exp--create-tearsheet-narrow .exp--tearsheet__content {
14448
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__content {
14488
14449
  padding: var(--cds-spacing-05, 1rem);
14489
14450
  }
14490
14451
 
14491
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form {
14452
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form {
14492
14453
  padding-top: var(--cds-spacing-05, 1rem);
14493
14454
  }
14494
14455
 
14495
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form > * {
14456
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > * {
14496
14457
  margin-bottom: var(--cds-spacing-05, 1rem);
14497
14458
  }
14498
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form > *:last-child {
14459
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > *:last-child {
14499
14460
  margin-bottom: 0;
14500
14461
  }
14501
14462
 
14502
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form-title-text {
14463
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
14503
14464
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
14504
14465
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
14505
14466
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -14507,7 +14468,7 @@ a.bx--side-nav__link--current::before {
14507
14468
  padding-bottom: var(--cds-spacing-03, 0.5rem);
14508
14469
  }
14509
14470
 
14510
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form-description-text {
14471
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
14511
14472
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
14512
14473
  font-weight: var(--cds-body-long-01-font-weight, 400);
14513
14474
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -14694,46 +14655,46 @@ a.bx--side-nav__link--current::before {
14694
14655
  margin-left: var(--cds-spacing-03, 0.5rem);
14695
14656
  }
14696
14657
 
14697
- .exp--empty-state {
14658
+ .c4p--empty-state {
14698
14659
  color: var(--cds-text-01, #161616);
14699
14660
  }
14700
- .exp--empty-state .exp--empty-state__header,
14701
- .exp--empty-state .exp--empty-state__subtitle {
14661
+ .c4p--empty-state .c4p--empty-state__header,
14662
+ .c4p--empty-state .c4p--empty-state__subtitle {
14702
14663
  padding-bottom: var(--cds-spacing-02, 0.25rem);
14703
14664
  margin: 0;
14704
14665
  }
14705
- .exp--empty-state .exp--empty-state__header--small {
14666
+ .c4p--empty-state .c4p--empty-state__header--small {
14706
14667
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
14707
14668
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
14708
14669
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
14709
14670
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
14710
14671
  }
14711
- .exp--empty-state .exp--empty-state__subtitle--small {
14672
+ .c4p--empty-state .c4p--empty-state__subtitle--small {
14712
14673
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
14713
14674
  font-weight: var(--cds-body-short-01-font-weight, 400);
14714
14675
  line-height: var(--cds-body-short-01-line-height, 1.28572);
14715
14676
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14716
14677
  }
14717
14678
 
14718
- .exp--empty-state__illustration.exp--empty-state__illustration--lg {
14679
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
14719
14680
  min-width: var(--cds-spacing-11, 5rem);
14720
14681
  max-width: var(--cds-spacing-11, 5rem);
14721
14682
  }
14722
- .exp--empty-state__illustration.exp--empty-state__illustration--sm {
14683
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
14723
14684
  min-width: var(--cds-spacing-10, 4rem);
14724
14685
  max-width: var(--cds-spacing-10, 4rem);
14725
14686
  }
14726
14687
 
14727
- .exp--empty-state__action-button,
14728
- .exp--empty-state__link {
14688
+ .c4p--empty-state__action-button,
14689
+ .c4p--empty-state__link {
14729
14690
  margin-top: var(--cds-spacing-06, 1.5rem);
14730
14691
  }
14731
14692
 
14732
- .exp--empty-state .exp--empty-state__action-button {
14693
+ .c4p--empty-state .c4p--empty-state__action-button {
14733
14694
  display: block;
14734
14695
  }
14735
14696
 
14736
- .exp--empty-state .exp--empty-state__link {
14697
+ .c4p--empty-state .c4p--empty-state__link {
14737
14698
  display: block;
14738
14699
  }
14739
14700
 
@@ -14785,19 +14746,19 @@ a.bx--side-nav__link--current::before {
14785
14746
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14786
14747
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14787
14748
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14788
- .exp--example-component {
14749
+ .c4p--example-component {
14789
14750
  display: flex;
14790
14751
  justify-content: flex-end;
14791
- --exp--example-component--border-color: transparent;
14752
+ --c4p--example-component--border-color: transparent;
14792
14753
  }
14793
14754
 
14794
- .exp--example-component.exp--example-component--boxed-set {
14795
- border: 10px solid var(--exp--example-component--border-color);
14755
+ .c4p--example-component.c4p--example-component--boxed-set {
14756
+ border: 10px solid var(--c4p--example-component--border-color);
14796
14757
  }
14797
14758
 
14798
- .exp--example-component.exp--example-component--shadow-set {
14759
+ .c4p--example-component.c4p--example-component--shadow-set {
14799
14760
  margin: var(--cds-spacing-04, 0.75rem);
14800
- box-shadow: 0 0 10px var(--exp--example-component--border-color);
14761
+ box-shadow: 0 0 10px var(--c4p--example-component--border-color);
14801
14762
  }
14802
14763
 
14803
14764
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15231,37 +15192,37 @@ a.bx--side-nav__link--current::before {
15231
15192
  stroke-dashoffset: 276.4608;
15232
15193
  }
15233
15194
  }
15234
- .exp--export-modal .bx--modal-footer .bx--btn {
15195
+ .c4p--export-modal .bx--modal-footer .bx--btn {
15235
15196
  max-width: none;
15236
15197
  }
15237
15198
 
15238
- .exp--export-modal.bx--modal .bx--modal-content {
15199
+ .c4p--export-modal.bx--modal .bx--modal-content {
15239
15200
  padding-right: var(--cds-spacing-05, 1rem);
15240
15201
  }
15241
15202
 
15242
- .exp--export-modal .bx--modal-close {
15203
+ .c4p--export-modal .bx--modal-close {
15243
15204
  display: none;
15244
15205
  }
15245
15206
 
15246
- .exp--export-modal__body {
15207
+ .c4p--export-modal__body {
15247
15208
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
15248
15209
  margin-bottom: var(--cds-spacing-05, 1rem);
15249
15210
  }
15250
15211
 
15251
- .exp--export-modal__messaging {
15212
+ .c4p--export-modal__messaging {
15252
15213
  display: flex;
15253
15214
  align-items: center;
15254
15215
  }
15255
15216
 
15256
- .exp--export-modal__messaging p {
15217
+ .c4p--export-modal__messaging p {
15257
15218
  margin-left: var(--cds-spacing-03, 0.5rem);
15258
15219
  }
15259
15220
 
15260
- .exp--export-modal__checkmark-icon {
15221
+ .c4p--export-modal__checkmark-icon {
15261
15222
  fill: var(--cds-interactive-01, #0f62fe);
15262
15223
  }
15263
15224
 
15264
- .exp--export-modal__error-icon {
15225
+ .c4p--export-modal__error-icon {
15265
15226
  fill: var(--cds-danger, #da1e28);
15266
15227
  }
15267
15228
 
@@ -15339,61 +15300,61 @@ a.bx--side-nav__link--current::before {
15339
15300
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15340
15301
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15341
15302
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15342
- .exp--card {
15303
+ .c4p--card {
15343
15304
  background: var(--cds-ui-01, #f4f4f4);
15344
15305
  color: var(--cds-text-01, #161616);
15345
15306
  }
15346
15307
 
15347
- .exp--card__clickable {
15308
+ .c4p--card__clickable {
15348
15309
  cursor: pointer;
15349
15310
  transition: background 110ms;
15350
15311
  }
15351
15312
 
15352
- .exp--card__clickable:hover {
15313
+ .c4p--card__clickable:hover {
15353
15314
  background: var(--cds-hover-ui, #e5e5e5);
15354
15315
  }
15355
15316
 
15356
- .exp--card__media-left {
15317
+ .c4p--card__media-left {
15357
15318
  display: flex;
15358
15319
  flex-direction: row;
15359
15320
  }
15360
15321
 
15361
- .exp--card__media-left .exp--card__content-container {
15322
+ .c4p--card__media-left .c4p--card__content-container {
15362
15323
  display: flex;
15363
15324
  flex: 1;
15364
15325
  flex-direction: column;
15365
15326
  }
15366
15327
 
15367
- .exp--card__media-left .exp--card__footer {
15328
+ .c4p--card__media-left .c4p--card__footer {
15368
15329
  align-self: flex-end;
15369
15330
  margin-top: auto;
15370
15331
  }
15371
15332
 
15372
- .exp--card__media > * {
15333
+ .c4p--card__media > * {
15373
15334
  display: block;
15374
15335
  max-width: 100%;
15375
15336
  }
15376
15337
 
15377
- .exp--card__header {
15338
+ .c4p--card__header {
15378
15339
  padding: var(--cds-spacing-05, 1rem);
15379
15340
  }
15380
15341
 
15381
- .exp--card__header-label-only {
15342
+ .c4p--card__header-label-only {
15382
15343
  padding-bottom: var(--cds-spacing-03, 0.5rem);
15383
15344
  }
15384
15345
 
15385
- .exp--card__header-label-only .exp--card__label {
15346
+ .c4p--card__header-label-only .c4p--card__label {
15386
15347
  margin-bottom: 0;
15387
15348
  }
15388
15349
 
15389
- .exp--card__header-container {
15350
+ .c4p--card__header-container {
15390
15351
  display: flex;
15391
15352
  flex-direction: row;
15392
15353
  align-items: center;
15393
15354
  justify-content: space-between;
15394
15355
  }
15395
15356
 
15396
- .exp--card__label {
15357
+ .c4p--card__label {
15397
15358
  font-size: var(--cds-label-01-font-size, 0.75rem);
15398
15359
  font-weight: var(--cds-label-01-font-weight, 400);
15399
15360
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -15401,7 +15362,7 @@ a.bx--side-nav__link--current::before {
15401
15362
  margin-bottom: var(--cds-spacing-01, 0.125rem);
15402
15363
  }
15403
15364
 
15404
- .exp--card__description {
15365
+ .c4p--card__description {
15405
15366
  font-size: var(--cds-caption-01-font-size, 0.75rem);
15406
15367
  font-weight: var(--cds-caption-01-font-weight, 400);
15407
15368
  line-height: var(--cds-caption-01-line-height, 1.33333);
@@ -15409,7 +15370,7 @@ a.bx--side-nav__link--current::before {
15409
15370
  margin-top: var(--cds-spacing-01, 0.125rem);
15410
15371
  }
15411
15372
 
15412
- .exp--card__body {
15373
+ .c4p--card__body {
15413
15374
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
15414
15375
  font-weight: var(--cds-body-short-01-font-weight, 400);
15415
15376
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -15418,33 +15379,33 @@ a.bx--side-nav__link--current::before {
15418
15379
  padding-top: 0;
15419
15380
  }
15420
15381
 
15421
- .exp--card__footer {
15382
+ .c4p--card__footer {
15422
15383
  display: flex;
15423
15384
  justify-content: flex-end;
15424
15385
  }
15425
15386
 
15426
- .exp--card__actions {
15387
+ .c4p--card__actions {
15427
15388
  display: flex;
15428
15389
  flex-direction: row;
15429
15390
  margin: var(--cds-spacing-05, 1rem);
15430
15391
  margin-top: 0;
15431
15392
  }
15432
15393
 
15433
- .exp--card__icon {
15394
+ .c4p--card__icon {
15434
15395
  cursor: pointer;
15435
15396
  }
15436
15397
 
15437
- .exp--card__link {
15398
+ .c4p--card__link {
15438
15399
  color: inherit;
15439
15400
  text-decoration: inherit;
15440
15401
  }
15441
15402
 
15442
- .exp--card__pictogram {
15403
+ .c4p--card__pictogram {
15443
15404
  padding-top: var(--cds-spacing-05, 1rem);
15444
15405
  padding-left: var(--cds-spacing-05, 1rem);
15445
15406
  }
15446
15407
 
15447
- .exp--card__title {
15408
+ .c4p--card__title {
15448
15409
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
15449
15410
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
15450
15411
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -15475,7 +15436,7 @@ a.bx--side-nav__link--current::before {
15475
15436
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15476
15437
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15477
15438
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15478
- .exp--http-errors .exp--http-errors__content {
15439
+ .c4p--http-errors .c4p--http-errors__content {
15479
15440
  position: fixed;
15480
15441
  z-index: 2;
15481
15442
  top: 50%;
@@ -15483,12 +15444,12 @@ a.bx--side-nav__link--current::before {
15483
15444
  transform: translate(-50%, -150%);
15484
15445
  }
15485
15446
  @media (min-width: 42rem) {
15486
- .exp--http-errors .exp--http-errors__content {
15447
+ .c4p--http-errors .c4p--http-errors__content {
15487
15448
  transform: translate(-50%, -50%);
15488
15449
  }
15489
15450
  }
15490
15451
 
15491
- .exp--http-errors .exp--http-errors__error-code-label {
15452
+ .c4p--http-errors .c4p--http-errors__error-code-label {
15492
15453
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
15493
15454
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
15494
15455
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -15496,7 +15457,7 @@ a.bx--side-nav__link--current::before {
15496
15457
  margin-bottom: var(--cds-spacing-02, 0.25rem);
15497
15458
  }
15498
15459
 
15499
- .exp--http-errors .exp--http-errors__title {
15460
+ .c4p--http-errors .c4p--http-errors__title {
15500
15461
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
15501
15462
  font-weight: var(--cds-productive-heading-05-font-weight, 400);
15502
15463
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
@@ -15504,7 +15465,7 @@ a.bx--side-nav__link--current::before {
15504
15465
  margin-bottom: var(--cds-spacing-04, 0.75rem);
15505
15466
  }
15506
15467
 
15507
- .exp--http-errors .exp--http-errors__description {
15468
+ .c4p--http-errors .c4p--http-errors__description {
15508
15469
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
15509
15470
  font-weight: var(--cds-body-short-01-font-weight, 400);
15510
15471
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -15512,18 +15473,18 @@ a.bx--side-nav__link--current::before {
15512
15473
  margin-bottom: var(--cds-spacing-06, 1.5rem);
15513
15474
  }
15514
15475
 
15515
- .exp--http-errors .exp--http-errors__error-code-label,
15516
- .exp--http-errors .exp--http-errors__title,
15517
- .exp--http-errors .exp--http-errors__description {
15476
+ .c4p--http-errors .c4p--http-errors__error-code-label,
15477
+ .c4p--http-errors .c4p--http-errors__title,
15478
+ .c4p--http-errors .c4p--http-errors__description {
15518
15479
  color: var(--cds-text-01, #161616);
15519
15480
  }
15520
15481
 
15521
- .exp--http-errors .exp--http-errors__link {
15482
+ .c4p--http-errors .c4p--http-errors__link {
15522
15483
  display: block;
15523
15484
  margin-bottom: var(--cds-spacing-02, 0.25rem);
15524
15485
  }
15525
15486
 
15526
- .exp--http-errors .exp--http-errors__image {
15487
+ .c4p--http-errors .c4p--http-errors__image {
15527
15488
  position: fixed;
15528
15489
  top: 50%;
15529
15490
  left: 50%;
@@ -15531,7 +15492,7 @@ a.bx--side-nav__link--current::before {
15531
15492
  transform: translate(-50%, -40%);
15532
15493
  }
15533
15494
  @media (min-width: 42rem) {
15534
- .exp--http-errors .exp--http-errors__image {
15495
+ .c4p--http-errors .c4p--http-errors__image {
15535
15496
  transform: translate(-50%, -50%);
15536
15497
  }
15537
15498
  }
@@ -16149,15 +16110,15 @@ a.bx--side-nav__link--current::before {
16149
16110
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16150
16111
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16151
16112
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16152
- .exp--import-modal .bx--modal-close {
16113
+ .c4p--import-modal .bx--modal-close {
16153
16114
  display: none;
16154
16115
  }
16155
16116
 
16156
- .exp--import-modal .bx--modal-footer .bx--btn {
16117
+ .c4p--import-modal .bx--modal-footer .bx--btn {
16157
16118
  max-width: none;
16158
16119
  }
16159
16120
 
16160
- .exp--import-modal.bx--modal .bx--modal-content {
16121
+ .c4p--import-modal.bx--modal .bx--modal-content {
16161
16122
  padding-right: var(--cds-spacing-05, 1rem);
16162
16123
  }
16163
16124
 
@@ -16170,20 +16131,20 @@ a.bx--side-nav__link--current::before {
16170
16131
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16171
16132
  }
16172
16133
 
16173
- .exp--import-modal__input-group {
16134
+ .c4p--import-modal__input-group {
16174
16135
  display: flex;
16175
16136
  }
16176
16137
 
16177
- .exp--import-modal__import-button.bx--btn {
16138
+ .c4p--import-modal__import-button.bx--btn {
16178
16139
  margin-left: var(--cds-spacing-03, 0.5rem);
16179
16140
  }
16180
16141
 
16181
- .exp--import-modal__file-container {
16142
+ .c4p--import-modal__file-container {
16182
16143
  width: 100%;
16183
16144
  }
16184
16145
 
16185
- .exp--import-modal .exp--import-modal__file-drop-header,
16186
- .exp--import-modal .exp--import-modal__label {
16146
+ .c4p--import-modal .c4p--import-modal__file-drop-header,
16147
+ .c4p--import-modal .c4p--import-modal__label {
16187
16148
  margin-bottom: var(--cds-spacing-03, 0.5rem);
16188
16149
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16189
16150
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -16191,7 +16152,7 @@ a.bx--side-nav__link--current::before {
16191
16152
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16192
16153
  }
16193
16154
 
16194
- .exp--import-modal__helper-text {
16155
+ .c4p--import-modal__helper-text {
16195
16156
  margin-top: var(--cds-spacing-06, 1.5rem);
16196
16157
  margin-bottom: var(--cds-spacing-03, 0.5rem);
16197
16158
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
@@ -16199,21 +16160,21 @@ a.bx--side-nav__link--current::before {
16199
16160
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
16200
16161
  }
16201
16162
 
16202
- .exp--import-modal__body {
16163
+ .c4p--import-modal__body {
16203
16164
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16204
16165
  margin-bottom: var(--cds-spacing-06, 1.5rem);
16205
16166
  }
16206
16167
 
16207
- .exp--import-modal .bx--file__selected-file {
16168
+ .c4p--import-modal .bx--file__selected-file {
16208
16169
  max-width: none;
16209
16170
  background: var(--cds-ui-02, #ffffff);
16210
16171
  }
16211
16172
 
16212
- .exp--import-modal .bx--file {
16173
+ .c4p--import-modal .bx--file {
16213
16174
  margin-bottom: var(--cds-spacing-05, 1rem);
16214
16175
  }
16215
16176
 
16216
- .exp--import-modal .bx--text-input:disabled {
16177
+ .c4p--import-modal .bx--text-input:disabled {
16217
16178
  background: var(--cds-ui-02, #ffffff);
16218
16179
  }
16219
16180
 
@@ -16308,7 +16269,7 @@ a.bx--side-nav__link--current::before {
16308
16269
  opacity: 0;
16309
16270
  }
16310
16271
  }
16311
- .exp--loading-bar .exp--loading-bar__inner {
16272
+ .c4p--loading-bar .c4p--loading-bar__inner {
16312
16273
  position: relative;
16313
16274
  width: 100%;
16314
16275
  height: 8px;
@@ -16320,30 +16281,30 @@ a.bx--side-nav__link--current::before {
16320
16281
  pointer-events: none;
16321
16282
  }
16322
16283
 
16323
- .exp--loading-bar .exp--loading-bar__inner:hover,
16324
- .exp--loading-bar .exp--loading-bar__inner:focus,
16325
- .exp--loading-bar .exp--loading-bar__inner:active {
16284
+ .c4p--loading-bar .c4p--loading-bar__inner:hover,
16285
+ .c4p--loading-bar .c4p--loading-bar__inner:focus,
16286
+ .c4p--loading-bar .c4p--loading-bar__inner:active {
16326
16287
  border: none;
16327
16288
  cursor: default;
16328
16289
  outline: none;
16329
16290
  }
16330
16291
 
16331
- .exp--loading-bar__preload {
16292
+ .c4p--loading-bar__preload {
16332
16293
  opacity: 0;
16333
16294
  }
16334
16295
 
16335
- .exp--loading-bar__progress {
16296
+ .c4p--loading-bar__progress {
16336
16297
  position: relative;
16337
16298
  height: 8px;
16338
16299
  transition: width 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
16339
16300
  }
16340
16301
 
16341
- .exp--loading-bar__indicator-wrapper {
16302
+ .c4p--loading-bar__indicator-wrapper {
16342
16303
  display: flex;
16343
16304
  justify-content: flex-end;
16344
16305
  }
16345
16306
 
16346
- .exp--loading-bar__indicator {
16307
+ .c4p--loading-bar__indicator {
16347
16308
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
16348
16309
  font-weight: var(--cds-body-short-01-font-weight, 400);
16349
16310
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -16353,23 +16314,23 @@ a.bx--side-nav__link--current::before {
16353
16314
  color: var(--cds-text-01, #161616);
16354
16315
  }
16355
16316
 
16356
- .exp--loading-bar__small {
16317
+ .c4p--loading-bar__small {
16357
16318
  height: 4px;
16358
16319
  }
16359
16320
 
16360
- .exp--loading-bar__small .exp--loading-bar__progress {
16321
+ .c4p--loading-bar__small .c4p--loading-bar__progress {
16361
16322
  height: 4px;
16362
16323
  }
16363
16324
 
16364
- .exp--loading-bar__linear-stop {
16325
+ .c4p--loading-bar__linear-stop {
16365
16326
  display: none;
16366
16327
  }
16367
16328
 
16368
- .exp--loading-bar__indefinite-stop {
16329
+ .c4p--loading-bar__indefinite-stop {
16369
16330
  animation: 1800ms ease-in-out loading-bar-stop forwards;
16370
16331
  }
16371
16332
 
16372
- .exp--loading-bar__stop-progress:before {
16333
+ .c4p--loading-bar__stop-progress:before {
16373
16334
  position: absolute;
16374
16335
  top: 0;
16375
16336
  left: 0;
@@ -16380,7 +16341,7 @@ a.bx--side-nav__link--current::before {
16380
16341
  content: "";
16381
16342
  }
16382
16343
 
16383
- .exp--loading-bar__indefinite-progress:before {
16344
+ .c4p--loading-bar__indefinite-progress:before {
16384
16345
  position: absolute;
16385
16346
  top: 0;
16386
16347
  left: 0;
@@ -16391,7 +16352,7 @@ a.bx--side-nav__link--current::before {
16391
16352
  content: "";
16392
16353
  }
16393
16354
 
16394
- .exp--loading-bar__linear-progress:before {
16355
+ .c4p--loading-bar__linear-progress:before {
16395
16356
  position: absolute;
16396
16357
  top: 0;
16397
16358
  left: 0;
@@ -16656,7 +16617,7 @@ a.bx--side-nav__link--current::before {
16656
16617
  transform: translateY(-38.5rem);
16657
16618
  }
16658
16619
  }
16659
- .exp--notifications-panel__container {
16620
+ .c4p--notifications-panel__container {
16660
16621
  --cds-interactive-01: #0f62fe;
16661
16622
  --cds-interactive-02: #6f6f6f;
16662
16623
  --cds-interactive-03: #ffffff;
@@ -17093,7 +17054,7 @@ a.bx--side-nav__link--current::before {
17093
17054
  transition: transform 110ms;
17094
17055
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17095
17056
  }
17096
- .exp--notifications-panel__container .exp--notifications-panel__header-container {
17057
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
17097
17058
  position: sticky;
17098
17059
  z-index: 2;
17099
17060
  top: 0;
@@ -17101,25 +17062,25 @@ a.bx--side-nav__link--current::before {
17101
17062
  border-bottom: 1px solid var(--cds-ui-02, #ffffff);
17102
17063
  background-color: var(--cds-ui-background, #ffffff);
17103
17064
  }
17104
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__header-flex {
17065
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex {
17105
17066
  display: flex;
17106
17067
  align-items: center;
17107
17068
  justify-content: space-between;
17108
17069
  }
17109
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__do-not-disturb-toggle .bx--toggle__switch {
17070
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .bx--toggle__switch {
17110
17071
  margin-top: var(--cds-spacing-02, 0.25rem);
17111
17072
  }
17112
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__dismiss-button {
17073
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button {
17113
17074
  color: var(--cds-text-01, #161616);
17114
17075
  }
17115
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__header {
17076
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header {
17116
17077
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
17117
17078
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
17118
17079
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
17119
17080
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
17120
17081
  margin: 0;
17121
17082
  }
17122
- .exp--notifications-panel__container .exp--notifications-panel__time-section-label {
17083
+ .c4p--notifications-panel__container .c4p--notifications-panel__time-section-label {
17123
17084
  font-size: var(--cds-label-01-font-size, 0.75rem);
17124
17085
  font-weight: var(--cds-label-01-font-weight, 400);
17125
17086
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -17132,20 +17093,20 @@ a.bx--side-nav__link--current::before {
17132
17093
  background-color: var(--cds-ui-01, #f4f4f4);
17133
17094
  color: var(--cds-text-02, #525252);
17134
17095
  }
17135
- .exp--notifications-panel__container .exp--notifications-panel__notification:hover,
17136
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus {
17096
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover,
17097
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
17137
17098
  background-color: var(--cds-ui-03, #e0e0e0);
17138
17099
  }
17139
- .exp--notifications-panel__container .exp--notifications-panel__notification:hover .exp--notifications-panel__dismiss-single-button,
17140
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus .exp--notifications-panel__dismiss-single-button {
17100
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button,
17101
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button {
17141
17102
  opacity: 1;
17142
17103
  }
17143
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus {
17104
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
17144
17105
  border-color: var(--cds-focus, #0f62fe);
17145
17106
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-ui-background, #ffffff);
17146
17107
  outline: 0;
17147
17108
  }
17148
- .exp--notifications-panel__container .exp--notifications-panel__notification {
17109
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification {
17149
17110
  position: relative;
17150
17111
  display: flex;
17151
17112
  width: 100%;
@@ -17159,62 +17120,62 @@ a.bx--side-nav__link--current::before {
17159
17120
  transition: background-color 240ms;
17160
17121
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17161
17122
  }
17162
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-title {
17123
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
17163
17124
  margin-bottom: var(--cds-spacing-02, 0.25rem);
17164
17125
  color: var(--cds-text-04, #ffffff);
17165
17126
  font-weight: 400;
17166
17127
  }
17167
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-title.exp--notifications-panel__notification-title-unread {
17128
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread {
17168
17129
  margin-bottom: var(--cds-spacing-02, 0.25rem);
17169
17130
  color: var(--cds-text-04, #ffffff);
17170
17131
  font-weight: 600;
17171
17132
  }
17172
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notifications-link {
17133
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link {
17173
17134
  font-size: var(--cds-label-01-font-size, 0.75rem);
17174
17135
  font-weight: var(--cds-label-01-font-weight, 400);
17175
17136
  line-height: var(--cds-label-01-line-height, 1.33333);
17176
17137
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
17177
17138
  }
17178
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon {
17139
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon {
17179
17140
  min-width: 1rem;
17180
17141
  margin-right: var(--cds-spacing-03, 0.5rem);
17181
17142
  }
17182
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-error {
17143
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error {
17183
17144
  fill: var(--cds-support-01, #da1e28);
17184
17145
  }
17185
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-success {
17146
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
17186
17147
  fill: var(--cds-support-02, #198038);
17187
17148
  }
17188
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-warning {
17149
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
17189
17150
  fill: var(--cds-support-03, #f1c21b);
17190
17151
  }
17191
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-informational {
17152
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational {
17192
17153
  fill: var(--cds-support-04, #0043ce);
17193
17154
  }
17194
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-time-label {
17155
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label {
17195
17156
  margin-bottom: var(--cds-spacing-03, 0.5rem);
17196
17157
  }
17197
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-time-label,
17198
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description {
17158
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label,
17159
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description {
17199
17160
  font-size: var(--cds-label-01-font-size, 0.75rem);
17200
17161
  font-weight: var(--cds-label-01-font-weight, 400);
17201
17162
  line-height: var(--cds-label-01-line-height, 1.33333);
17202
17163
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
17203
17164
  color: var(--cds-text-02, #525252);
17204
17165
  }
17205
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description.exp--notifications-panel__notification-short-description {
17166
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description {
17206
17167
  display: -webkit-box;
17207
17168
  overflow: hidden;
17208
17169
  -webkit-box-orient: vertical;
17209
17170
  -webkit-line-clamp: 2;
17210
17171
  }
17211
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description.exp--notifications-panel__notification-long-description {
17172
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description {
17212
17173
  display: block;
17213
17174
  overflow: initial;
17214
17175
  -webkit-line-clamp: initial;
17215
17176
  }
17216
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button,
17217
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button {
17177
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button,
17178
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button {
17218
17179
  font-size: var(--cds-label-01-font-size, 0.75rem);
17219
17180
  font-weight: var(--cds-label-01-font-weight, 400);
17220
17181
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -17222,19 +17183,19 @@ a.bx--side-nav__link--current::before {
17222
17183
  min-width: 5.5rem;
17223
17184
  padding: 0;
17224
17185
  }
17225
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button .bx--btn__icon,
17226
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button .bx--btn__icon {
17186
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .bx--btn__icon,
17187
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .bx--btn__icon {
17227
17188
  transition: transform 240ms ease;
17228
17189
  }
17229
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button.exp--notifications-panel__notification-read-more-button .bx--btn__icon,
17230
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button.exp--notifications-panel__notification-read-more-button .bx--btn__icon {
17190
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .bx--btn__icon,
17191
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .bx--btn__icon {
17231
17192
  transform: rotate(0deg);
17232
17193
  }
17233
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button.exp--notifications-panel__notification-read-less-button .bx--btn__icon,
17234
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button.exp--notifications-panel__notification-read-less-button .bx--btn__icon {
17194
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .bx--btn__icon,
17195
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .bx--btn__icon {
17235
17196
  transform: rotate(180deg);
17236
17197
  }
17237
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button {
17198
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button {
17238
17199
  position: absolute;
17239
17200
  top: 0;
17240
17201
  right: 0;
@@ -17243,12 +17204,12 @@ a.bx--side-nav__link--current::before {
17243
17204
  color: var(--cds-text-01, #161616);
17244
17205
  opacity: 0;
17245
17206
  }
17246
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button:hover, .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button:focus {
17207
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover, .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus {
17247
17208
  opacity: 1;
17248
17209
  }
17249
- .exp--notifications-panel__container .exp--notifications-panel__notification-today:not(:first-of-type):before,
17250
- .exp--notifications-panel__container .exp--notifications-panel__notification-yesterday:not(:first-of-type):before,
17251
- .exp--notifications-panel__container .exp--notifications-panel__notification-previous:not(:first-of-type):before {
17210
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,
17211
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
17212
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
17252
17213
  position: absolute;
17253
17214
  top: 0;
17254
17215
  width: calc(100% - (2 * var(--cds-spacing-05, 1rem)));
@@ -17259,12 +17220,12 @@ a.bx--side-nav__link--current::before {
17259
17220
  transition: background-color 240ms;
17260
17221
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17261
17222
  }
17262
- .exp--notifications-panel__container .exp--notifications-panel__notification-today:hover + .exp--notifications-panel__notification-today:not(:first-of-type):before,
17263
- .exp--notifications-panel__container .exp--notifications-panel__notification-yesterday:hover + .exp--notifications-panel__notification-yesterday:not(:first-of-type):before,
17264
- .exp--notifications-panel__container .exp--notifications-panel__notification-previous:hover + .exp--notifications-panel__notification-previous:not(:first-of-type):before {
17223
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
17224
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
17225
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover + .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
17265
17226
  background-color: transparent;
17266
17227
  }
17267
- .exp--notifications-panel__container .exp--notifications-panel__main-section-empty.exp--notifications-panel__main-section {
17228
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section {
17268
17229
  display: flex;
17269
17230
  height: 100%;
17270
17231
  min-height: initial;
@@ -17272,16 +17233,16 @@ a.bx--side-nav__link--current::before {
17272
17233
  justify-content: center;
17273
17234
  margin-top: var(--cds-layout-07, 10rem);
17274
17235
  }
17275
- .exp--notifications-panel__container .exp--notifications-panel__main-section-empty.exp--notifications-panel__main-section .exp-subtext {
17236
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext {
17276
17237
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
17277
17238
  font-weight: var(--cds-body-short-01-font-weight, 400);
17278
17239
  line-height: var(--cds-body-short-01-line-height, 1.28572);
17279
17240
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
17280
17241
  }
17281
- .exp--notifications-panel__container .exp--notifications-panel__main-section {
17242
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section {
17282
17243
  min-height: 498px;
17283
17244
  }
17284
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions {
17245
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions {
17285
17246
  position: sticky;
17286
17247
  z-index: 2;
17287
17248
  bottom: 0;
@@ -17292,7 +17253,7 @@ a.bx--side-nav__link--current::before {
17292
17253
  border-top: 1px solid var(--cds-ui-02, #ffffff);
17293
17254
  background-color: var(--cds-ui-background, #ffffff);
17294
17255
  }
17295
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__view-all-button {
17256
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button {
17296
17257
  width: 100%;
17297
17258
  max-width: calc(100% - 2.5rem);
17298
17259
  height: 2.5rem;
@@ -17300,7 +17261,7 @@ a.bx--side-nav__link--current::before {
17300
17261
  border-right: 1px solid var(--cds-ui-02, #ffffff);
17301
17262
  color: var(--cds-text-01, #161616);
17302
17263
  }
17303
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__settings-button {
17264
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button {
17304
17265
  display: flex;
17305
17266
  min-width: 2.5rem;
17306
17267
  height: 2.5rem;
@@ -17310,7 +17271,7 @@ a.bx--side-nav__link--current::before {
17310
17271
  padding: 0;
17311
17272
  color: var(--cds-text-01, #161616);
17312
17273
  }
17313
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__settings-button .bx--btn__icon {
17274
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .bx--btn__icon {
17314
17275
  margin: 0;
17315
17276
  }
17316
17277
 
@@ -18046,21 +18007,21 @@ a.bx--side-nav__link--current::before {
18046
18007
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18047
18008
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18048
18009
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18049
- .exp--action-bar.exp--action-bar {
18010
+ .c4p--action-bar.c4p--action-bar {
18050
18011
  display: block;
18051
18012
  }
18052
- .exp--action-bar .exp--action-bar__displayed-items {
18013
+ .c4p--action-bar .c4p--action-bar__displayed-items {
18053
18014
  display: inline-flex;
18054
18015
  width: 100%;
18055
18016
  white-space: nowrap;
18056
18017
  }
18057
- .exp--action-bar .exp--action-bar__displayed-items--right {
18018
+ .c4p--action-bar .c4p--action-bar__displayed-items--right {
18058
18019
  justify-content: flex-end;
18059
18020
  }
18060
- .exp--action-bar .exp--action-bar-overflow-items {
18021
+ .c4p--action-bar .c4p--action-bar-overflow-items {
18061
18022
  display: inline-block;
18062
18023
  }
18063
- .exp--action-bar .exp--action-bar__hidden-sizing-items {
18024
+ .c4p--action-bar .c4p--action-bar__hidden-sizing-items {
18064
18025
  position: absolute;
18065
18026
  top: -100vh;
18066
18027
  left: -100vw;
@@ -18070,15 +18031,15 @@ a.bx--side-nav__link--current::before {
18070
18031
  visibility: hidden;
18071
18032
  }
18072
18033
 
18073
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item {
18034
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item {
18074
18035
  padding: 0 var(--cds-spacing-03, 0.5rem);
18075
18036
  }
18076
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item-content {
18037
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item-content {
18077
18038
  display: flex;
18078
18039
  width: 100%;
18079
18040
  justify-content: space-between;
18080
18041
  }
18081
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item svg {
18042
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item svg {
18082
18043
  margin: 0 var(--cds-spacing-02, 0.25rem);
18083
18044
  }
18084
18045
 
@@ -18141,30 +18102,30 @@ a.bx--side-nav__link--current::before {
18141
18102
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18142
18103
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18143
18104
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18144
- .exp--breadcrumb-with-overflow.exp--breadcrumb-with-overflow {
18105
+ .c4p--breadcrumb-with-overflow.c4p--breadcrumb-with-overflow {
18145
18106
  display: block;
18146
18107
  }
18147
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__space {
18108
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__space {
18148
18109
  position: relative;
18149
18110
  display: block;
18150
18111
  width: 100%;
18151
18112
  white-space: nowrap;
18152
18113
  }
18153
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container.exp--breadcrumb-with-overflow__breadcrumb-container-with-items {
18114
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18154
18115
  display: none;
18155
18116
  width: 100%;
18156
18117
  }
18157
18118
  @media (min-width: 42rem) {
18158
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container.exp--breadcrumb-with-overflow__breadcrumb-container-with-items {
18119
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18159
18120
  display: inline-flex;
18160
18121
  }
18161
18122
  }
18162
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
18123
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
18163
18124
  width: 100%;
18164
18125
  flex-wrap: nowrap;
18165
18126
  align-items: flex-start;
18166
18127
  }
18167
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container--hidden {
18128
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container--hidden {
18168
18129
  position: absolute;
18169
18130
  top: -100vh;
18170
18131
  left: -100vw;
@@ -18173,28 +18134,28 @@ a.bx--side-nav__link--current::before {
18173
18134
  pointer-events: none;
18174
18135
  visibility: hidden;
18175
18136
  }
18176
- .exp--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18137
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18177
18138
  display: inline;
18178
18139
  }
18179
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
18140
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
18180
18141
  display: inline;
18181
18142
  overflow: hidden;
18182
18143
  }
18183
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
18144
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
18184
18145
  display: inline-block;
18185
18146
  overflow: hidden;
18186
18147
  width: 100%;
18187
18148
  text-overflow: ellipsis;
18188
18149
  }
18189
- .exp--breadcrumb-with-overflow .bx--link {
18150
+ .c4p--breadcrumb-with-overflow .bx--link {
18190
18151
  max-height: 18px;
18191
18152
  }
18192
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18153
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18193
18154
  display: inline-flex;
18194
18155
  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
18195
18156
  }
18196
18157
  @media (min-width: 42rem) {
18197
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18158
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18198
18159
  display: none;
18199
18160
  }
18200
18161
  }
@@ -18744,27 +18705,27 @@ a.bx--side-nav__link--current::before {
18744
18705
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18745
18706
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18746
18707
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18747
- .exp--tag-set.exp--tag-set {
18708
+ .c4p--tag-set.c4p--tag-set {
18748
18709
  display: block;
18749
18710
  width: 100%;
18750
18711
  }
18751
- .exp--tag-set .exp--tag-set__space {
18712
+ .c4p--tag-set .c4p--tag-set__space {
18752
18713
  position: relative;
18753
18714
  display: block;
18754
18715
  width: 100%;
18755
18716
  white-space: nowrap;
18756
18717
  }
18757
- .exp--tag-set .exp--tag-set__space--align-end {
18718
+ .c4p--tag-set .c4p--tag-set__space--align-end {
18758
18719
  text-align: end;
18759
18720
  }
18760
- .exp--tag-set .exp--tag-set__space--align-center {
18721
+ .c4p--tag-set .c4p--tag-set__space--align-center {
18761
18722
  text-align: center;
18762
18723
  }
18763
- .exp--tag-set .exp--tag-set__tag-container {
18724
+ .c4p--tag-set .c4p--tag-set__tag-container {
18764
18725
  display: inline-flex;
18765
18726
  white-space: nowrap;
18766
18727
  }
18767
- .exp--tag-set .exp--tag-set__tag-container--hidden {
18728
+ .c4p--tag-set .c4p--tag-set__tag-container--hidden {
18768
18729
  position: absolute;
18769
18730
  top: -100vh;
18770
18731
  left: -100vw;
@@ -18773,43 +18734,43 @@ a.bx--side-nav__link--current::before {
18773
18734
  pointer-events: none;
18774
18735
  visibility: hidden;
18775
18736
  }
18776
- .exp--tag-set .exp--tag-set-overflow {
18737
+ .c4p--tag-set .c4p--tag-set-overflow {
18777
18738
  display: inline-block;
18778
18739
  vertical-align: bottom;
18779
18740
  }
18780
- .exp--tag-set .exp--tag-set-overflow--hidden {
18741
+ .c4p--tag-set .c4p--tag-set-overflow--hidden {
18781
18742
  overflow: hidden;
18782
18743
  max-width: 0;
18783
18744
  visibility: hidden;
18784
18745
  }
18785
18746
 
18786
- .exp--tag-set-modal.exp--tag-set-modal {
18747
+ .c4p--tag-set-modal.c4p--tag-set-modal {
18787
18748
  text-align: initial;
18788
18749
  white-space: initial;
18789
18750
  }
18790
18751
  @media (min-width: 42rem) {
18791
- .exp--tag-set-modal .exp--tag-set-modal__container {
18752
+ .c4p--tag-set-modal .c4p--tag-set-modal__container {
18792
18753
  height: 90%;
18793
18754
  max-height: 450px;
18794
18755
  }
18795
18756
  }
18796
- .exp--tag-set-modal .exp--tag-set-modal__search {
18757
+ .c4p--tag-set-modal .c4p--tag-set-modal__search {
18797
18758
  margin-top: var(--cds-spacing-05, 1rem);
18798
18759
  margin-bottom: 0;
18799
18760
  }
18800
- .exp--tag-set-modal.exp--tag-set-modal .exp--tag-set-modal__fade {
18761
+ .c4p--tag-set-modal.c4p--tag-set-modal .c4p--tag-set-modal__fade {
18801
18762
  position: relative;
18802
18763
  margin-right: var(--cds-spacing-05, 1rem);
18803
18764
  margin-left: var(--cds-spacing-05, 1rem);
18804
18765
  }
18805
- .exp--tag-set-modal .exp--tag-set-modal__body {
18766
+ .c4p--tag-set-modal .c4p--tag-set-modal__body {
18806
18767
  padding-bottom: var(--cds-spacing-06, 1.5rem);
18807
18768
  }
18808
- .exp--tag-set-modal .exp--tag-set-modal__header {
18769
+ .c4p--tag-set-modal .c4p--tag-set-modal__header {
18809
18770
  padding-right: 0;
18810
18771
  margin-right: var(--cds-spacing-05, 1rem);
18811
18772
  }
18812
- .exp--tag-set-modal.exp--tag-set-modal .exp--tag-set-modal__fade::after {
18773
+ .c4p--tag-set-modal.c4p--tag-set-modal .c4p--tag-set-modal__fade::after {
18813
18774
  position: absolute;
18814
18775
  top: calc(-1 * var(--cds-spacing-11, 5rem));
18815
18776
  left: 0;
@@ -18819,15 +18780,15 @@ a.bx--side-nav__link--current::before {
18819
18780
  content: "";
18820
18781
  }
18821
18782
 
18822
- .exp--tag-set-overflow__tooltip.exp--tag-set-overflow__tooltip {
18783
+ .c4p--tag-set-overflow__tooltip.c4p--tag-set-overflow__tooltip {
18823
18784
  min-width: initial;
18824
18785
  }
18825
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__show-all-tags-link {
18786
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__show-all-tags-link {
18826
18787
  display: inline-block;
18827
18788
  margin: var(--cds-spacing-03, 0.5rem) 0 var(--cds-spacing-02, 0.25rem);
18828
18789
  }
18829
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag-item,
18830
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag-item .bx--tag {
18790
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag-item,
18791
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag-item .bx--tag {
18831
18792
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
18832
18793
  font-weight: var(--cds-body-short-01-font-weight, 400);
18833
18794
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -18843,17 +18804,17 @@ a.bx--side-nav__link--current::before {
18843
18804
  text-overflow: ellipsis;
18844
18805
  white-space: nowrap;
18845
18806
  }
18846
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon {
18807
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon {
18847
18808
  padding: 0;
18848
18809
  }
18849
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag--high-contrast {
18810
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag--high-contrast {
18850
18811
  background-color: var(--cds-ui-background, #ffffff);
18851
18812
  color: var(--cds-text-01, #161616);
18852
18813
  }
18853
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon:hover {
18814
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon:hover {
18854
18815
  background-color: var(--cds-hover-ui, #e5e5e5);
18855
18816
  }
18856
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon:focus {
18817
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon:focus {
18857
18818
  box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe);
18858
18819
  }
18859
18820
 
@@ -18908,19 +18869,19 @@ a.bx--side-nav__link--current::before {
18908
18869
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18909
18870
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18910
18871
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18911
- .exp--button-set-with-overflow.exp--button-set-with-overflow {
18872
+ .c4p--button-set-with-overflow.c4p--button-set-with-overflow {
18912
18873
  display: flex;
18913
18874
  }
18914
- .exp--button-set-with-overflow .exp--button-set-with-overflow__space {
18875
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__space {
18915
18876
  position: relative;
18916
18877
  display: block;
18917
18878
  width: 100%;
18918
18879
  white-space: nowrap;
18919
18880
  }
18920
- .exp--button-set-with-overflow .exp--button-set-with-overflow__button-container {
18881
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__button-container {
18921
18882
  display: inline-flex;
18922
18883
  }
18923
- .exp--button-set-with-overflow .exp--button-set-with-overflow__button-container--hidden {
18884
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__button-container--hidden {
18924
18885
  position: absolute;
18925
18886
  top: -100vh;
18926
18887
  left: -100vw;
@@ -18929,7 +18890,7 @@ a.bx--side-nav__link--current::before {
18929
18890
  pointer-events: none;
18930
18891
  visibility: hidden;
18931
18892
  }
18932
- .exp--button-set-with-overflow.exp--button-set-with-overflow--right {
18893
+ .c4p--button-set-with-overflow.c4p--button-set-with-overflow--right {
18933
18894
  justify-content: flex-end;
18934
18895
  }
18935
18896
 
@@ -18941,76 +18902,86 @@ a.bx--side-nav__link--current::before {
18941
18902
  background-color: var(--to-color);
18942
18903
  }
18943
18904
  }
18944
- .exp--page-header.exp--page-header {
18905
+ @keyframes background-and-shadow-appear {
18906
+ from {
18907
+ background-color: var(--from-color);
18908
+ box-shadow: 0 1px 0 var(--from-color);
18909
+ }
18910
+ to {
18911
+ background-color: var(--to-color);
18912
+ box-shadow: 0 1px 0 var(--to-color-shadow);
18913
+ }
18914
+ }
18915
+ .c4p--page-header.c4p--page-header {
18945
18916
  /* Bleed class for the background */
18946
18917
  position: sticky;
18947
18918
  /* z-index used to raise above any position relative content as per Carbon header */
18948
18919
  /* dropped 1 below Carbon header so as not to overlay the side panel */
18949
18920
  z-index: 7999;
18950
- top: var(--exp--page-header--header-top);
18921
+ top: var(--c4p--page-header--header-top);
18951
18922
  display: inline-block;
18952
18923
  /* cause top/bottom margin to reserve space */
18953
18924
  width: 100%;
18954
18925
  background-color: var(--cds-ui-background, #ffffff);
18955
18926
  color: var(--cds-text-01, #161616);
18956
18927
  /* custom props */
18957
- --exp--page-header--breadcrumb-title-visibility: hidden;
18958
- --exp--page-header--breadcrumb-title-opacity: 1;
18959
- --exp--page-header--breadcrumb-top: 0;
18960
- --exp--page-header--background-opacity: 1;
18961
- --exp--page-header--breadcrumb-title-top: initial;
18962
- --exp--page-header--button-set-in-breadcrumb-width-px: initial;
18963
- --exp--page-header--navigation-buffer-top: $spacing-06;
18964
- }
18965
- .exp--page-header.exp--page-header--has-navigation-tags-only {
18966
- --exp--page-header--navigation-buffer-top: $spacing-04;
18967
- }
18968
- .exp--page-header::before {
18928
+ --c4p--page-header--breadcrumb-title-visibility: hidden;
18929
+ --c4p--page-header--breadcrumb-title-opacity: 1;
18930
+ --c4p--page-header--breadcrumb-top: 0;
18931
+ --c4p--page-header--background-opacity: 1;
18932
+ --c4p--page-header--breadcrumb-title-top: initial;
18933
+ --c4p--page-header--button-set-in-breadcrumb-width-px: initial;
18934
+ --c4p--page-header--navigation-buffer-top: $spacing-06;
18935
+ }
18936
+ .c4p--page-header.c4p--page-header--has-navigation-tags-only {
18937
+ --c4p--page-header--navigation-buffer-top: $spacing-04;
18938
+ }
18939
+ .c4p--page-header::before {
18969
18940
  --from-color: var(--cds-ui-background, #ffffff);
18970
18941
  --to-color: var(--cds-ui-01, #f4f4f4);
18942
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
18971
18943
  position: absolute;
18972
18944
  top: 0;
18973
18945
  left: 0;
18974
18946
  display: block;
18975
18947
  width: 100%;
18976
18948
  height: 100%;
18977
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
18949
+ animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
18978
18950
  content: "";
18979
18951
  z-index: -1;
18980
- box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
18981
18952
  }
18982
- .exp--page-header .exp--page-header--width--xl {
18953
+ .c4p--page-header .c4p--page-header--width--xl {
18983
18954
  padding-right: var(--cds-spacing-07, 2rem);
18984
18955
  padding-left: var(--cds-spacing-07, 2rem);
18985
18956
  }
18986
- .exp--page-header .exp--page-header__breadcrumb-row {
18957
+ .c4p--page-header .c4p--page-header__breadcrumb-row {
18987
18958
  position: sticky;
18988
18959
  z-index: 99;
18989
- top: var(--exp--page-header--breadcrumb-top);
18960
+ top: var(--c4p--page-header--breadcrumb-top);
18990
18961
  min-height: var(--cds-spacing-08, 2.5rem);
18991
18962
  }
18992
- .exp--page-header .exp--page-header__breadcrumb-row + .exp--page-header__last-row-buffer--active {
18963
+ .c4p--page-header .c4p--page-header__breadcrumb-row + .c4p--page-header__last-row-buffer--active {
18993
18964
  height: var(--cds-spacing-02, 0.25rem);
18994
18965
  }
18995
- .exp--page-header .exp--page-header__breadcrumb-row:not(.exp--page-header__breadcrumb-row--has-action-bar) {
18966
+ .c4p--page-header .c4p--page-header__breadcrumb-row:not(.c4p--page-header__breadcrumb-row--has-action-bar) {
18996
18967
  margin-bottom: calc(-1 * var(--cds-spacing-03, 0.5rem));
18997
18968
  }
18998
- .exp--page-header .exp--page-header__breadcrumb-row--container {
18969
+ .c4p--page-header .c4p--page-header__breadcrumb-row--container {
18999
18970
  display: flex;
19000
18971
  min-width: 100%;
19001
18972
  flex-wrap: nowrap;
19002
18973
  }
19003
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar {
18974
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar {
19004
18975
  min-width: calc(0.6 * (100% + 2 * var(--cds-spacing-05, 1rem)));
19005
18976
  max-width: calc(0.6 * (100% + 2 * var(--cds-spacing-05, 1rem)));
19006
18977
  }
19007
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar .exp--page-header__has-page-actions-without-action-bar {
18978
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar .c4p--page-header__has-page-actions-without-action-bar {
19008
18979
  min-width: 100%;
19009
18980
  }
19010
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar .exp--page-header__breadcrumb-row--container {
19011
- min-width: calc(100% + (var(--exp--page-header--width-px) - var(--exp--page-header--breadcrumb-row-width-px)) / 2);
18981
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar .c4p--page-header__breadcrumb-row--container {
18982
+ min-width: calc(100% + (var(--c4p--page-header--width-px) - var(--c4p--page-header--breadcrumb-row-width-px)) / 2);
19012
18983
  }
19013
- .exp--page-header .exp--page-header__breadcrumb-row::after {
18984
+ .c4p--page-header .c4p--page-header__breadcrumb-row::after {
19014
18985
  position: absolute;
19015
18986
  bottom: 0;
19016
18987
  left: 50%;
@@ -19024,204 +18995,205 @@ a.bx--side-nav__link--current::before {
19024
18995
  transform: translateX(-50%) scaleX(1);
19025
18996
  transition: all 150ms ease-out;
19026
18997
  }
19027
- .exp--page-header .exp--page-header__breadcrumb-row--next-to-tabs::after,
19028
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar::after {
18998
+ .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs::after,
18999
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar::after {
19029
19000
  /* creates a full width box shadow without causing scroll */
19030
19001
  box-shadow: 25vw 1px 0 0 var(--cds-ui-03, #e0e0e0), -25vw 1px 0 0 var(--cds-ui-03, #e0e0e0);
19031
19002
  opacity: 1;
19032
19003
  }
19033
- .exp--page-header .exp--page-header__breadcrumb-container {
19004
+ .c4p--page-header .c4p--page-header__breadcrumb-container {
19034
19005
  width: 100%;
19035
19006
  }
19036
- .exp--page-header .exp--page-header__action-bar-column {
19007
+ .c4p--page-header .c4p--page-header__action-bar-column {
19037
19008
  display: none;
19038
19009
  }
19039
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs .exp--page-header__action-bar-column {
19010
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
19040
19011
  max-width: 75%;
19041
19012
  flex: 0 1 75%;
19042
19013
  }
19043
19014
  @media (min-width: 42rem) {
19044
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs .exp--page-header__action-bar-column {
19015
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
19045
19016
  max-width: 40%;
19046
19017
  flex: 1 0 40%;
19047
19018
  }
19048
19019
  }
19049
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar .exp--page-header__action-bar-column {
19020
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar .c4p--page-header__action-bar-column {
19050
19021
  display: initial;
19051
19022
  }
19052
- .exp--page-header .exp--page-header__action-bar-column-content {
19023
+ .c4p--page-header .c4p--page-header__action-bar-column-content {
19053
19024
  display: flex;
19054
19025
  justify-content: flex-end;
19055
19026
  white-space: nowrap;
19056
19027
  }
19057
19028
  @media (min-width: 66rem) {
19058
- .exp--page-header .exp--page-header__action-bar-column-content {
19029
+ .c4p--page-header .c4p--page-header__action-bar-column-content {
19059
19030
  flex-wrap: nowrap;
19060
19031
  /* assume enough space */
19061
19032
  }
19062
19033
  }
19063
- .exp--page-header .exp--page-header__breadcrumb-row .exp--page-header__page-actions {
19034
+ .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions {
19064
19035
  position: relative;
19065
19036
  display: inline-block;
19066
19037
  width: 100%;
19067
- max-width: var(--exp--page-header--button-set-in-breadcrumb-width-px);
19068
- flex: 1 1 var(--exp--page-header--button-set-in-breadcrumb-width-px);
19038
+ max-width: var(--c4p--page-header--button-set-in-breadcrumb-width-px);
19039
+ flex: 1 1 var(--c4p--page-header--button-set-in-breadcrumb-width-px);
19069
19040
  opacity: 0;
19070
19041
  transition: opacity 240ms cubic-bezier(0, 0, 0.38, 0.9);
19071
19042
  visibility: hidden;
19072
19043
  white-space: nowrap;
19073
19044
  }
19074
- .exp--page-header .exp--page-header__breadcrumb-row .exp--page-header__page-actions--in-breadcrumb {
19045
+ .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions--in-breadcrumb {
19075
19046
  opacity: 1;
19076
19047
  visibility: visible;
19077
19048
  }
19078
- .exp--page-header .exp--page-header__breadcrumb-column {
19049
+ .c4p--page-header .c4p--page-header__breadcrumb-column {
19079
19050
  max-width: 100%;
19080
19051
  flex: 0 0 100%;
19081
19052
  }
19082
19053
  @media (min-width: 42rem) {
19083
- .exp--page-header .exp--page-header__breadcrumb-column {
19054
+ .c4p--page-header .c4p--page-header__breadcrumb-column {
19084
19055
  overflow: hidden;
19085
19056
  /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
19086
19057
  }
19087
19058
  }
19088
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
19059
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
19089
19060
  max-width: 75%;
19090
19061
  flex: 0 1 75%;
19091
19062
  }
19092
19063
  @media (min-width: 42rem) {
19093
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
19064
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
19094
19065
  max-width: 60%;
19095
19066
  flex: 0 1 60%;
19096
19067
  }
19097
19068
  }
19098
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
19069
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
19099
19070
  max-width: 100%;
19100
19071
  flex: 0 1 100%;
19101
19072
  }
19102
- .exp--page-header .exp--page-header__breadcrumb-column--background,
19103
- .exp--page-header .exp--page-header__action-bar-column--background {
19073
+ .c4p--page-header .c4p--page-header__breadcrumb-column--background,
19074
+ .c4p--page-header .c4p--page-header__action-bar-column--background {
19104
19075
  position: relative;
19105
19076
  }
19106
- .exp--page-header .exp--page-header__breadcrumb-column--background::before,
19107
- .exp--page-header .exp--page-header__action-bar-column--background::before {
19077
+ .c4p--page-header .c4p--page-header__breadcrumb-column--background::before,
19078
+ .c4p--page-header .c4p--page-header__action-bar-column--background::before {
19108
19079
  --from-color: var(--cds-ui-background, #ffffff);
19109
19080
  --to-color: var(--cds-ui-01, #f4f4f4);
19081
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
19110
19082
  position: absolute;
19111
19083
  top: 0;
19112
19084
  left: 0;
19113
19085
  display: block;
19114
19086
  width: 100%;
19115
19087
  height: 100%;
19116
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
19088
+ animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19117
19089
  content: "";
19118
19090
  }
19119
- .exp--page-header .exp--page-header__action-bar-column--influenced-by-collapse-button {
19091
+ .c4p--page-header .c4p--page-header__action-bar-column--influenced-by-collapse-button {
19120
19092
  padding-right: var(--cds-spacing-08, 2.5rem);
19121
19093
  }
19122
- .exp--page-header .exp--page-header__breadcrumb {
19094
+ .c4p--page-header .c4p--page-header__breadcrumb {
19123
19095
  font-size: var(--cds-label-01-font-size, 0.75rem);
19124
19096
  font-weight: var(--cds-label-01-font-weight, 400);
19125
19097
  line-height: var(--cds-label-01-line-height, 1.33333);
19126
19098
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
19127
19099
  padding-top: var(--cds-spacing-04, 0.75rem);
19128
19100
  }
19129
- .exp--page-header .exp--page-header--breadcrumb.exp--breadcrumb-with-overflow__with-items {
19101
+ .c4p--page-header .c4p--page-header--breadcrumb.c4p--breadcrumb-with-overflow__with-items {
19130
19102
  padding-top: 0;
19131
19103
  }
19132
19104
  @media (min-width: 42rem) {
19133
- .exp--page-header .exp--page-header--breadcrumb.exp--breadcrumb-with-overflow__with-items {
19105
+ .c4p--page-header .c4p--page-header--breadcrumb.c4p--breadcrumb-with-overflow__with-items {
19134
19106
  padding-top: var(--cds-spacing-04, 0.75rem);
19135
19107
  }
19136
19108
  }
19137
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item {
19109
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item {
19138
19110
  margin-right: var(--cds-spacing-02, 0.25rem);
19139
19111
  }
19140
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item::after {
19112
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item::after {
19141
19113
  margin-left: var(--cds-spacing-02, 0.25rem);
19142
19114
  }
19143
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item,
19144
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item .bx--link {
19115
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item,
19116
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item .bx--link {
19145
19117
  font-size: var(--cds-label-01-font-size, 0.75rem);
19146
19118
  font-weight: var(--cds-label-01-font-weight, 400);
19147
19119
  line-height: var(--cds-label-01-line-height, 1.33333);
19148
19120
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
19149
19121
  }
19150
- .exp--page-header .exp--page-header__breadcrumb-title {
19122
+ .c4p--page-header .c4p--page-header__breadcrumb-title {
19151
19123
  position: relative;
19152
19124
  }
19153
- .exp--page-header .exp--page-header__breadcrumb-title:not(.exp--page-header__breadcrumb-title--pre-collapsed) {
19154
- opacity: var(--exp--page-header--breadcrumb-title-opacity);
19155
- transform: translateY(var(--exp--page-header--breadcrumb-title-top));
19125
+ .c4p--page-header .c4p--page-header__breadcrumb-title:not(.c4p--page-header__breadcrumb-title--pre-collapsed) {
19126
+ opacity: var(--c4p--page-header--breadcrumb-title-opacity);
19127
+ transform: translateY(var(--c4p--page-header--breadcrumb-title-top));
19156
19128
  /* token linter does not support this form */
19157
- visibility: var(--exp--page-header--breadcrumb-title-visibility);
19129
+ visibility: var(--c4p--page-header--breadcrumb-title-visibility);
19158
19130
  }
19159
- .exp--page-header .exp--page-header__breadcrumb-container--hidden .exp--page-header__breadcrumb-title.exp--page-header__breadcrumb-title {
19131
+ .c4p--page-header .c4p--page-header__breadcrumb-container--hidden .c4p--page-header__breadcrumb-title.c4p--page-header__breadcrumb-title {
19160
19132
  overflow: initial;
19161
19133
  }
19162
- .exp--page-header .exp--page-header__action-bar {
19134
+ .c4p--page-header .c4p--page-header__action-bar {
19163
19135
  width: 100%;
19164
- max-width: var(--exp--page-header--max-action-bar-width-px);
19165
- flex: 1 1 var(--exp--page-header--max-action-bar-width-px);
19136
+ max-width: var(--c4p--page-header--max-action-bar-width-px);
19137
+ flex: 1 1 var(--c4p--page-header--max-action-bar-width-px);
19166
19138
  padding-top: var(--cds-spacing-04, 0.75rem);
19167
19139
  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
19168
19140
  /* align with breadcrumb */
19169
19141
  vertical-align: top;
19170
19142
  white-space: nowrap;
19171
19143
  }
19172
- .exp--page-header .exp--page-header__title-row {
19144
+ .c4p--page-header .c4p--page-header__title-row {
19173
19145
  margin-top: 0;
19174
19146
  margin-bottom: 0;
19175
19147
  }
19176
19148
  @media (min-width: 42rem) {
19177
- .exp--page-header .exp--page-header__title-row {
19149
+ .c4p--page-header .c4p--page-header__title-row {
19178
19150
  flex-wrap: nowrap;
19179
19151
  /* assume enough space */
19180
19152
  }
19181
19153
  }
19182
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--under-action-bar {
19154
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--under-action-bar {
19183
19155
  margin-top: var(--cds-spacing-05, 1rem);
19184
19156
  }
19185
- .exp--page-header .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
19157
+ .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
19186
19158
  height: var(--cds-spacing-07, 2rem);
19187
19159
  }
19188
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-03 {
19160
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-03 {
19189
19161
  margin-bottom: var(--cds-spacing-03, 0.5rem);
19190
19162
  }
19191
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-05 + .exp--page-header__last-row-buffer--active {
19163
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-05 + .c4p--page-header__last-row-buffer--active {
19192
19164
  height: var(--cds-spacing-05, 1rem);
19193
19165
  }
19194
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-06 {
19166
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-06 {
19195
19167
  margin-bottom: var(--cds-spacing-06, 1.5rem);
19196
19168
  }
19197
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--no-breadcrumb-row {
19169
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--no-breadcrumb-row {
19198
19170
  margin-top: var(--cds-spacing-07, 2rem);
19199
19171
  }
19200
- .exp--page-header.exp--page-header--has-navigation .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
19172
+ .c4p--page-header.c4p--page-header--has-navigation .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
19201
19173
  height: calc(var(--cds-spacing-06, 1.5rem));
19202
19174
  }
19203
- .exp--page-header.exp--page-header--has-navigation-tags-only .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
19175
+ .c4p--page-header.c4p--page-header--has-navigation-tags-only .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
19204
19176
  height: calc(var(--cds-spacing-05, 1rem));
19205
19177
  }
19206
- .exp--page-header .exp--page-header__title-row--sticky {
19178
+ .c4p--page-header .c4p--page-header__title-row--sticky {
19207
19179
  position: sticky;
19208
19180
  }
19209
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs + .exp--page-header__title-row--sticky {
19210
- top: var(--exp--page-header--breadcrumb-top);
19181
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs + .c4p--page-header__title-row--sticky {
19182
+ top: var(--c4p--page-header--breadcrumb-top);
19211
19183
  }
19212
- .exp--page-header .exp--page-header__title-column {
19184
+ .c4p--page-header .c4p--page-header__title-column {
19213
19185
  overflow: hidden;
19214
19186
  /* required for ellipsis in title */
19215
19187
  min-height: 40px;
19216
19188
  flex: 0 0 100%;
19217
19189
  }
19218
19190
  @media (min-width: 42rem) {
19219
- .exp--page-header .exp--page-header__title-column {
19191
+ .c4p--page-header .c4p--page-header__title-column {
19220
19192
  max-width: 60%;
19221
19193
  flex: 1 0 60%;
19222
19194
  }
19223
19195
  }
19224
- .exp--page-header .exp--page-header__title {
19196
+ .c4p--page-header .c4p--page-header__title {
19225
19197
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
19226
19198
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
19227
19199
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -19230,72 +19202,73 @@ a.bx--side-nav__link--current::before {
19230
19202
  text-overflow: ellipsis;
19231
19203
  white-space: nowrap;
19232
19204
  }
19233
- .exp--page-header .exp--page-header__title-skeleton {
19205
+ .c4p--page-header .c4p--page-header__title-skeleton {
19234
19206
  height: var(--cds-spacing-07, 2rem);
19235
19207
  }
19236
- .exp--page-header .exp--page-header__title--fades {
19237
- opacity: calc(1 - var(--exp--page-header--breadcrumb-title-opacity));
19208
+ .c4p--page-header .c4p--page-header__title--fades {
19209
+ opacity: calc(1 - var(--c4p--page-header--breadcrumb-title-opacity));
19238
19210
  }
19239
- .exp--page-header .exp--page-header__title-icon {
19211
+ .c4p--page-header .c4p--page-header__title-icon {
19240
19212
  margin-right: var(--cds-spacing-04, 0.75rem);
19241
19213
  transform: translateY(-2px);
19242
19214
  vertical-align: middle;
19243
19215
  }
19244
- .exp--page-header .exp--page-header__page-actions {
19216
+ .c4p--page-header .c4p--page-header__page-actions {
19245
19217
  flex: 0 0 100%;
19246
19218
  margin-top: var(--cds-spacing-05, 1rem);
19247
19219
  white-space: nowrap;
19248
19220
  }
19249
19221
  @media (min-width: 42rem) {
19250
- .exp--page-header .exp--page-header__page-actions {
19222
+ .c4p--page-header .c4p--page-header__page-actions {
19251
19223
  max-width: 40%;
19252
19224
  flex: 0 1 40%;
19253
19225
  margin-top: 0;
19254
19226
  }
19255
19227
  }
19256
- .exp--page-header .exp--page-header__page-actions .bx--btn-set .bx--btn {
19228
+ .c4p--page-header .c4p--page-header__page-actions .bx--btn-set .bx--btn {
19257
19229
  width: initial;
19258
19230
  }
19259
- .exp--page-header .exp--page-header__action-bar-column .exp--page-header__page-actions {
19231
+ .c4p--page-header .c4p--page-header__action-bar-column .c4p--page-header__page-actions {
19260
19232
  margin-top: 0;
19261
19233
  }
19262
- .exp--page-header .exp--page-header__page-actions-container {
19234
+ .c4p--page-header .c4p--page-header__page-actions-container {
19263
19235
  justify-content: flex-start;
19264
19236
  }
19265
19237
  @media (min-width: 42rem) {
19266
- .exp--page-header .exp--page-header__page-actions-container {
19238
+ .c4p--page-header .c4p--page-header__page-actions-container {
19267
19239
  justify-content: flex-end;
19268
19240
  }
19269
19241
  }
19270
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions {
19242
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions {
19271
19243
  position: relative;
19272
19244
  opacity: 1;
19273
19245
  transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
19274
19246
  transition-property: opacity, visibility;
19275
19247
  visibility: visible;
19276
19248
  }
19277
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions::before {
19249
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
19278
19250
  --from-color: var(--cds-ui-background, #ffffff);
19279
19251
  --to-color: var(--cds-ui-01, #f4f4f4);
19252
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
19280
19253
  position: absolute;
19281
19254
  top: 0;
19282
19255
  left: 0;
19283
19256
  display: block;
19284
19257
  width: 100%;
19285
19258
  height: 100%;
19286
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
19259
+ animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19287
19260
  content: "";
19288
19261
  }
19289
- .exp--page-header .exp--page-header__page-actions-content {
19262
+ .c4p--page-header .c4p--page-header__page-actions-content {
19290
19263
  position: relative;
19291
19264
  width: 100%;
19292
19265
  height: 100%;
19293
19266
  }
19294
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions--in-breadcrumb {
19267
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
19295
19268
  opacity: 0;
19296
19269
  visibility: hidden;
19297
19270
  }
19298
- .exp--page-header .exp--page-header__subtitle-row {
19271
+ .c4p--page-header .c4p--page-header__subtitle-row {
19299
19272
  display: -webkit-box;
19300
19273
  overflow: hidden;
19301
19274
  max-width: 100%;
@@ -19304,58 +19277,58 @@ a.bx--side-nav__link--current::before {
19304
19277
  -webkit-line-clamp: 2;
19305
19278
  }
19306
19279
  @media (min-width: 42rem) {
19307
- .exp--page-header .exp--page-header__subtitle-row {
19280
+ .c4p--page-header .c4p--page-header__subtitle-row {
19308
19281
  max-width: 60%;
19309
19282
  }
19310
19283
  }
19311
- .exp--page-header .exp--page-header__subtitle-row + .exp--page-header__last-row-buffer--active {
19284
+ .c4p--page-header .c4p--page-header__subtitle-row + .c4p--page-header__last-row-buffer--active {
19312
19285
  height: var(--cds-spacing-05, 1rem);
19313
19286
  }
19314
- .exp--page-header .exp--page-header__subtitle {
19287
+ .c4p--page-header .c4p--page-header__subtitle {
19315
19288
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
19316
19289
  font-weight: var(--cds-body-long-01-font-weight, 400);
19317
19290
  line-height: var(--cds-body-long-01-line-height, 1.42857);
19318
19291
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19319
19292
  }
19320
- .exp--page-header .exp--page-header__available-row {
19293
+ .c4p--page-header .c4p--page-header__available-row {
19321
19294
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
19322
19295
  font-weight: var(--cds-body-long-01-font-weight, 400);
19323
19296
  line-height: var(--cds-body-long-01-line-height, 1.42857);
19324
19297
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19325
19298
  margin-top: var(--cds-spacing-03, 0.5rem);
19326
19299
  }
19327
- .exp--page-header .exp--page-header__available-row + .exp--page-header__last-row-buffer--active {
19300
+ .c4p--page-header .c4p--page-header__available-row + .c4p--page-header__last-row-buffer--active {
19328
19301
  height: var(--cds-spacing-05, 1rem);
19329
19302
  }
19330
- .exp--page-header .exp--page-header__title-row + .exp--page-header__available-row {
19303
+ .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__available-row {
19331
19304
  margin-top: var(--cds-spacing-05, 1rem);
19332
19305
  }
19333
- .exp--page-header .exp--page-header__available-row * {
19306
+ .c4p--page-header .c4p--page-header__available-row * {
19334
19307
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
19335
19308
  font-weight: var(--cds-body-long-01-font-weight, 400);
19336
19309
  line-height: var(--cds-body-long-01-line-height, 1.42857);
19337
19310
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19338
19311
  }
19339
- .exp--page-header .exp--page-header__navigation-row {
19312
+ .c4p--page-header .c4p--page-header__navigation-row {
19340
19313
  flex-wrap: wrap-reverse;
19341
19314
  margin-top: 0;
19342
19315
  }
19343
- .exp--page-header .exp--page-header__navigation-row .bx--content-switcher {
19316
+ .c4p--page-header .c4p--page-header__navigation-row .bx--content-switcher {
19344
19317
  box-sizing: content-box;
19345
19318
  padding-bottom: var(--cds-spacing-05, 1rem);
19346
19319
  }
19347
- .exp--page-header .exp--page-header__navigation-row .bx--tab-content {
19320
+ .c4p--page-header .c4p--page-header__navigation-row .bx--tab-content {
19348
19321
  display: none;
19349
19322
  /* need to figure out how to handle the tab content */
19350
19323
  }
19351
- .exp--page-header .exp--page-header__navigation-tabs {
19324
+ .c4p--page-header .c4p--page-header__navigation-tabs {
19352
19325
  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
19353
19326
  }
19354
- .exp--page-header .exp--page-header__navigation-row--has-tags .exp--page-header__navigation-tabs {
19327
+ .c4p--page-header .c4p--page-header__navigation-row--has-tags .c4p--page-header__navigation-tabs {
19355
19328
  max-width: 75%;
19356
19329
  flex: 0 1 75%;
19357
19330
  }
19358
- .exp--page-header .exp--page-header__navigation-tags {
19331
+ .c4p--page-header .c4p--page-header__navigation-tags {
19359
19332
  display: flex;
19360
19333
  max-width: 25%;
19361
19334
  flex: 1 0 25%;
@@ -19368,49 +19341,49 @@ a.bx--side-nav__link--current::before {
19368
19341
  white-space: nowrap;
19369
19342
  }
19370
19343
  @media (min-width: 42rem) {
19371
- .exp--page-header .exp--page-header__navigation-tags {
19344
+ .c4p--page-header .c4p--page-header__navigation-tags {
19372
19345
  padding-right: var(--cds-spacing-05, 1rem);
19373
19346
  }
19374
19347
  }
19375
- .exp--page-header .exp--page-header__navigation-tags--tags-only {
19348
+ .c4p--page-header .c4p--page-header__navigation-tags--tags-only {
19376
19349
  justify-content: flex-start;
19377
19350
  padding-top: 0;
19378
19351
  padding-bottom: var(--cds-spacing-04, 0.75rem);
19379
19352
  margin-left: calc(-1 * var(--cds-spacing-02, 0.25rem));
19380
19353
  text-align: initial;
19381
19354
  }
19382
- .exp--page-header .exp--page-header__navigation-row .bx--content-switcher-btn {
19355
+ .c4p--page-header .c4p--page-header__navigation-row .bx--content-switcher-btn {
19383
19356
  background-color: var(--cds-ui-background, #ffffff);
19384
19357
  }
19385
- .exp--page-header .bx--btn.bx--btn--icon-only.exp--page-header__collapse-expand-toggle {
19358
+ .c4p--page-header .bx--btn.bx--btn--icon-only.c4p--page-header__collapse-expand-toggle {
19386
19359
  position: absolute;
19387
19360
  z-index: 100;
19388
19361
  right: 0;
19389
19362
  bottom: 0;
19390
19363
  }
19391
- .exp--page-header .exp--page-header__collapse-expand-toggle .bx--btn__icon {
19364
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle .bx--btn__icon {
19392
19365
  transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
19393
19366
  }
19394
- .exp--page-header .exp--page-header__collapse-expand-toggle--collapsed .bx--btn__icon {
19367
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed .bx--btn__icon {
19395
19368
  transform: scaleY(-1);
19396
19369
  }
19397
19370
 
19398
19371
  :root {
19399
- --exp--page-header--tagset-tooltip-offset: 0;
19372
+ --c4p--page-header--tagset-tooltip-offset: 0;
19400
19373
  }
19401
19374
 
19402
- .exp--page-header__tagset-tooltip.exp--page-header__tagset-tooltip {
19403
- position: var(--exp--page-header--tagset-tooltip-position) !important;
19404
- top: var(--exp--page-header--tagset-tooltip-offset) !important;
19375
+ .c4p--page-header__tagset-tooltip.c4p--page-header__tagset-tooltip {
19376
+ position: var(--c4p--page-header--tagset-tooltip-position) !important;
19377
+ top: var(--c4p--page-header--tagset-tooltip-offset) !important;
19405
19378
  }
19406
19379
 
19407
- .exp--page-header__navigation-tags-overflow.bx--tooltip {
19380
+ .c4p--page-header__navigation-tags-overflow.bx--tooltip {
19408
19381
  z-index: 7999;
19409
19382
  }
19410
19383
 
19411
- .exp--page-header__action-bar-menu-options.bx--overflow-menu-options,
19384
+ .c4p--page-header__action-bar-menu-options.bx--overflow-menu-options,
19412
19385
  .bx--breadcrumb-menu-options.bx--overflow-menu-options,
19413
- .exp--page-header__button-set-menu-options.bx--overflow-menu-options {
19386
+ .c4p--page-header__button-set-menu-options.bx--overflow-menu-options {
19414
19387
  z-index: 7999;
19415
19388
  }
19416
19389
 
@@ -19488,47 +19461,47 @@ a.bx--side-nav__link--current::before {
19488
19461
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19489
19462
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19490
19463
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19491
- .exp--card__productive .exp--card__header {
19464
+ .c4p--card__productive .c4p--card__header {
19492
19465
  padding-right: 0;
19493
19466
  }
19494
- .exp--card__productive .exp--card__title {
19467
+ .c4p--card__productive .c4p--card__title {
19495
19468
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
19496
19469
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
19497
19470
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
19498
19471
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
19499
19472
  }
19500
- .exp--card__productive .exp--card__title-lg .exp--card__title {
19473
+ .c4p--card__productive .c4p--card__title-lg .c4p--card__title {
19501
19474
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
19502
19475
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
19503
19476
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
19504
19477
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
19505
19478
  }
19506
- .exp--card__productive .exp--card__body {
19479
+ .c4p--card__productive .c4p--card__body {
19507
19480
  padding-top: var(--cds-spacing-03, 0.5rem);
19508
19481
  }
19509
- .exp--card__productive .exp--card__footer {
19482
+ .c4p--card__productive .c4p--card__footer {
19510
19483
  align-items: center;
19511
19484
  justify-content: space-between;
19512
19485
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
19513
19486
  }
19514
- .exp--card__productive .exp--card__footer-no-button {
19487
+ .c4p--card__productive .c4p--card__footer-no-button {
19515
19488
  justify-content: flex-end;
19516
19489
  }
19517
- .exp--card__productive .exp--card__actions {
19490
+ .c4p--card__productive .c4p--card__actions {
19518
19491
  margin: 0;
19519
19492
  }
19520
- .exp--card__productive .exp--card__actions-header {
19493
+ .c4p--card__productive .c4p--card__actions-header {
19521
19494
  margin-top: calc(-1 * var(--cds-spacing-02, 0.25rem));
19522
19495
  margin-right: var(--cds-spacing-03, 0.5rem);
19523
19496
  }
19524
- .exp--card__productive .exp--card__title-lg .exp--card__actions-header,
19525
- .exp--card__productive .exp--card__header-has-label .exp--card__actions-header {
19497
+ .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
19498
+ .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
19526
19499
  margin-top: 0;
19527
19500
  }
19528
- .exp--card__productive .exp--card__icon {
19501
+ .c4p--card__productive .c4p--card__icon {
19529
19502
  margin-right: var(--cds-spacing-05, 1rem);
19530
19503
  }
19531
- .exp--card__productive .exp--card__header-container {
19504
+ .c4p--card__productive .c4p--card__header-container {
19532
19505
  align-items: start;
19533
19506
  }
19534
19507
 
@@ -19685,19 +19658,19 @@ a.bx--side-nav__link--current::before {
19685
19658
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19686
19659
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19687
19660
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19688
- .exp--remove-modal .bx--modal-footer .bx--btn {
19661
+ .c4p--remove-modal .bx--modal-footer .bx--btn {
19689
19662
  max-width: none;
19690
19663
  }
19691
19664
 
19692
- .exp--remove-modal .bx--modal-content {
19665
+ .c4p--remove-modal .bx--modal-content {
19693
19666
  padding-right: var(--cds-spacing-05, 1rem);
19694
19667
  }
19695
19668
 
19696
- .exp--remove-modal .bx--modal-close {
19669
+ .c4p--remove-modal .bx--modal-close {
19697
19670
  display: none;
19698
19671
  }
19699
19672
 
19700
- .exp--remove-modal__body {
19673
+ .c4p--remove-modal__body {
19701
19674
  padding-right: 20%;
19702
19675
  margin-bottom: var(--cds-spacing-05, 1rem);
19703
19676
  }
@@ -19800,26 +19773,26 @@ a.bx--side-nav__link--current::before {
19800
19773
  stroke-dashoffset: 0;
19801
19774
  }
19802
19775
  }
19803
- .exp--saving__message {
19776
+ .c4p--saving__message {
19804
19777
  display: flex;
19805
19778
  }
19806
19779
 
19807
- .exp--saving__error-icon {
19780
+ .c4p--saving__error-icon {
19808
19781
  margin-right: var(--cds-spacing-05, 1rem);
19809
19782
  }
19810
19783
 
19811
- .exp--saving__error-icon svg {
19784
+ .c4p--saving__error-icon svg {
19812
19785
  fill: var(--cds-danger-01, #da1e28);
19813
19786
  }
19814
19787
 
19815
- .exp--saving__text {
19788
+ .c4p--saving__text {
19816
19789
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
19817
19790
  font-weight: var(--cds-body-short-01-font-weight, 400);
19818
19791
  line-height: var(--cds-body-short-01-line-height, 1.28572);
19819
19792
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
19820
19793
  }
19821
19794
 
19822
- .exp--saving__buttons {
19795
+ .c4p--saving__buttons {
19823
19796
  display: flex;
19824
19797
  }
19825
19798
 
@@ -19993,403 +19966,403 @@ a.bx--side-nav__link--current::before {
19993
19966
  transform: scaleY(-1) rotate(0deg);
19994
19967
  }
19995
19968
  }
19996
- .exp--status-icon {
19969
+ .c4p--status-icon {
19997
19970
  display: flex;
19998
19971
  justify-content: flex-end;
19999
19972
  }
20000
19973
 
20001
- .exp--status-icon--light.exp--status-icon--light-minor-warning,
20002
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning {
19974
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning,
19975
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
20003
19976
  fill: #fddc69;
20004
19977
  }
20005
19978
 
20006
- .exp--status-icon--light.exp--status-icon--light-major-warning path:nth-of-type(1),
20007
- .exp--status-icon--dark.exp--status-icon--dark-major-warning path:nth-of-type(1),
20008
- .exp--status-icon--light.exp--status-icon--light-minor-warning path:nth-of-type(1),
20009
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning path:nth-of-type(1) {
19979
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning path:nth-of-type(1),
19980
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning path:nth-of-type(1),
19981
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning path:nth-of-type(1),
19982
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning path:nth-of-type(1) {
20010
19983
  fill: #161616;
20011
19984
  }
20012
19985
 
20013
- .exp--status-icon--light.exp--status-icon--light-fatal {
19986
+ .c4p--status-icon--light.c4p--status-icon--light-fatal {
20014
19987
  fill: #000000;
20015
19988
  }
20016
19989
  @media (prefers-reduced-motion) {
20017
- .exp--status-icon--light.exp--status-icon--light-fatal .exp--status-icon--light.exp--status-icon--light-in-progress {
19990
+ .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20018
19991
  animation: none;
20019
19992
  }
20020
19993
  }
20021
19994
 
20022
- .exp--status-icon--light.exp--status-icon--dark-fatal {
19995
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal {
20023
19996
  fill: #000000;
20024
19997
  }
20025
19998
  @media (prefers-reduced-motion) {
20026
- .exp--status-icon--light.exp--status-icon--dark-fatal .exp--status-icon--light.exp--status-icon--dark-in-progress {
19999
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20027
20000
  animation: none;
20028
20001
  }
20029
20002
  }
20030
20003
 
20031
- .exp--status-icon--light.exp--status-icon--light-critical {
20004
+ .c4p--status-icon--light.c4p--status-icon--light-critical {
20032
20005
  fill: #da1e28;
20033
20006
  }
20034
20007
  @media (prefers-reduced-motion) {
20035
- .exp--status-icon--light.exp--status-icon--light-critical .exp--status-icon--light.exp--status-icon--light-in-progress {
20008
+ .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20036
20009
  animation: none;
20037
20010
  }
20038
20011
  }
20039
20012
 
20040
- .exp--status-icon--light.exp--status-icon--dark-critical {
20013
+ .c4p--status-icon--light.c4p--status-icon--dark-critical {
20041
20014
  fill: #da1e28;
20042
20015
  }
20043
20016
  @media (prefers-reduced-motion) {
20044
- .exp--status-icon--light.exp--status-icon--dark-critical .exp--status-icon--light.exp--status-icon--dark-in-progress {
20017
+ .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20045
20018
  animation: none;
20046
20019
  }
20047
20020
  }
20048
20021
 
20049
- .exp--status-icon--light.exp--status-icon--light-major-warning {
20022
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning {
20050
20023
  fill: #ff832b;
20051
20024
  }
20052
20025
  @media (prefers-reduced-motion) {
20053
- .exp--status-icon--light.exp--status-icon--light-major-warning .exp--status-icon--light.exp--status-icon--light-in-progress {
20026
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20054
20027
  animation: none;
20055
20028
  }
20056
20029
  }
20057
20030
 
20058
- .exp--status-icon--light.exp--status-icon--dark-major-warning {
20031
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning {
20059
20032
  fill: #ff832b;
20060
20033
  }
20061
20034
  @media (prefers-reduced-motion) {
20062
- .exp--status-icon--light.exp--status-icon--dark-major-warning .exp--status-icon--light.exp--status-icon--dark-in-progress {
20035
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20063
20036
  animation: none;
20064
20037
  }
20065
20038
  }
20066
20039
 
20067
- .exp--status-icon--light.exp--status-icon--light-minor-warning {
20040
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning {
20068
20041
  fill: #fddc69;
20069
20042
  }
20070
20043
  @media (prefers-reduced-motion) {
20071
- .exp--status-icon--light.exp--status-icon--light-minor-warning .exp--status-icon--light.exp--status-icon--light-in-progress {
20044
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20072
20045
  animation: none;
20073
20046
  }
20074
20047
  }
20075
20048
 
20076
- .exp--status-icon--light.exp--status-icon--dark-minor-warning {
20049
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning {
20077
20050
  fill: #fddc69;
20078
20051
  }
20079
20052
  @media (prefers-reduced-motion) {
20080
- .exp--status-icon--light.exp--status-icon--dark-minor-warning .exp--status-icon--light.exp--status-icon--dark-in-progress {
20053
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20081
20054
  animation: none;
20082
20055
  }
20083
20056
  }
20084
20057
 
20085
- .exp--status-icon--light.exp--status-icon--light-undefined {
20058
+ .c4p--status-icon--light.c4p--status-icon--light-undefined {
20086
20059
  fill: #8a3ffc;
20087
20060
  }
20088
20061
  @media (prefers-reduced-motion) {
20089
- .exp--status-icon--light.exp--status-icon--light-undefined .exp--status-icon--light.exp--status-icon--light-in-progress {
20062
+ .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20090
20063
  animation: none;
20091
20064
  }
20092
20065
  }
20093
20066
 
20094
- .exp--status-icon--light.exp--status-icon--dark-undefined {
20067
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined {
20095
20068
  fill: #8a3ffc;
20096
20069
  }
20097
20070
  @media (prefers-reduced-motion) {
20098
- .exp--status-icon--light.exp--status-icon--dark-undefined .exp--status-icon--light.exp--status-icon--dark-in-progress {
20071
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20099
20072
  animation: none;
20100
20073
  }
20101
20074
  }
20102
20075
 
20103
- .exp--status-icon--light.exp--status-icon--light-unknown {
20076
+ .c4p--status-icon--light.c4p--status-icon--light-unknown {
20104
20077
  fill: #6f6f6f;
20105
20078
  }
20106
20079
  @media (prefers-reduced-motion) {
20107
- .exp--status-icon--light.exp--status-icon--light-unknown .exp--status-icon--light.exp--status-icon--light-in-progress {
20080
+ .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20108
20081
  animation: none;
20109
20082
  }
20110
20083
  }
20111
20084
 
20112
- .exp--status-icon--light.exp--status-icon--dark-unknown {
20085
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown {
20113
20086
  fill: #6f6f6f;
20114
20087
  }
20115
20088
  @media (prefers-reduced-motion) {
20116
- .exp--status-icon--light.exp--status-icon--dark-unknown .exp--status-icon--light.exp--status-icon--dark-in-progress {
20089
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20117
20090
  animation: none;
20118
20091
  }
20119
20092
  }
20120
20093
 
20121
- .exp--status-icon--light.exp--status-icon--light-normal {
20094
+ .c4p--status-icon--light.c4p--status-icon--light-normal {
20122
20095
  fill: #198038;
20123
20096
  }
20124
20097
  @media (prefers-reduced-motion) {
20125
- .exp--status-icon--light.exp--status-icon--light-normal .exp--status-icon--light.exp--status-icon--light-in-progress {
20098
+ .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20126
20099
  animation: none;
20127
20100
  }
20128
20101
  }
20129
20102
 
20130
- .exp--status-icon--light.exp--status-icon--dark-normal {
20103
+ .c4p--status-icon--light.c4p--status-icon--dark-normal {
20131
20104
  fill: #198038;
20132
20105
  }
20133
20106
  @media (prefers-reduced-motion) {
20134
- .exp--status-icon--light.exp--status-icon--dark-normal .exp--status-icon--light.exp--status-icon--dark-in-progress {
20107
+ .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20135
20108
  animation: none;
20136
20109
  }
20137
20110
  }
20138
20111
 
20139
- .exp--status-icon--light.exp--status-icon--light-info {
20112
+ .c4p--status-icon--light.c4p--status-icon--light-info {
20140
20113
  fill: #0f62fe;
20141
20114
  }
20142
20115
  @media (prefers-reduced-motion) {
20143
- .exp--status-icon--light.exp--status-icon--light-info .exp--status-icon--light.exp--status-icon--light-in-progress {
20116
+ .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20144
20117
  animation: none;
20145
20118
  }
20146
20119
  }
20147
20120
 
20148
- .exp--status-icon--light.exp--status-icon--dark-info {
20121
+ .c4p--status-icon--light.c4p--status-icon--dark-info {
20149
20122
  fill: #0f62fe;
20150
20123
  }
20151
20124
  @media (prefers-reduced-motion) {
20152
- .exp--status-icon--light.exp--status-icon--dark-info .exp--status-icon--light.exp--status-icon--dark-in-progress {
20125
+ .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20153
20126
  animation: none;
20154
20127
  }
20155
20128
  }
20156
20129
 
20157
- .exp--status-icon--light.exp--status-icon--light-in-progress {
20130
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20158
20131
  animation: rotating 8000ms infinite linear;
20159
20132
  fill: #0f62fe;
20160
20133
  }
20161
20134
  @media (prefers-reduced-motion: reduce) {
20162
- .exp--status-icon--light.exp--status-icon--light-in-progress {
20135
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20163
20136
  animation: none;
20164
20137
  }
20165
20138
  }
20166
20139
 
20167
- .exp--status-icon--light.exp--status-icon--dark-in-progress {
20140
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20168
20141
  animation: rotating 8000ms infinite linear;
20169
20142
  fill: #0f62fe;
20170
20143
  }
20171
20144
  @media (prefers-reduced-motion: reduce) {
20172
- .exp--status-icon--light.exp--status-icon--dark-in-progress {
20145
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20173
20146
  animation: none;
20174
20147
  }
20175
20148
  }
20176
20149
 
20177
- .exp--status-icon--light.exp--status-icon--light-running {
20150
+ .c4p--status-icon--light.c4p--status-icon--light-running {
20178
20151
  fill: #198038;
20179
20152
  transform: scaleY(-1);
20180
20153
  }
20181
20154
 
20182
- .exp--status-icon--light.exp--status-icon--dark-running {
20155
+ .c4p--status-icon--light.c4p--status-icon--dark-running {
20183
20156
  fill: #198038;
20184
20157
  transform: scaleY(-1);
20185
20158
  }
20186
20159
 
20187
- .exp--status-icon--light.exp--status-icon--light-pending {
20160
+ .c4p--status-icon--light.c4p--status-icon--light-pending {
20188
20161
  fill: #6f6f6f;
20189
20162
  }
20190
20163
  @media (prefers-reduced-motion) {
20191
- .exp--status-icon--light.exp--status-icon--light-pending .exp--status-icon--light.exp--status-icon--light-in-progress {
20164
+ .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20192
20165
  animation: none;
20193
20166
  }
20194
20167
  }
20195
20168
 
20196
- .exp--status-icon--light.exp--status-icon--dark-pending {
20169
+ .c4p--status-icon--light.c4p--status-icon--dark-pending {
20197
20170
  fill: #6f6f6f;
20198
20171
  }
20199
20172
  @media (prefers-reduced-motion) {
20200
- .exp--status-icon--light.exp--status-icon--dark-pending .exp--status-icon--light.exp--status-icon--dark-in-progress {
20173
+ .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20201
20174
  animation: none;
20202
20175
  }
20203
20176
  }
20204
20177
 
20205
- .exp--status-icon--dark.exp--status-icon--light-fatal {
20178
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal {
20206
20179
  fill: #8d8d8d;
20207
20180
  }
20208
20181
  @media (prefers-reduced-motion) {
20209
- .exp--status-icon--dark.exp--status-icon--light-fatal .exp--status-icon--dark.exp--status-icon--light-in-progress {
20182
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20210
20183
  animation: none;
20211
20184
  }
20212
20185
  }
20213
20186
 
20214
- .exp--status-icon--dark.exp--status-icon--dark-fatal {
20187
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal {
20215
20188
  fill: #8d8d8d;
20216
20189
  }
20217
20190
  @media (prefers-reduced-motion) {
20218
- .exp--status-icon--dark.exp--status-icon--dark-fatal .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20191
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20219
20192
  animation: none;
20220
20193
  }
20221
20194
  }
20222
20195
 
20223
- .exp--status-icon--dark.exp--status-icon--light-critical {
20196
+ .c4p--status-icon--dark.c4p--status-icon--light-critical {
20224
20197
  fill: #fa4d56;
20225
20198
  }
20226
20199
  @media (prefers-reduced-motion) {
20227
- .exp--status-icon--dark.exp--status-icon--light-critical .exp--status-icon--dark.exp--status-icon--light-in-progress {
20200
+ .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20228
20201
  animation: none;
20229
20202
  }
20230
20203
  }
20231
20204
 
20232
- .exp--status-icon--dark.exp--status-icon--dark-critical {
20205
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical {
20233
20206
  fill: #fa4d56;
20234
20207
  }
20235
20208
  @media (prefers-reduced-motion) {
20236
- .exp--status-icon--dark.exp--status-icon--dark-critical .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20209
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20237
20210
  animation: none;
20238
20211
  }
20239
20212
  }
20240
20213
 
20241
- .exp--status-icon--dark.exp--status-icon--light-major-warning {
20214
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning {
20242
20215
  fill: #ff832b;
20243
20216
  }
20244
20217
  @media (prefers-reduced-motion) {
20245
- .exp--status-icon--dark.exp--status-icon--light-major-warning .exp--status-icon--dark.exp--status-icon--light-in-progress {
20218
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20246
20219
  animation: none;
20247
20220
  }
20248
20221
  }
20249
20222
 
20250
- .exp--status-icon--dark.exp--status-icon--dark-major-warning {
20223
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning {
20251
20224
  fill: #ff832b;
20252
20225
  }
20253
20226
  @media (prefers-reduced-motion) {
20254
- .exp--status-icon--dark.exp--status-icon--dark-major-warning .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20227
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20255
20228
  animation: none;
20256
20229
  }
20257
20230
  }
20258
20231
 
20259
- .exp--status-icon--dark.exp--status-icon--light-minor-warning {
20232
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning {
20260
20233
  fill: #fddc69;
20261
20234
  }
20262
20235
  @media (prefers-reduced-motion) {
20263
- .exp--status-icon--dark.exp--status-icon--light-minor-warning .exp--status-icon--dark.exp--status-icon--light-in-progress {
20236
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20264
20237
  animation: none;
20265
20238
  }
20266
20239
  }
20267
20240
 
20268
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning {
20241
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
20269
20242
  fill: #fddc69;
20270
20243
  }
20271
20244
  @media (prefers-reduced-motion) {
20272
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20245
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20273
20246
  animation: none;
20274
20247
  }
20275
20248
  }
20276
20249
 
20277
- .exp--status-icon--dark.exp--status-icon--light-undefined {
20250
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined {
20278
20251
  fill: #a56eff;
20279
20252
  }
20280
20253
  @media (prefers-reduced-motion) {
20281
- .exp--status-icon--dark.exp--status-icon--light-undefined .exp--status-icon--dark.exp--status-icon--light-in-progress {
20254
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20282
20255
  animation: none;
20283
20256
  }
20284
20257
  }
20285
20258
 
20286
- .exp--status-icon--dark.exp--status-icon--dark-undefined {
20259
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined {
20287
20260
  fill: #a56eff;
20288
20261
  }
20289
20262
  @media (prefers-reduced-motion) {
20290
- .exp--status-icon--dark.exp--status-icon--dark-undefined .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20263
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20291
20264
  animation: none;
20292
20265
  }
20293
20266
  }
20294
20267
 
20295
- .exp--status-icon--dark.exp--status-icon--light-unknown {
20268
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown {
20296
20269
  fill: #8d8d8d;
20297
20270
  }
20298
20271
  @media (prefers-reduced-motion) {
20299
- .exp--status-icon--dark.exp--status-icon--light-unknown .exp--status-icon--dark.exp--status-icon--light-in-progress {
20272
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20300
20273
  animation: none;
20301
20274
  }
20302
20275
  }
20303
20276
 
20304
- .exp--status-icon--dark.exp--status-icon--dark-unknown {
20277
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown {
20305
20278
  fill: #8d8d8d;
20306
20279
  }
20307
20280
  @media (prefers-reduced-motion) {
20308
- .exp--status-icon--dark.exp--status-icon--dark-unknown .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20281
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20309
20282
  animation: none;
20310
20283
  }
20311
20284
  }
20312
20285
 
20313
- .exp--status-icon--dark.exp--status-icon--light-normal {
20286
+ .c4p--status-icon--dark.c4p--status-icon--light-normal {
20314
20287
  fill: #24a148;
20315
20288
  }
20316
20289
  @media (prefers-reduced-motion) {
20317
- .exp--status-icon--dark.exp--status-icon--light-normal .exp--status-icon--dark.exp--status-icon--light-in-progress {
20290
+ .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20318
20291
  animation: none;
20319
20292
  }
20320
20293
  }
20321
20294
 
20322
- .exp--status-icon--dark.exp--status-icon--dark-normal {
20295
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal {
20323
20296
  fill: #24a148;
20324
20297
  }
20325
20298
  @media (prefers-reduced-motion) {
20326
- .exp--status-icon--dark.exp--status-icon--dark-normal .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20299
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20327
20300
  animation: none;
20328
20301
  }
20329
20302
  }
20330
20303
 
20331
- .exp--status-icon--dark.exp--status-icon--light-info {
20304
+ .c4p--status-icon--dark.c4p--status-icon--light-info {
20332
20305
  fill: #4589ff;
20333
20306
  }
20334
20307
  @media (prefers-reduced-motion) {
20335
- .exp--status-icon--dark.exp--status-icon--light-info .exp--status-icon--dark.exp--status-icon--light-in-progress {
20308
+ .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20336
20309
  animation: none;
20337
20310
  }
20338
20311
  }
20339
20312
 
20340
- .exp--status-icon--dark.exp--status-icon--dark-info {
20313
+ .c4p--status-icon--dark.c4p--status-icon--dark-info {
20341
20314
  fill: #4589ff;
20342
20315
  }
20343
20316
  @media (prefers-reduced-motion) {
20344
- .exp--status-icon--dark.exp--status-icon--dark-info .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20317
+ .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20345
20318
  animation: none;
20346
20319
  }
20347
20320
  }
20348
20321
 
20349
- .exp--status-icon--dark.exp--status-icon--light-in-progress {
20322
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20350
20323
  animation: rotating 8000ms infinite linear;
20351
20324
  fill: #4589ff;
20352
20325
  }
20353
20326
  @media (prefers-reduced-motion: reduce) {
20354
- .exp--status-icon--dark.exp--status-icon--light-in-progress {
20327
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20355
20328
  animation: none;
20356
20329
  }
20357
20330
  }
20358
20331
 
20359
- .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20332
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20360
20333
  animation: rotating 8000ms infinite linear;
20361
20334
  fill: #4589ff;
20362
20335
  }
20363
20336
  @media (prefers-reduced-motion: reduce) {
20364
- .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20337
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20365
20338
  animation: none;
20366
20339
  }
20367
20340
  }
20368
20341
 
20369
- .exp--status-icon--dark.exp--status-icon--light-running {
20342
+ .c4p--status-icon--dark.c4p--status-icon--light-running {
20370
20343
  fill: #24a148;
20371
20344
  transform: scaleY(-1);
20372
20345
  }
20373
20346
 
20374
- .exp--status-icon--dark.exp--status-icon--dark-running {
20347
+ .c4p--status-icon--dark.c4p--status-icon--dark-running {
20375
20348
  fill: #24a148;
20376
20349
  transform: scaleY(-1);
20377
20350
  }
20378
20351
 
20379
- .exp--status-icon--dark.exp--status-icon--light-pending {
20352
+ .c4p--status-icon--dark.c4p--status-icon--light-pending {
20380
20353
  fill: #8d8d8d;
20381
20354
  }
20382
20355
  @media (prefers-reduced-motion) {
20383
- .exp--status-icon--dark.exp--status-icon--light-pending .exp--status-icon--dark.exp--status-icon--light-in-progress {
20356
+ .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20384
20357
  animation: none;
20385
20358
  }
20386
20359
  }
20387
20360
 
20388
- .exp--status-icon--dark.exp--status-icon--dark-pending {
20361
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending {
20389
20362
  fill: #8d8d8d;
20390
20363
  }
20391
20364
  @media (prefers-reduced-motion) {
20392
- .exp--status-icon--dark.exp--status-icon--dark-pending .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20365
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20393
20366
  animation: none;
20394
20367
  }
20395
20368
  }
@@ -20745,48 +20718,48 @@ a.bx--side-nav__link--current::before {
20745
20718
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20746
20719
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20747
20720
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20748
- .exp--toolbar {
20721
+ .c4p--toolbar {
20749
20722
  display: flex;
20750
20723
  min-width: 2.5rem;
20751
20724
  min-height: 2.5rem;
20752
20725
  background-color: var(--cds-ui-01, #f4f4f4);
20753
20726
  }
20754
20727
  @media (min-width: 66rem) {
20755
- .exp--toolbar {
20728
+ .c4p--toolbar {
20756
20729
  justify-content: flex-end;
20757
20730
  }
20758
20731
  }
20759
20732
 
20760
- .exp--toolbar--vertical,
20761
- .exp--toolbar--vertical > .exp--toolbar__group {
20733
+ .c4p--toolbar--vertical,
20734
+ .c4p--toolbar--vertical > .c4p--toolbar__group {
20762
20735
  flex-wrap: wrap;
20763
20736
  }
20764
20737
 
20765
- .exp--toolbar--vertical {
20738
+ .c4p--toolbar--vertical {
20766
20739
  max-width: 2.5rem;
20767
20740
  }
20768
20741
 
20769
- .exp--toolbar__group {
20742
+ .c4p--toolbar__group {
20770
20743
  display: flex;
20771
20744
  border-right: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
20772
20745
  border-bottom: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
20773
20746
  }
20774
20747
 
20775
- .exp--toolbar--vertical > .exp--toolbar__group,
20776
- .exp--toolbar__group:last-of-type {
20748
+ .c4p--toolbar--vertical > .c4p--toolbar__group,
20749
+ .c4p--toolbar__group:last-of-type {
20777
20750
  border-right-width: 0;
20778
20751
  }
20779
20752
 
20780
- .exp--toolbar--vertical > .exp--toolbar__group:last-of-type,
20781
- .exp--toolbar .bx--dropdown {
20753
+ .c4p--toolbar--vertical > .c4p--toolbar__group:last-of-type,
20754
+ .c4p--toolbar .bx--dropdown {
20782
20755
  border-bottom-width: 0;
20783
20756
  }
20784
20757
 
20785
- .exp--toolbar__button--caret {
20758
+ .c4p--toolbar__button--caret {
20786
20759
  position: relative;
20787
20760
  }
20788
20761
 
20789
- .exp--toolbar__button__caret {
20762
+ .c4p--toolbar__button__caret {
20790
20763
  position: absolute;
20791
20764
  right: 0.125rem;
20792
20765
  bottom: 0.125rem;
@@ -20824,7 +20797,7 @@ a.bx--side-nav__link--current::before {
20824
20797
  component is because we want these colors to always be the same
20825
20798
  despite of which carbon theme the user has.
20826
20799
  */
20827
- .exp--web-terminal {
20800
+ .c4p--web-terminal {
20828
20801
  --cds-interactive-01: #0f62fe;
20829
20802
  --cds-interactive-02: #6f6f6f;
20830
20803
  --cds-interactive-03: #ffffff;
@@ -21258,7 +21231,7 @@ a.bx--side-nav__link--current::before {
21258
21231
  background-color: #161616;
21259
21232
  }
21260
21233
 
21261
- .exp--web-terminal__bar {
21234
+ .c4p--web-terminal__bar {
21262
21235
  display: flex;
21263
21236
  height: 3rem;
21264
21237
  align-items: center;
@@ -21266,11 +21239,11 @@ a.bx--side-nav__link--current::before {
21266
21239
  background-color: var(--cds-ui-background, #ffffff);
21267
21240
  }
21268
21241
 
21269
- .exp--web-terminal__actions {
21242
+ .c4p--web-terminal__actions {
21270
21243
  display: flex;
21271
21244
  }
21272
21245
 
21273
- .exp--web-terminal__documentation-overflow {
21246
+ .c4p--web-terminal__documentation-overflow {
21274
21247
  --cds-interactive-01: #0f62fe;
21275
21248
  --cds-interactive-02: #6f6f6f;
21276
21249
  --cds-interactive-03: #ffffff;
@@ -21695,7 +21668,7 @@ a.bx--side-nav__link--current::before {
21695
21668
  --cds-icon-size-02: 1.25rem;
21696
21669
  }
21697
21670
 
21698
- .exp--web-terminal__body {
21671
+ .c4p--web-terminal__body {
21699
21672
  height: 100%;
21700
21673
  }
21701
21674
 
@@ -21734,111 +21707,111 @@ a.bx--side-nav__link--current::before {
21734
21707
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21735
21708
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21736
21709
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21737
- .exp-user-profile-avatar--light {
21710
+ .c4p--user-profile-image--light {
21738
21711
  color: var(--cds-ui-01, #f4f4f4);
21739
21712
  }
21740
21713
 
21741
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-cyan {
21714
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-cyan {
21742
21715
  background-color: #0072c3;
21743
21716
  }
21744
21717
 
21745
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-cyan {
21718
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-cyan {
21746
21719
  background-color: #003a6d;
21747
21720
  }
21748
21721
 
21749
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-gray {
21722
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-gray {
21750
21723
  background-color: #6f6f6f;
21751
21724
  }
21752
21725
 
21753
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-gray {
21726
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-gray {
21754
21727
  background-color: #393939;
21755
21728
  }
21756
21729
 
21757
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-green {
21730
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-green {
21758
21731
  background-color: #198038;
21759
21732
  }
21760
21733
 
21761
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-green {
21734
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-green {
21762
21735
  background-color: #044317;
21763
21736
  }
21764
21737
 
21765
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-magenta {
21738
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-magenta {
21766
21739
  background-color: #d02670;
21767
21740
  }
21768
21741
 
21769
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-magenta {
21742
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-magenta {
21770
21743
  background-color: #740937;
21771
21744
  }
21772
21745
 
21773
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-purple {
21746
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-purple {
21774
21747
  background-color: #8a3ffc;
21775
21748
  }
21776
21749
 
21777
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-purple {
21750
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-purple {
21778
21751
  background-color: #491d8b;
21779
21752
  }
21780
21753
 
21781
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-teal {
21754
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-teal {
21782
21755
  background-color: #007d79;
21783
21756
  }
21784
21757
 
21785
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-teal {
21758
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-teal {
21786
21759
  background-color: #004144;
21787
21760
  }
21788
21761
 
21789
- .exp-user-profile-avatar--dark {
21762
+ .c4p--user-profile-image--dark {
21790
21763
  color: var(--cds-ui-01, #f4f4f4);
21791
21764
  }
21792
21765
 
21793
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-cyan {
21766
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-cyan {
21794
21767
  background-color: #1192e8;
21795
21768
  }
21796
21769
 
21797
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-cyan {
21770
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-cyan {
21798
21771
  background-color: #82cfff;
21799
21772
  }
21800
21773
 
21801
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-gray {
21774
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-gray {
21802
21775
  background-color: #8d8d8d;
21803
21776
  }
21804
21777
 
21805
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-gray {
21778
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-gray {
21806
21779
  background-color: #c6c6c6;
21807
21780
  }
21808
21781
 
21809
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-green {
21782
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-green {
21810
21783
  background-color: #24a148;
21811
21784
  }
21812
21785
 
21813
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-green {
21786
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-green {
21814
21787
  background-color: #6fdc8c;
21815
21788
  }
21816
21789
 
21817
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-magenta {
21790
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-magenta {
21818
21791
  background-color: #ee5396;
21819
21792
  }
21820
21793
 
21821
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-magenta {
21794
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-magenta {
21822
21795
  background-color: #ffafd2;
21823
21796
  }
21824
21797
 
21825
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-purple {
21798
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-purple {
21826
21799
  background-color: #a56eff;
21827
21800
  }
21828
21801
 
21829
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-purple {
21802
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-purple {
21830
21803
  background-color: #d4bbff;
21831
21804
  }
21832
21805
 
21833
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-teal {
21806
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-teal {
21834
21807
  background-color: #009d9a;
21835
21808
  }
21836
21809
 
21837
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-teal {
21810
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-teal {
21838
21811
  background-color: #3ddbd9;
21839
21812
  }
21840
21813
 
21841
- .exp-user-profile-avatar {
21814
+ .c4p--user-profile-image {
21842
21815
  display: flex;
21843
21816
  flex-direction: column;
21844
21817
  align-items: center;
@@ -21847,41 +21820,41 @@ a.bx--side-nav__link--current::before {
21847
21820
  text-transform: uppercase;
21848
21821
  }
21849
21822
 
21850
- .bx--tooltip__trigger .exp-user-profile-avatar svg {
21823
+ .bx--tooltip__trigger .c4p--user-profile-image svg {
21851
21824
  fill: var(--cds-ui-01, #f4f4f4);
21852
21825
  }
21853
21826
 
21854
- .exp-user-profile-avatar__photo {
21827
+ .c4p--user-profile-image__photo {
21855
21828
  width: 100%;
21856
21829
  border-radius: 100%;
21857
21830
  }
21858
21831
 
21859
- .exp-user-profile-avatar__photo--xlg {
21832
+ .c4p--user-profile-image__photo--xlg {
21860
21833
  width: var(--cds-spacing-10, 4rem);
21861
21834
  height: var(--cds-spacing-10, 4rem);
21862
21835
  }
21863
21836
 
21864
- .exp-user-profile-avatar__photo--lg {
21837
+ .c4p--user-profile-image__photo--lg {
21865
21838
  width: var(--cds-spacing-07, 2rem);
21866
21839
  height: var(--cds-spacing-07, 2rem);
21867
21840
  }
21868
21841
 
21869
- .exp-user-profile-avatar__photo--md {
21842
+ .c4p--user-profile-image__photo--md {
21870
21843
  width: var(--cds-spacing-06, 1.5rem);
21871
21844
  height: var(--cds-spacing-06, 1.5rem);
21872
21845
  }
21873
21846
 
21874
- .exp-user-profile-avatar__photo--sm {
21847
+ .c4p--user-profile-image__photo--sm {
21875
21848
  width: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21876
21849
  height: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21877
21850
  }
21878
21851
 
21879
- .exp-user-profile-avatar__photo--xs {
21852
+ .c4p--user-profile-image__photo--xs {
21880
21853
  width: var(--cds-spacing-05, 1rem);
21881
21854
  height: var(--cds-spacing-05, 1rem);
21882
21855
  }
21883
21856
 
21884
- .exp-user-profile-avatar--xlg {
21857
+ .c4p--user-profile-image--xlg {
21885
21858
  width: var(--cds-spacing-10, 4rem);
21886
21859
  height: var(--cds-spacing-10, 4rem);
21887
21860
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
@@ -21890,7 +21863,7 @@ a.bx--side-nav__link--current::before {
21890
21863
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
21891
21864
  }
21892
21865
 
21893
- .exp-user-profile-avatar--lg {
21866
+ .c4p--user-profile-image--lg {
21894
21867
  width: var(--cds-spacing-07, 2rem);
21895
21868
  height: var(--cds-spacing-07, 2rem);
21896
21869
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -21899,7 +21872,7 @@ a.bx--side-nav__link--current::before {
21899
21872
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
21900
21873
  }
21901
21874
 
21902
- .exp-user-profile-avatar--md {
21875
+ .c4p--user-profile-image--md {
21903
21876
  width: var(--cds-spacing-06, 1.5rem);
21904
21877
  height: var(--cds-spacing-06, 1.5rem);
21905
21878
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -21909,7 +21882,7 @@ a.bx--side-nav__link--current::before {
21909
21882
  font-weight: 600;
21910
21883
  }
21911
21884
 
21912
- .exp-user-profile-avatar--sm {
21885
+ .c4p--user-profile-image--sm {
21913
21886
  width: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21914
21887
  height: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21915
21888
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -21919,7 +21892,7 @@ a.bx--side-nav__link--current::before {
21919
21892
  font-weight: 600;
21920
21893
  }
21921
21894
 
21922
- .exp-user-profile-avatar--xs {
21895
+ .c4p--user-profile-image--xs {
21923
21896
  width: var(--cds-spacing-05, 1rem);
21924
21897
  height: var(--cds-spacing-05, 1rem);
21925
21898
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -22105,32 +22078,32 @@ a.bx--side-nav__link--current::before {
22105
22078
  stroke-dashoffset: 0;
22106
22079
  }
22107
22080
  }
22108
- .exp--edit-side-panel .bx--form.exp--edit-side-panel__form {
22081
+ .c4p--edit-side-panel .bx--form.c4p--edit-side-panel__form {
22109
22082
  padding-top: var(--cds-spacing-05, 1rem);
22110
22083
  }
22111
- .exp--edit-side-panel .exp--edit-side-panel__form.bx--fieldset {
22084
+ .c4p--edit-side-panel .c4p--edit-side-panel__form.bx--fieldset {
22112
22085
  padding-top: var(--cds-spacing-03, 0.5rem);
22113
22086
  }
22114
- .exp--edit-side-panel .exp--edit-side-panel__form > * {
22087
+ .c4p--edit-side-panel .c4p--edit-side-panel__form > * {
22115
22088
  margin-bottom: var(--cds-spacing-05, 1rem);
22116
22089
  }
22117
- .exp--edit-side-panel .exp--edit-side-panel__form-title-text {
22090
+ .c4p--edit-side-panel .c4p--edit-side-panel__form-title-text {
22118
22091
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
22119
22092
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
22120
22093
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
22121
22094
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
22122
22095
  padding-bottom: var(--cds-spacing-03, 0.5rem);
22123
22096
  }
22124
- .exp--edit-side-panel .exp--edit-side-panel__form-description-text {
22097
+ .c4p--edit-side-panel .c4p--edit-side-panel__form-description-text {
22125
22098
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
22126
22099
  font-weight: var(--cds-body-long-01-font-weight, 400);
22127
22100
  line-height: var(--cds-body-long-01-line-height, 1.42857);
22128
22101
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
22129
22102
  }
22130
- .exp--edit-side-panel.exp--side-panel .bx--btn.exp--side-panel__close-button {
22103
+ .c4p--edit-side-panel.c4p--side-panel .bx--btn.c4p--side-panel__close-button {
22131
22104
  display: none;
22132
22105
  }
22133
- .exp--edit-side-panel .exp--side-panel .exp--edit-side-panel__actions-container {
22106
+ .c4p--edit-side-panel .c4p--side-panel .c4p--edit-side-panel__actions-container {
22134
22107
  position: absolute;
22135
22108
  z-index: 4;
22136
22109
  bottom: 0;
@@ -22149,26 +22122,26 @@ a.bx--side-nav__link--current::before {
22149
22122
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22150
22123
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22151
22124
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22152
- .exp--options-tile {
22125
+ .c4p--options-tile {
22153
22126
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
22154
22127
  background-color: var(--cds-ui-01, #f4f4f4);
22155
22128
  }
22156
22129
 
22157
- .exp--options-tile__toggle-container {
22130
+ .c4p--options-tile__toggle-container {
22158
22131
  position: relative;
22159
22132
  }
22160
22133
 
22161
- .exp--options-tile__toggle {
22134
+ .c4p--options-tile__toggle {
22162
22135
  position: absolute;
22163
22136
  right: var(--cds-spacing-05, 1rem);
22164
22137
  }
22165
22138
 
22166
- .exp--options-tile__toggle .bx--toggle-input__label .bx--toggle__switch {
22139
+ .c4p--options-tile__toggle .bx--toggle-input__label .bx--toggle__switch {
22167
22140
  margin: 0;
22168
22141
  }
22169
22142
 
22170
- .exp--options-tile__header,
22171
- .exp--options-tile__static-content {
22143
+ .c4p--options-tile__header,
22144
+ .c4p--options-tile__static-content {
22172
22145
  display: grid;
22173
22146
  box-sizing: border-box;
22174
22147
  align-items: center;
@@ -22176,31 +22149,31 @@ a.bx--side-nav__link--current::before {
22176
22149
  grid-template-columns: 3rem 1fr 1rem;
22177
22150
  }
22178
22151
 
22179
- .exp--options-tile__header {
22152
+ .c4p--options-tile__header {
22180
22153
  background-color: transparent;
22181
22154
  cursor: pointer;
22182
22155
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
22183
22156
  }
22184
22157
 
22185
- .exp--options-tile__header:hover {
22158
+ .c4p--options-tile__header:hover {
22186
22159
  background-color: var(--cds-hover-ui, #e5e5e5);
22187
22160
  }
22188
22161
 
22189
- .exp--options-tile__header:focus {
22162
+ .c4p--options-tile__header:focus {
22190
22163
  outline: 2px solid var(--cds-focus, #0f62fe);
22191
22164
  outline-offset: -2px;
22192
22165
  }
22193
22166
  @media screen and (prefers-contrast) {
22194
- .exp--options-tile__header:focus {
22167
+ .c4p--options-tile__header:focus {
22195
22168
  outline-style: dotted;
22196
22169
  }
22197
22170
  }
22198
22171
 
22199
- .exp--options-tile__title {
22172
+ .c4p--options-tile__title {
22200
22173
  grid-column: 2;
22201
22174
  }
22202
22175
 
22203
- .exp--options-tile__heading {
22176
+ .c4p--options-tile__heading {
22204
22177
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
22205
22178
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
22206
22179
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -22208,7 +22181,7 @@ a.bx--side-nav__link--current::before {
22208
22181
  color: var(--cds-text-01, #161616);
22209
22182
  }
22210
22183
 
22211
- .exp--options-tile__summary {
22184
+ .c4p--options-tile__summary {
22212
22185
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
22213
22186
  line-height: var(--cds-helper-text-01-line-height, 1.33333);
22214
22187
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
@@ -22222,71 +22195,71 @@ a.bx--side-nav__link--current::before {
22222
22195
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
22223
22196
  }
22224
22197
 
22225
- .exp--options-tile__summary--invalid,
22226
- .exp--options-tile__summary--warn,
22227
- .exp--options-tile__summary--locked {
22198
+ .c4p--options-tile__summary--invalid,
22199
+ .c4p--options-tile__summary--warn,
22200
+ .c4p--options-tile__summary--locked {
22228
22201
  column-gap: var(--cds-spacing-02, 0.25rem);
22229
22202
  grid-template-columns: 1rem 1fr;
22230
22203
  }
22231
22204
 
22232
- .exp--options-tile__summary--invalid {
22205
+ .c4p--options-tile__summary--invalid {
22233
22206
  color: var(--cds-support-01, #da1e28);
22234
22207
  }
22235
22208
 
22236
- .exp--options-tile__summary--warn {
22209
+ .c4p--options-tile__summary--warn {
22237
22210
  color: var(--cds-text-01, #161616);
22238
22211
  }
22239
22212
 
22240
- .exp--options-tile__summary--warn svg {
22213
+ .c4p--options-tile__summary--warn svg {
22241
22214
  color: var(--cds-support-03, #f1c21b);
22242
22215
  }
22243
22216
 
22244
- .exp--options-tile__summary--warn svg path[fill=none] {
22217
+ .c4p--options-tile__summary--warn svg path[fill=none] {
22245
22218
  fill: #000000;
22246
22219
  }
22247
22220
 
22248
- .exp--options-tile__summary-text {
22221
+ .c4p--options-tile__summary-text {
22249
22222
  overflow: hidden;
22250
22223
  height: max-content;
22251
22224
  text-overflow: ellipsis;
22252
22225
  white-space: nowrap;
22253
22226
  }
22254
22227
 
22255
- .exp--options-tile__chevron {
22228
+ .c4p--options-tile__chevron {
22256
22229
  justify-self: center;
22257
22230
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
22258
22231
  }
22259
22232
 
22260
- .exp--options-tile__content {
22233
+ .c4p--options-tile__content {
22261
22234
  padding-right: var(--cds-spacing-05, 1rem);
22262
22235
  padding-left: calc(var(--cds-spacing-05, 1rem) * 2 + 1rem);
22263
22236
  }
22264
22237
 
22265
- .exp--options-tile__content > .bx--fieldset > .bx--label:empty {
22238
+ .c4p--options-tile__content > .bx--fieldset > .bx--label:empty {
22266
22239
  display: none;
22267
22240
  }
22268
22241
 
22269
- .exp--options-tile--closing .exp--options-tile__content {
22242
+ .c4p--options-tile--closing .c4p--options-tile__content {
22270
22243
  overflow: hidden;
22271
22244
  }
22272
22245
 
22273
- .exp--options-tile:not(.exp--options-tile--closing) > details[open] .exp--options-tile__summary,
22274
- .exp--options-tile__summary--hidden {
22246
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__summary,
22247
+ .c4p--options-tile__summary--hidden {
22275
22248
  height: 0;
22276
22249
  margin-top: 0;
22277
22250
  opacity: 0;
22278
22251
  }
22279
22252
 
22280
- .exp--options-tile:not(.exp--options-tile--closing) > details[open] .exp--options-tile__chevron {
22253
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__chevron {
22281
22254
  transform: rotate(180deg);
22282
22255
  }
22283
22256
 
22284
- .exp--options-tile > details[open] .exp--options-tile__content {
22257
+ .c4p--options-tile > details[open] .c4p--options-tile__content {
22285
22258
  padding-top: var(--cds-spacing-03, 0.5rem);
22286
22259
  padding-bottom: var(--cds-spacing-06, 1.5rem);
22287
22260
  }
22288
22261
 
22289
- .exp--options-tile__locked-text {
22262
+ .c4p--options-tile__locked-text {
22290
22263
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
22291
22264
  font-weight: var(--cds-body-long-01-font-weight, 400);
22292
22265
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -22297,43 +22270,43 @@ a.bx--side-nav__link--current::before {
22297
22270
  color: var(--cds-text-02, #525252);
22298
22271
  }
22299
22272
 
22300
- .exp--options-tile__locked-text > svg {
22273
+ .c4p--options-tile__locked-text > svg {
22301
22274
  margin-right: var(--cds-spacing-02, 0.25rem);
22302
22275
  }
22303
22276
 
22304
- .exp--options-tile--lg .exp--options-tile__header,
22305
- .exp--options-tile--lg .exp--options-tile__static-content {
22277
+ .c4p--options-tile--lg .c4p--options-tile__header,
22278
+ .c4p--options-tile--lg .c4p--options-tile__static-content {
22306
22279
  height: 3rem;
22307
22280
  }
22308
22281
 
22309
- .exp--options-tile--xl .exp--options-tile__header,
22310
- .exp--options-tile--xl .exp--options-tile__static-content {
22282
+ .c4p--options-tile--xl .c4p--options-tile__header,
22283
+ .c4p--options-tile--xl .c4p--options-tile__static-content {
22311
22284
  height: 4rem;
22312
22285
  }
22313
22286
 
22314
- .exp--options-tile--lg .exp--options-tile__toggle {
22287
+ .c4p--options-tile--lg .c4p--options-tile__toggle {
22315
22288
  top: 1rem;
22316
22289
  }
22317
22290
 
22318
- .exp--options-tile--xl .exp--options-tile__toggle {
22291
+ .c4p--options-tile--xl .c4p--options-tile__toggle {
22319
22292
  top: 1.5rem;
22320
22293
  }
22321
22294
 
22322
- .exp--options-tile--lg .exp--options-tile__summary {
22295
+ .c4p--options-tile--lg .c4p--options-tile__summary {
22323
22296
  margin-top: var(--cds-spacing-01, 0.125rem);
22324
22297
  }
22325
22298
 
22326
- .exp--options-tile--lg .exp--options-tile__summary-text {
22299
+ .c4p--options-tile--lg .c4p--options-tile__summary-text {
22327
22300
  padding-right: calc(var(--cds-spacing-05, 1rem) + 1rem);
22328
22301
  }
22329
22302
 
22330
- .exp--options-tile--xl .exp--options-tile__summary-text {
22303
+ .c4p--options-tile--xl .c4p--options-tile__summary-text {
22331
22304
  padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
22332
22305
  }
22333
22306
 
22334
22307
  @media (prefers-reduced-motion: reduce) {
22335
- .exp--options-tile__summary,
22336
- .exp--options-tile__chevron {
22308
+ .c4p--options-tile__summary,
22309
+ .c4p--options-tile__chevron {
22337
22310
  transition: none;
22338
22311
  }
22339
22312
  }