@carbon/ibm-products 1.54.1 → 1.55.0

package/css/index.css

@@ -2982,9 +2982,14 @@ em {
 .bx--modal .bx--dropdown-list,
 .bx--modal .bx--number input[type=number],
 .bx--modal .bx--date-picker__input,
-.bx--modal .bx--multi-select {
+.bx--modal .bx--multi-select,
+.bx--modal .bx--number__control-btn::before,
+.bx--modal .bx--number__control-btn::after {
   background-color: var(--cds-field-02, #ffffff);
 }
+.bx--modal .bx--number__rule-divider {
+  background-color: var(--cds-decorative-01, #e0e0e0);
+}
 
 .bx--modal.is-visible .bx--modal-container {
   transform: translate3d(0, 0, 0);
@@ -21406,7 +21411,7 @@ button.c4p--add-select__global-filter-toggle--open {
   position: relative;
 }
 
-.c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row) ::before {
+.c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row) :first-child:not(.bx--checkbox--inline)::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -21473,11 +21478,6 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 100%;
 }
 
-.bx--body--with-modal-open .c4p--datagrid__grid-container {
-  overflow: hidden;
-  height: 100vh;
-}
-
 .bx--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
   flex-shrink: 0;
   background-color: var(--cds-interactive-01, #0f62fe);
@@ -23123,81 +23123,83 @@ th.c4p--datagrid__select-all-toggle-on.button {
   animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-  15% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.c4p--carousel {
+  position: relative;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed {
-  height: 1.25rem;
-  padding-top: 0;
-  padding-right: 0.1875rem;
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-radius: var(--cds-spacing-04, 0.75rem);
-  white-space: nowrap;
-  border-color: var(--cds-interactive-03, #0f62fe);
-  background-color: transparent;
-  color: var(--cds-interactive-03, #0f62fe);
+.c4p--carousel:focus {
+  outline: none;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
-  cursor: pointer;
+.c4p--carousel__elements-container {
+  overflow-x: hidden;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed svg {
-  margin: 0.0625rem 0 0 0;
-  vertical-align: text-top;
+.c4p--carousel__elements-container--scrolled, .c4p--carousel__elements-container--scroll-max {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  width: var(--cds-spacing-07, 2rem);
+  pointer-events: none;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
-  background-color: var(--cds-interactive-03, #0f62fe);
-  color: var(--cds-inverse-01, #ffffff);
+.c4p--carousel__elements-container--scrolled {
+  left: 0;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open {
-  height: 1.25rem;
-  padding-top: 0;
-  padding-right: 0.1875rem;
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-radius: var(--cds-spacing-04, 0.75rem);
-  white-space: nowrap;
-  border-color: var(--cds-interactive-03, #0f62fe);
-  background-color: var(--cds-interactive-03, #0f62fe);
-  color: var(--cds-inverse-01, #ffffff);
+.c4p--carousel__elements-container--scroll-max {
+  right: 0;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
-  cursor: pointer;
+.c4p--carousel__elements {
+  display: flex;
+  -ms-overflow-style: none;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
-  margin: 0.0625rem 0 0 0;
-  vertical-align: text-top;
+.c4p--carousel__elements::-webkit-scrollbar {
+  display: none;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
-  transform: rotate(180deg);
+
+/**
+ * The Guidebanner specifically is theme-agnostic, and so we have to 
+ * use color tokens to keep the colors static instead of theme tokens 
+ * that will change depending on the selected theme.
+ * 
+ * Because of this, we are triggering a *large* amount of linting errors.
+ * So, we're adding 4 "disable" rules for the file instead of 50 
+ * individual rules.
+ */
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/motion-duration-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+.c4p--guidebanner {
+  position: relative;
+  background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
+  background-color: #001d6c;
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
-  background-color: transparent;
-  color: var(--cds-interactive-03, #0f62fe);
+.c4p--guidebanner__icon-idea {
+  position: absolute;
+  top: var(--cds-spacing-05, 1rem);
+  left: var(--cds-spacing-05, 1rem);
 }
-.c4p--non-linear-reading__light .c4p--non-linear-reading__body {
-  font-size: var(--cds-body-long-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-long-01-font-weight, 400);
-  line-height: var(--cds-body-long-01-line-height, 1.42857);
-  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
-  display: block;
-  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
-  border-left-width: 0.078125rem;
-  border-left-style: solid;
-  margin: var(--cds-spacing-02, 0.25rem) 0;
-  animation: fade 600ms;
-  border-left-color: var(--cds-text-01, #161616);
+.c4p--guidebanner__icon-idea path {
+  fill: #f4f4f4;
 }
-
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed {
+.c4p--guidebanner__title {
+  font-size: var(--cds-productive-heading-02-font-size, 1rem);
+  font-weight: var(--cds-productive-heading-02-font-weight, 600);
+  line-height: var(--cds-productive-heading-02-line-height, 1.375);
+  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
+  padding: var(--cds-spacing-05, 1rem) 10.9375rem 0 3.25rem;
+  color: #f4f4f4;
+}
+.c4p--guidebanner__close-button {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -23618,29 +23620,110 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-size-2XLarge: 5rem;
   --cds-icon-size-01: 1rem;
   --cds-icon-size-02: 1.25rem;
-  height: 1.25rem;
-  padding-top: 0;
-  padding-right: 0.1875rem;
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-radius: var(--cds-spacing-04, 0.75rem);
-  white-space: nowrap;
-  border-color: var(--cds-icon-03, #ffffff);
-  background-color: transparent;
-  color: var(--cds-text-01, #161616);
+  position: absolute !important;
+  top: 0;
+  right: 0;
+  width: var(--cds-spacing-07, 2rem);
+  height: var(--cds-spacing-07, 2rem);
+  min-height: var(--cds-spacing-07, 2rem) !important;
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
-  cursor: pointer;
+.c4p--guidebanner__close-button:active, .c4p--guidebanner__close-button:hover {
+  background-color: #7433e3 !important;
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed svg {
-  margin: 0.0625rem 0 0 0;
-  vertical-align: text-top;
+.c4p--guidebanner__close-button svg {
+  margin-left: -0.25rem !important;
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
-  background-color: var(--cds-icon-03, #ffffff);
-  color: var(--cds-inverse-01, #ffffff);
+.c4p--guidebanner__close-button svg path {
+  fill: #ffffff !important;
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open {
+.c4p--guidebanner__carousel {
+  padding: 0 0 var(--cds-spacing-05, 1rem) 0;
+  color: #f4f4f4;
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__carousel {
+  margin-bottom: 0;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element {
+  display: flex;
+  width: 25rem;
+  max-height: 32rem;
+  flex-flow: column;
+  flex-shrink: 0;
+  padding-left: 3.25rem;
+  margin: var(--cds-spacing-05, 1rem) 0 0 0;
+  opacity: 1;
+  scroll-snap-align: start;
+  transition: max-height 50ms cubic-bezier(0.2, 0, 1, 0.9), margin-top 50ms cubic-bezier(0.2, 0, 1, 0.9), opacity 300ms cubic-bezier(0.2, 0, 1, 0.9);
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element {
+  max-height: var(--cds-spacing-03, 0.5rem);
+  margin-top: 0;
+  opacity: 0;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-title {
+  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-productive-heading-01-font-weight, 600);
+  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+  margin: var(--cds-spacing-05, 1rem) 0 0 0;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-content {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn--tertiary {
+  border-color: #ffffff;
+  color: #ffffff;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn--tertiary:active, .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn--tertiary:hover {
+  border-color: #ffffff;
+  background-color: #ffffff;
+  color: #161616;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn:not(.bx--btn--tertiary) {
+  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
+  color: #a6c8ff;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn:not(.bx--btn--tertiary):active, .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn:not(.bx--btn--tertiary):hover {
+  background-color: #7f3ae7;
+  color: #f4f4f4;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link {
+  color: #a6c8ff;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link:visited {
+  color: #a6c8ff;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link:active, .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link:hover {
+  color: #d0e2ff;
+}
+.c4p--guidebanner__carousel .c4p--carousel__item:last-child .c4p--guidebanner__element {
+  width: 28rem;
+  padding-right: 3.25rem;
+}
+.c4p--guidebanner__navigation {
+  display: flex;
+  border-top: 0.0625rem solid #8a3ffc;
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation {
+  border-top: none;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__toggle-button {
+  margin-left: 2.125rem;
+  color: #a6c8ff;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__toggle-button:active, .c4p--guidebanner__navigation .c4p--guidebanner__toggle-button:hover {
+  background-color: #7433e3;
+  color: #f4f4f4;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button {
+  margin-left: auto;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -24061,6 +24144,40 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-size-2XLarge: 5rem;
   --cds-icon-size-01: 1rem;
   --cds-icon-size-02: 1.25rem;
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation .c4p--guidebanner__back-button,
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation .c4p--guidebanner__next-button {
+  display: none !important;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button:active, .c4p--guidebanner__navigation .c4p--guidebanner__back-button:hover,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button:active,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button:hover {
+  background-color: #7433e3;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button svg path,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button svg path {
+  fill: #ffffff !important;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button--disabled svg path,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button--disabled svg path {
+  fill: #9b63ff !important;
+}
+.c4p--guidebanner__close-button::before, .c4p--guidebanner__back-button::before, .c4p--guidebanner__next-button::before {
+  z-index: 6001 !important;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed {
   height: 1.25rem;
   padding-top: 0;
   padding-right: 0.1875rem;
@@ -24068,25 +24185,62 @@ th.c4p--datagrid__select-all-toggle-on.button {
   border-style: solid;
   border-radius: var(--cds-spacing-04, 0.75rem);
   white-space: nowrap;
-  border-color: var(--cds-icon-03, #ffffff);
-  background-color: var(--cds-icon-03, #ffffff);
+  border-color: var(--cds-interactive-03, #0f62fe);
+  background-color: transparent;
+  color: var(--cds-interactive-03, #0f62fe);
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
+  cursor: pointer;
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed svg {
+  margin: 0.0625rem 0 0 0;
+  vertical-align: text-top;
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
+  background-color: var(--cds-interactive-03, #0f62fe);
   color: var(--cds-inverse-01, #ffffff);
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open {
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-radius: var(--cds-spacing-04, 0.75rem);
+  white-space: nowrap;
+  border-color: var(--cds-interactive-03, #0f62fe);
+  background-color: var(--cds-interactive-03, #0f62fe);
+  color: var(--cds-inverse-01, #ffffff);
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
   cursor: pointer;
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
   margin: 0.0625rem 0 0 0;
   vertical-align: text-top;
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
   transform: rotate(180deg);
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
   background-color: transparent;
-  color: var(--cds-text-01, #161616);
+  color: var(--cds-interactive-03, #0f62fe);
 }
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__body {
+.c4p--non-linear-reading__light .c4p--non-linear-reading__body {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  display: block;
+  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
+  border-left-width: 0.078125rem;
+  border-left-style: solid;
+  margin: var(--cds-spacing-02, 0.25rem) 0;
+  animation: fade 600ms;
+  border-left-color: var(--cds-text-01, #161616);
+}
+
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -24507,21 +24661,1066 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-size-2XLarge: 5rem;
   --cds-icon-size-01: 1rem;
   --cds-icon-size-02: 1.25rem;
-  font-size: var(--cds-body-long-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-long-01-font-weight, 400);
-  line-height: var(--cds-body-long-01-line-height, 1.42857);
-  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
-  display: block;
-  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
-  border-left-width: 0.078125rem;
-  border-left-style: solid;
-  margin: var(--cds-spacing-02, 0.25rem) 0;
-  animation: fade 600ms;
-  border-left-color: var(--cds-text-01, #161616);
-  color: var(--cds-text-01, #161616);
-}
-.c4p--non-linear-reading__dark .c4p--non-linear-reading__body a {
-  color: var(--cds-link-01, #0f62fe);
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-radius: var(--cds-spacing-04, 0.75rem);
+  white-space: nowrap;
+  border-color: var(--cds-icon-03, #ffffff);
+  background-color: transparent;
+  color: var(--cds-text-01, #161616);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
+  cursor: pointer;
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed svg {
+  margin: 0.0625rem 0 0 0;
+  vertical-align: text-top;
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
+  background-color: var(--cds-icon-03, #ffffff);
+  color: var(--cds-inverse-01, #ffffff);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open {
+  --cds-interactive-01: #0f62fe;
+  --cds-interactive-02: #6f6f6f;
+  --cds-interactive-03: #ffffff;
+  --cds-interactive-04: #4589ff;
+  --cds-ui-background: #161616;
+  --cds-ui-01: #262626;
+  --cds-ui-02: #393939;
+  --cds-ui-03: #393939;
+  --cds-ui-04: #6f6f6f;
+  --cds-ui-05: #f4f4f4;
+  --cds-text-01: #f4f4f4;
+  --cds-text-02: #c6c6c6;
+  --cds-text-03: #6f6f6f;
+  --cds-text-04: #ffffff;
+  --cds-text-05: #8d8d8d;
+  --cds-text-error: #ff8389;
+  --cds-icon-01: #f4f4f4;
+  --cds-icon-02: #c6c6c6;
+  --cds-icon-03: #ffffff;
+  --cds-link-01: #78a9ff;
+  --cds-link-02: #a6c8ff;
+  --cds-inverse-link: #0f62fe;
+  --cds-field-01: #262626;
+  --cds-field-02: #393939;
+  --cds-inverse-01: #161616;
+  --cds-inverse-02: #f4f4f4;
+  --cds-support-01: #fa4d56;
+  --cds-support-02: #42be65;
+  --cds-support-03: #f1c21b;
+  --cds-support-04: #4589ff;
+  --cds-inverse-support-01: #da1e28;
+  --cds-inverse-support-02: #24a148;
+  --cds-inverse-support-03: #f1c21b;
+  --cds-inverse-support-04: #0f62fe;
+  --cds-overlay-01: rgba(0, 0, 0, 0.65);
+  --cds-danger-01: #da1e28;
+  --cds-danger-02: #fa4d56;
+  --cds-focus: #ffffff;
+  --cds-inverse-focus-ui: #0f62fe;
+  --cds-hover-primary: #0353e9;
+  --cds-active-primary: #002d9c;
+  --cds-hover-primary-text: #a6c8ff;
+  --cds-hover-secondary: #606060;
+  --cds-active-secondary: #393939;
+  --cds-hover-tertiary: #f4f4f4;
+  --cds-active-tertiary: #c6c6c6;
+  --cds-hover-ui: #353535;
+  --cds-hover-light-ui: #4c4c4c;
+  --cds-hover-selected-ui: #4c4c4c;
+  --cds-active-ui: #525252;
+  --cds-active-light-ui: #6f6f6f;
+  --cds-selected-ui: #393939;
+  --cds-selected-light-ui: #525252;
+  --cds-inverse-hover-ui: #e5e5e5;
+  --cds-hover-danger: #b81921;
+  --cds-active-danger: #750e13;
+  --cds-hover-row: #353535;
+  --cds-visited-link: #be95ff;
+  --cds-disabled-01: #262626;
+  --cds-disabled-02: #525252;
+  --cds-disabled-03: #8d8d8d;
+  --cds-highlight: #002d9c;
+  --cds-decorative-01: #525252;
+  --cds-button-separator: #161616;
+  --cds-skeleton-01: #353535;
+  --cds-skeleton-02: #525252;
+  --cds-background: #161616;
+  --cds-layer: #262626;
+  --cds-layer-accent: #393939;
+  --cds-layer-accent-hover: #474747;
+  --cds-layer-accent-active: #6f6f6f;
+  --cds-field: #262626;
+  --cds-background-inverse: #f4f4f4;
+  --cds-background-brand: #0f62fe;
+  --cds-interactive: #4589ff;
+  --cds-border-subtle: #393939;
+  --cds-border-strong: #6f6f6f;
+  --cds-border-inverse: #f4f4f4;
+  --cds-border-interactive: #4589ff;
+  --cds-text-primary: #f4f4f4;
+  --cds-text-secondary: #c6c6c6;
+  --cds-text-placeholder: #6f6f6f;
+  --cds-text-helper: #8d8d8d;
+  --cds-text-on-color: #ffffff;
+  --cds-text-inverse: #161616;
+  --cds-link-primary: #78a9ff;
+  --cds-link-secondary: #a6c8ff;
+  --cds-link-visited: #be95ff;
+  --cds-link-inverse: #0f62fe;
+  --cds-icon-primary: #f4f4f4;
+  --cds-icon-secondary: #c6c6c6;
+  --cds-icon-on-color: #ffffff;
+  --cds-icon-inverse: #161616;
+  --cds-support-error: #fa4d56;
+  --cds-support-success: #42be65;
+  --cds-support-warning: #f1c21b;
+  --cds-support-info: #4589ff;
+  --cds-support-error-inverse: #da1e28;
+  --cds-support-success-inverse: #24a148;
+  --cds-support-warning-inverse: #f1c21b;
+  --cds-support-info-inverse: #0f62fe;
+  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-toggle-off: #6f6f6f;
+  --cds-shadow: rgba(0, 0, 0, 0.8);
+  --cds-button-primary: #0f62fe;
+  --cds-button-secondary: #6f6f6f;
+  --cds-button-tertiary: #ffffff;
+  --cds-button-danger-primary: #da1e28;
+  --cds-button-danger-secondary: #fa4d56;
+  --cds-background-active: #525252;
+  --cds-layer-active: #525252;
+  --cds-button-danger-active: #750e13;
+  --cds-button-primary-active: #002d9c;
+  --cds-button-secondary-active: #393939;
+  --cds-button-tertiary-active: #c6c6c6;
+  --cds-focus-inset: #161616;
+  --cds-focus-inverse: #0f62fe;
+  --cds-background-hover: #353535;
+  --cds-layer-hover: #353535;
+  --cds-field-hover: #353535;
+  --cds-background-inverse-hover: #e5e5e5;
+  --cds-link-primary-hover: #a6c8ff;
+  --cds-button-danger-hover: #b81921;
+  --cds-button-primary-hover: #0353e9;
+  --cds-button-secondary-hover: #606060;
+  --cds-button-tertiary-hover: #f4f4f4;
+  --cds-background-selected: #393939;
+  --cds-background-selected-hover: #4c4c4c;
+  --cds-layer-selected: #393939;
+  --cds-layer-selected-hover: #4c4c4c;
+  --cds-layer-selected-inverse: #f4f4f4;
+  --cds-border-subtle-selected: #525252;
+  --cds-border-disabled: #262626;
+  --cds-text-disabled: #525252;
+  --cds-button-disabled: #525252;
+  --cds-icon-disabled: #525252;
+  --cds-text-on-color-disabled: #8d8d8d;
+  --cds-icon-on-color-disabled: #8d8d8d;
+  --cds-layer-selected-disabled: #8d8d8d;
+  --cds-skeleton-background: #353535;
+  --cds-skeleton-element: #525252;
+  --cds-brand-01: #0f62fe;
+  --cds-brand-02: #6f6f6f;
+  --cds-brand-03: #ffffff;
+  --cds-active-01: #525252;
+  --cds-hover-field: #353535;
+  --cds-danger: #da1e28;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
+  --cds-label-01-font-size: 0.75rem;
+  --cds-label-01-font-weight: 400;
+  --cds-label-01-line-height: 1.33333;
+  --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
+  --cds-helper-text-01-font-size: 0.75rem;
+  --cds-helper-text-01-line-height: 1.33333;
+  --cds-helper-text-01-letter-spacing: 0.32px;
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-line-height: 1.28572;
+  --cds-helper-text-02-letter-spacing: 0.16px;
+  --cds-body-short-01-font-size: 0.875rem;
+  --cds-body-short-01-font-weight: 400;
+  --cds-body-short-01-line-height: 1.28572;
+  --cds-body-short-01-letter-spacing: 0.16px;
+  --cds-body-long-01-font-size: 0.875rem;
+  --cds-body-long-01-font-weight: 400;
+  --cds-body-long-01-line-height: 1.42857;
+  --cds-body-long-01-letter-spacing: 0.16px;
+  --cds-body-short-02-font-size: 1rem;
+  --cds-body-short-02-font-weight: 400;
+  --cds-body-short-02-line-height: 1.375;
+  --cds-body-short-02-letter-spacing: 0;
+  --cds-body-long-02-font-size: 1rem;
+  --cds-body-long-02-font-weight: 400;
+  --cds-body-long-02-line-height: 1.5;
+  --cds-body-long-02-letter-spacing: 0;
+  --cds-code-01-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+  --cds-code-01-font-size: 0.75rem;
+  --cds-code-01-font-weight: 400;
+  --cds-code-01-line-height: 1.33333;
+  --cds-code-01-letter-spacing: 0.32px;
+  --cds-code-02-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+  --cds-code-02-font-size: 0.875rem;
+  --cds-code-02-font-weight: 400;
+  --cds-code-02-line-height: 1.42857;
+  --cds-code-02-letter-spacing: 0.32px;
+  --cds-heading-01-font-size: 0.875rem;
+  --cds-heading-01-font-weight: 600;
+  --cds-heading-01-line-height: 1.42857;
+  --cds-heading-01-letter-spacing: 0.16px;
+  --cds-productive-heading-01-font-size: 0.875rem;
+  --cds-productive-heading-01-font-weight: 600;
+  --cds-productive-heading-01-line-height: 1.28572;
+  --cds-productive-heading-01-letter-spacing: 0.16px;
+  --cds-heading-02-font-size: 1rem;
+  --cds-heading-02-font-weight: 600;
+  --cds-heading-02-line-height: 1.5;
+  --cds-heading-02-letter-spacing: 0;
+  --cds-productive-heading-02-font-size: 1rem;
+  --cds-productive-heading-02-font-weight: 600;
+  --cds-productive-heading-02-line-height: 1.375;
+  --cds-productive-heading-02-letter-spacing: 0;
+  --cds-productive-heading-03-font-size: 1.25rem;
+  --cds-productive-heading-03-font-weight: 400;
+  --cds-productive-heading-03-line-height: 1.4;
+  --cds-productive-heading-03-letter-spacing: 0;
+  --cds-productive-heading-04-font-size: 1.75rem;
+  --cds-productive-heading-04-font-weight: 400;
+  --cds-productive-heading-04-line-height: 1.28572;
+  --cds-productive-heading-04-letter-spacing: 0;
+  --cds-productive-heading-05-font-size: 2rem;
+  --cds-productive-heading-05-font-weight: 400;
+  --cds-productive-heading-05-line-height: 1.25;
+  --cds-productive-heading-05-letter-spacing: 0;
+  --cds-productive-heading-06-font-size: 2.625rem;
+  --cds-productive-heading-06-font-weight: 300;
+  --cds-productive-heading-06-line-height: 1.199;
+  --cds-productive-heading-06-letter-spacing: 0;
+  --cds-productive-heading-07-font-size: 3.375rem;
+  --cds-productive-heading-07-font-weight: 300;
+  --cds-productive-heading-07-line-height: 1.199;
+  --cds-productive-heading-07-letter-spacing: 0;
+  --cds-expressive-heading-01-font-size: 0.875rem;
+  --cds-expressive-heading-01-font-weight: 600;
+  --cds-expressive-heading-01-line-height: 1.25;
+  --cds-expressive-heading-01-letter-spacing: 0.16px;
+  --cds-expressive-heading-02-font-size: 1rem;
+  --cds-expressive-heading-02-font-weight: 600;
+  --cds-expressive-heading-02-line-height: 1.5;
+  --cds-expressive-heading-02-letter-spacing: 0;
+  --cds-expressive-heading-03-font-size: 1.25rem;
+  --cds-expressive-heading-03-font-weight: 400;
+  --cds-expressive-heading-03-line-height: 1.4;
+  --cds-expressive-heading-03-letter-spacing: 0;
+  --cds-expressive-heading-04-font-size: 1.75rem;
+  --cds-expressive-heading-04-font-weight: 400;
+  --cds-expressive-heading-04-line-height: 1.28572;
+  --cds-expressive-heading-04-letter-spacing: 0;
+  --cds-expressive-heading-05-font-size: 2rem;
+  --cds-expressive-heading-05-font-weight: 400;
+  --cds-expressive-heading-05-line-height: 1.25;
+  --cds-expressive-heading-05-letter-spacing: 0;
+  --cds-expressive-heading-06-font-size: 2rem;
+  --cds-expressive-heading-06-font-weight: 600;
+  --cds-expressive-heading-06-line-height: 1.25;
+  --cds-expressive-heading-06-letter-spacing: 0;
+  --cds-expressive-paragraph-01-font-size: 1.5rem;
+  --cds-expressive-paragraph-01-font-weight: 300;
+  --cds-expressive-paragraph-01-line-height: 1.334;
+  --cds-expressive-paragraph-01-letter-spacing: 0;
+  --cds-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-quotation-01-font-size: 1.25rem;
+  --cds-quotation-01-font-weight: 400;
+  --cds-quotation-01-line-height: 1.3;
+  --cds-quotation-01-letter-spacing: 0;
+  --cds-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-quotation-02-font-size: 2rem;
+  --cds-quotation-02-font-weight: 300;
+  --cds-quotation-02-line-height: 1.25;
+  --cds-quotation-02-letter-spacing: 0;
+  --cds-display-01-font-size: 2.625rem;
+  --cds-display-01-font-weight: 300;
+  --cds-display-01-line-height: 1.19;
+  --cds-display-01-letter-spacing: 0;
+  --cds-display-02-font-size: 2.625rem;
+  --cds-display-02-font-weight: 600;
+  --cds-display-02-line-height: 1.19;
+  --cds-display-02-letter-spacing: 0;
+  --cds-display-03-font-size: 2.625rem;
+  --cds-display-03-font-weight: 300;
+  --cds-display-03-line-height: 1.19;
+  --cds-display-03-letter-spacing: 0;
+  --cds-display-04-font-size: 2.625rem;
+  --cds-display-04-font-weight: 300;
+  --cds-display-04-line-height: 1.19;
+  --cds-display-04-letter-spacing: 0;
+  --cds-legal-01-font-size: 0.75rem;
+  --cds-legal-01-font-weight: 400;
+  --cds-legal-01-line-height: 1.33333;
+  --cds-legal-01-letter-spacing: 0.32px;
+  --cds-legal-02-font-size: 0.875rem;
+  --cds-legal-02-font-weight: 400;
+  --cds-legal-02-line-height: 1.28572;
+  --cds-legal-02-letter-spacing: 0.16px;
+  --cds-body-compact-01-font-size: 0.875rem;
+  --cds-body-compact-01-font-weight: 400;
+  --cds-body-compact-01-line-height: 1.28572;
+  --cds-body-compact-01-letter-spacing: 0.16px;
+  --cds-body-compact-02-font-size: 1rem;
+  --cds-body-compact-02-font-weight: 400;
+  --cds-body-compact-02-line-height: 1.375;
+  --cds-body-compact-02-letter-spacing: 0;
+  --cds-body-01-font-size: 0.875rem;
+  --cds-body-01-font-weight: 400;
+  --cds-body-01-line-height: 1.42857;
+  --cds-body-01-letter-spacing: 0.16px;
+  --cds-body-02-font-size: 1rem;
+  --cds-body-02-font-weight: 400;
+  --cds-body-02-line-height: 1.5;
+  --cds-body-02-letter-spacing: 0;
+  --cds-heading-compact-01-font-size: 0.875rem;
+  --cds-heading-compact-01-font-weight: 600;
+  --cds-heading-compact-01-line-height: 1.28572;
+  --cds-heading-compact-01-letter-spacing: 0.16px;
+  --cds-heading-compact-02-font-size: 1rem;
+  --cds-heading-compact-02-font-weight: 600;
+  --cds-heading-compact-02-line-height: 1.375;
+  --cds-heading-compact-02-letter-spacing: 0;
+  --cds-heading-03-font-size: 1.25rem;
+  --cds-heading-03-font-weight: 400;
+  --cds-heading-03-line-height: 1.4;
+  --cds-heading-03-letter-spacing: 0;
+  --cds-heading-04-font-size: 1.75rem;
+  --cds-heading-04-font-weight: 400;
+  --cds-heading-04-line-height: 1.28572;
+  --cds-heading-04-letter-spacing: 0;
+  --cds-heading-05-font-size: 2rem;
+  --cds-heading-05-font-weight: 400;
+  --cds-heading-05-line-height: 1.25;
+  --cds-heading-05-letter-spacing: 0;
+  --cds-heading-06-font-size: 2.625rem;
+  --cds-heading-06-font-weight: 300;
+  --cds-heading-06-line-height: 1.199;
+  --cds-heading-06-letter-spacing: 0;
+  --cds-heading-07-font-size: 3.375rem;
+  --cds-heading-07-font-weight: 300;
+  --cds-heading-07-line-height: 1.199;
+  --cds-heading-07-letter-spacing: 0;
+  --cds-fluid-heading-03-font-size: 1.25rem;
+  --cds-fluid-heading-03-font-weight: 400;
+  --cds-fluid-heading-03-line-height: 1.4;
+  --cds-fluid-heading-03-letter-spacing: 0;
+  --cds-fluid-heading-04-font-size: 1.75rem;
+  --cds-fluid-heading-04-font-weight: 400;
+  --cds-fluid-heading-04-line-height: 1.28572;
+  --cds-fluid-heading-04-letter-spacing: 0;
+  --cds-fluid-heading-05-font-size: 2rem;
+  --cds-fluid-heading-05-font-weight: 400;
+  --cds-fluid-heading-05-line-height: 1.25;
+  --cds-fluid-heading-05-letter-spacing: 0;
+  --cds-fluid-heading-06-font-size: 2rem;
+  --cds-fluid-heading-06-font-weight: 600;
+  --cds-fluid-heading-06-line-height: 1.25;
+  --cds-fluid-heading-06-letter-spacing: 0;
+  --cds-fluid-paragraph-01-font-size: 1.5rem;
+  --cds-fluid-paragraph-01-font-weight: 300;
+  --cds-fluid-paragraph-01-line-height: 1.334;
+  --cds-fluid-paragraph-01-letter-spacing: 0;
+  --cds-fluid-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-fluid-quotation-01-font-size: 1.25rem;
+  --cds-fluid-quotation-01-font-weight: 400;
+  --cds-fluid-quotation-01-line-height: 1.3;
+  --cds-fluid-quotation-01-letter-spacing: 0;
+  --cds-fluid-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-fluid-quotation-02-font-size: 2rem;
+  --cds-fluid-quotation-02-font-weight: 300;
+  --cds-fluid-quotation-02-line-height: 1.25;
+  --cds-fluid-quotation-02-letter-spacing: 0;
+  --cds-fluid-display-01-font-size: 2.625rem;
+  --cds-fluid-display-01-font-weight: 300;
+  --cds-fluid-display-01-line-height: 1.19;
+  --cds-fluid-display-01-letter-spacing: 0;
+  --cds-fluid-display-02-font-size: 2.625rem;
+  --cds-fluid-display-02-font-weight: 600;
+  --cds-fluid-display-02-line-height: 1.19;
+  --cds-fluid-display-02-letter-spacing: 0;
+  --cds-fluid-display-03-font-size: 2.625rem;
+  --cds-fluid-display-03-font-weight: 300;
+  --cds-fluid-display-03-line-height: 1.19;
+  --cds-fluid-display-03-letter-spacing: 0;
+  --cds-fluid-display-04-font-size: 2.625rem;
+  --cds-fluid-display-04-font-weight: 300;
+  --cds-fluid-display-04-line-height: 1.19;
+  --cds-fluid-display-04-letter-spacing: 0;
+  --cds-spacing-01: 0.125rem;
+  --cds-spacing-02: 0.25rem;
+  --cds-spacing-03: 0.5rem;
+  --cds-spacing-04: 0.75rem;
+  --cds-spacing-05: 1rem;
+  --cds-spacing-06: 1.5rem;
+  --cds-spacing-07: 2rem;
+  --cds-spacing-08: 2.5rem;
+  --cds-spacing-09: 3rem;
+  --cds-spacing-10: 4rem;
+  --cds-spacing-11: 5rem;
+  --cds-spacing-12: 6rem;
+  --cds-spacing-13: 10rem;
+  --cds-fluid-spacing-01: 0;
+  --cds-fluid-spacing-02: 2vw;
+  --cds-fluid-spacing-03: 5vw;
+  --cds-fluid-spacing-04: 10vw;
+  --cds-layout-01: 1rem;
+  --cds-layout-02: 1.5rem;
+  --cds-layout-03: 2rem;
+  --cds-layout-04: 3rem;
+  --cds-layout-05: 4rem;
+  --cds-layout-06: 6rem;
+  --cds-layout-07: 10rem;
+  --cds-container-01: 1.5rem;
+  --cds-container-02: 2rem;
+  --cds-container-03: 2.5rem;
+  --cds-container-04: 3rem;
+  --cds-container-05: 4rem;
+  --cds-size-xsmall: 1.5rem;
+  --cds-size-small: 2rem;
+  --cds-size-medium: 2.5rem;
+  --cds-size-large: 3rem;
+  --cds-size-xlarge: 4rem;
+  --cds-size-2XLarge: 5rem;
+  --cds-icon-size-01: 1rem;
+  --cds-icon-size-02: 1.25rem;
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-radius: var(--cds-spacing-04, 0.75rem);
+  white-space: nowrap;
+  border-color: var(--cds-icon-03, #ffffff);
+  background-color: var(--cds-icon-03, #ffffff);
+  color: var(--cds-inverse-01, #ffffff);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
+  cursor: pointer;
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
+  margin: 0.0625rem 0 0 0;
+  vertical-align: text-top;
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
+  transform: rotate(180deg);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
+  background-color: transparent;
+  color: var(--cds-text-01, #161616);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__body {
+  --cds-interactive-01: #0f62fe;
+  --cds-interactive-02: #6f6f6f;
+  --cds-interactive-03: #ffffff;
+  --cds-interactive-04: #4589ff;
+  --cds-ui-background: #161616;
+  --cds-ui-01: #262626;
+  --cds-ui-02: #393939;
+  --cds-ui-03: #393939;
+  --cds-ui-04: #6f6f6f;
+  --cds-ui-05: #f4f4f4;
+  --cds-text-01: #f4f4f4;
+  --cds-text-02: #c6c6c6;
+  --cds-text-03: #6f6f6f;
+  --cds-text-04: #ffffff;
+  --cds-text-05: #8d8d8d;
+  --cds-text-error: #ff8389;
+  --cds-icon-01: #f4f4f4;
+  --cds-icon-02: #c6c6c6;
+  --cds-icon-03: #ffffff;
+  --cds-link-01: #78a9ff;
+  --cds-link-02: #a6c8ff;
+  --cds-inverse-link: #0f62fe;
+  --cds-field-01: #262626;
+  --cds-field-02: #393939;
+  --cds-inverse-01: #161616;
+  --cds-inverse-02: #f4f4f4;
+  --cds-support-01: #fa4d56;
+  --cds-support-02: #42be65;
+  --cds-support-03: #f1c21b;
+  --cds-support-04: #4589ff;
+  --cds-inverse-support-01: #da1e28;
+  --cds-inverse-support-02: #24a148;
+  --cds-inverse-support-03: #f1c21b;
+  --cds-inverse-support-04: #0f62fe;
+  --cds-overlay-01: rgba(0, 0, 0, 0.65);
+  --cds-danger-01: #da1e28;
+  --cds-danger-02: #fa4d56;
+  --cds-focus: #ffffff;
+  --cds-inverse-focus-ui: #0f62fe;
+  --cds-hover-primary: #0353e9;
+  --cds-active-primary: #002d9c;
+  --cds-hover-primary-text: #a6c8ff;
+  --cds-hover-secondary: #606060;
+  --cds-active-secondary: #393939;
+  --cds-hover-tertiary: #f4f4f4;
+  --cds-active-tertiary: #c6c6c6;
+  --cds-hover-ui: #353535;
+  --cds-hover-light-ui: #4c4c4c;
+  --cds-hover-selected-ui: #4c4c4c;
+  --cds-active-ui: #525252;
+  --cds-active-light-ui: #6f6f6f;
+  --cds-selected-ui: #393939;
+  --cds-selected-light-ui: #525252;
+  --cds-inverse-hover-ui: #e5e5e5;
+  --cds-hover-danger: #b81921;
+  --cds-active-danger: #750e13;
+  --cds-hover-row: #353535;
+  --cds-visited-link: #be95ff;
+  --cds-disabled-01: #262626;
+  --cds-disabled-02: #525252;
+  --cds-disabled-03: #8d8d8d;
+  --cds-highlight: #002d9c;
+  --cds-decorative-01: #525252;
+  --cds-button-separator: #161616;
+  --cds-skeleton-01: #353535;
+  --cds-skeleton-02: #525252;
+  --cds-background: #161616;
+  --cds-layer: #262626;
+  --cds-layer-accent: #393939;
+  --cds-layer-accent-hover: #474747;
+  --cds-layer-accent-active: #6f6f6f;
+  --cds-field: #262626;
+  --cds-background-inverse: #f4f4f4;
+  --cds-background-brand: #0f62fe;
+  --cds-interactive: #4589ff;
+  --cds-border-subtle: #393939;
+  --cds-border-strong: #6f6f6f;
+  --cds-border-inverse: #f4f4f4;
+  --cds-border-interactive: #4589ff;
+  --cds-text-primary: #f4f4f4;
+  --cds-text-secondary: #c6c6c6;
+  --cds-text-placeholder: #6f6f6f;
+  --cds-text-helper: #8d8d8d;
+  --cds-text-on-color: #ffffff;
+  --cds-text-inverse: #161616;
+  --cds-link-primary: #78a9ff;
+  --cds-link-secondary: #a6c8ff;
+  --cds-link-visited: #be95ff;
+  --cds-link-inverse: #0f62fe;
+  --cds-icon-primary: #f4f4f4;
+  --cds-icon-secondary: #c6c6c6;
+  --cds-icon-on-color: #ffffff;
+  --cds-icon-inverse: #161616;
+  --cds-support-error: #fa4d56;
+  --cds-support-success: #42be65;
+  --cds-support-warning: #f1c21b;
+  --cds-support-info: #4589ff;
+  --cds-support-error-inverse: #da1e28;
+  --cds-support-success-inverse: #24a148;
+  --cds-support-warning-inverse: #f1c21b;
+  --cds-support-info-inverse: #0f62fe;
+  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-toggle-off: #6f6f6f;
+  --cds-shadow: rgba(0, 0, 0, 0.8);
+  --cds-button-primary: #0f62fe;
+  --cds-button-secondary: #6f6f6f;
+  --cds-button-tertiary: #ffffff;
+  --cds-button-danger-primary: #da1e28;
+  --cds-button-danger-secondary: #fa4d56;
+  --cds-background-active: #525252;
+  --cds-layer-active: #525252;
+  --cds-button-danger-active: #750e13;
+  --cds-button-primary-active: #002d9c;
+  --cds-button-secondary-active: #393939;
+  --cds-button-tertiary-active: #c6c6c6;
+  --cds-focus-inset: #161616;
+  --cds-focus-inverse: #0f62fe;
+  --cds-background-hover: #353535;
+  --cds-layer-hover: #353535;
+  --cds-field-hover: #353535;
+  --cds-background-inverse-hover: #e5e5e5;
+  --cds-link-primary-hover: #a6c8ff;
+  --cds-button-danger-hover: #b81921;
+  --cds-button-primary-hover: #0353e9;
+  --cds-button-secondary-hover: #606060;
+  --cds-button-tertiary-hover: #f4f4f4;
+  --cds-background-selected: #393939;
+  --cds-background-selected-hover: #4c4c4c;
+  --cds-layer-selected: #393939;
+  --cds-layer-selected-hover: #4c4c4c;
+  --cds-layer-selected-inverse: #f4f4f4;
+  --cds-border-subtle-selected: #525252;
+  --cds-border-disabled: #262626;
+  --cds-text-disabled: #525252;
+  --cds-button-disabled: #525252;
+  --cds-icon-disabled: #525252;
+  --cds-text-on-color-disabled: #8d8d8d;
+  --cds-icon-on-color-disabled: #8d8d8d;
+  --cds-layer-selected-disabled: #8d8d8d;
+  --cds-skeleton-background: #353535;
+  --cds-skeleton-element: #525252;
+  --cds-brand-01: #0f62fe;
+  --cds-brand-02: #6f6f6f;
+  --cds-brand-03: #ffffff;
+  --cds-active-01: #525252;
+  --cds-hover-field: #353535;
+  --cds-danger: #da1e28;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
+  --cds-label-01-font-size: 0.75rem;
+  --cds-label-01-font-weight: 400;
+  --cds-label-01-line-height: 1.33333;
+  --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
+  --cds-helper-text-01-font-size: 0.75rem;
+  --cds-helper-text-01-line-height: 1.33333;
+  --cds-helper-text-01-letter-spacing: 0.32px;
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-line-height: 1.28572;
+  --cds-helper-text-02-letter-spacing: 0.16px;
+  --cds-body-short-01-font-size: 0.875rem;
+  --cds-body-short-01-font-weight: 400;
+  --cds-body-short-01-line-height: 1.28572;
+  --cds-body-short-01-letter-spacing: 0.16px;
+  --cds-body-long-01-font-size: 0.875rem;
+  --cds-body-long-01-font-weight: 400;
+  --cds-body-long-01-line-height: 1.42857;
+  --cds-body-long-01-letter-spacing: 0.16px;
+  --cds-body-short-02-font-size: 1rem;
+  --cds-body-short-02-font-weight: 400;
+  --cds-body-short-02-line-height: 1.375;
+  --cds-body-short-02-letter-spacing: 0;
+  --cds-body-long-02-font-size: 1rem;
+  --cds-body-long-02-font-weight: 400;
+  --cds-body-long-02-line-height: 1.5;
+  --cds-body-long-02-letter-spacing: 0;
+  --cds-code-01-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+  --cds-code-01-font-size: 0.75rem;
+  --cds-code-01-font-weight: 400;
+  --cds-code-01-line-height: 1.33333;
+  --cds-code-01-letter-spacing: 0.32px;
+  --cds-code-02-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+  --cds-code-02-font-size: 0.875rem;
+  --cds-code-02-font-weight: 400;
+  --cds-code-02-line-height: 1.42857;
+  --cds-code-02-letter-spacing: 0.32px;
+  --cds-heading-01-font-size: 0.875rem;
+  --cds-heading-01-font-weight: 600;
+  --cds-heading-01-line-height: 1.42857;
+  --cds-heading-01-letter-spacing: 0.16px;
+  --cds-productive-heading-01-font-size: 0.875rem;
+  --cds-productive-heading-01-font-weight: 600;
+  --cds-productive-heading-01-line-height: 1.28572;
+  --cds-productive-heading-01-letter-spacing: 0.16px;
+  --cds-heading-02-font-size: 1rem;
+  --cds-heading-02-font-weight: 600;
+  --cds-heading-02-line-height: 1.5;
+  --cds-heading-02-letter-spacing: 0;
+  --cds-productive-heading-02-font-size: 1rem;
+  --cds-productive-heading-02-font-weight: 600;
+  --cds-productive-heading-02-line-height: 1.375;
+  --cds-productive-heading-02-letter-spacing: 0;
+  --cds-productive-heading-03-font-size: 1.25rem;
+  --cds-productive-heading-03-font-weight: 400;
+  --cds-productive-heading-03-line-height: 1.4;
+  --cds-productive-heading-03-letter-spacing: 0;
+  --cds-productive-heading-04-font-size: 1.75rem;
+  --cds-productive-heading-04-font-weight: 400;
+  --cds-productive-heading-04-line-height: 1.28572;
+  --cds-productive-heading-04-letter-spacing: 0;
+  --cds-productive-heading-05-font-size: 2rem;
+  --cds-productive-heading-05-font-weight: 400;
+  --cds-productive-heading-05-line-height: 1.25;
+  --cds-productive-heading-05-letter-spacing: 0;
+  --cds-productive-heading-06-font-size: 2.625rem;
+  --cds-productive-heading-06-font-weight: 300;
+  --cds-productive-heading-06-line-height: 1.199;
+  --cds-productive-heading-06-letter-spacing: 0;
+  --cds-productive-heading-07-font-size: 3.375rem;
+  --cds-productive-heading-07-font-weight: 300;
+  --cds-productive-heading-07-line-height: 1.199;
+  --cds-productive-heading-07-letter-spacing: 0;
+  --cds-expressive-heading-01-font-size: 0.875rem;
+  --cds-expressive-heading-01-font-weight: 600;
+  --cds-expressive-heading-01-line-height: 1.25;
+  --cds-expressive-heading-01-letter-spacing: 0.16px;
+  --cds-expressive-heading-02-font-size: 1rem;
+  --cds-expressive-heading-02-font-weight: 600;
+  --cds-expressive-heading-02-line-height: 1.5;
+  --cds-expressive-heading-02-letter-spacing: 0;
+  --cds-expressive-heading-03-font-size: 1.25rem;
+  --cds-expressive-heading-03-font-weight: 400;
+  --cds-expressive-heading-03-line-height: 1.4;
+  --cds-expressive-heading-03-letter-spacing: 0;
+  --cds-expressive-heading-04-font-size: 1.75rem;
+  --cds-expressive-heading-04-font-weight: 400;
+  --cds-expressive-heading-04-line-height: 1.28572;
+  --cds-expressive-heading-04-letter-spacing: 0;
+  --cds-expressive-heading-05-font-size: 2rem;
+  --cds-expressive-heading-05-font-weight: 400;
+  --cds-expressive-heading-05-line-height: 1.25;
+  --cds-expressive-heading-05-letter-spacing: 0;
+  --cds-expressive-heading-06-font-size: 2rem;
+  --cds-expressive-heading-06-font-weight: 600;
+  --cds-expressive-heading-06-line-height: 1.25;
+  --cds-expressive-heading-06-letter-spacing: 0;
+  --cds-expressive-paragraph-01-font-size: 1.5rem;
+  --cds-expressive-paragraph-01-font-weight: 300;
+  --cds-expressive-paragraph-01-line-height: 1.334;
+  --cds-expressive-paragraph-01-letter-spacing: 0;
+  --cds-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-quotation-01-font-size: 1.25rem;
+  --cds-quotation-01-font-weight: 400;
+  --cds-quotation-01-line-height: 1.3;
+  --cds-quotation-01-letter-spacing: 0;
+  --cds-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-quotation-02-font-size: 2rem;
+  --cds-quotation-02-font-weight: 300;
+  --cds-quotation-02-line-height: 1.25;
+  --cds-quotation-02-letter-spacing: 0;
+  --cds-display-01-font-size: 2.625rem;
+  --cds-display-01-font-weight: 300;
+  --cds-display-01-line-height: 1.19;
+  --cds-display-01-letter-spacing: 0;
+  --cds-display-02-font-size: 2.625rem;
+  --cds-display-02-font-weight: 600;
+  --cds-display-02-line-height: 1.19;
+  --cds-display-02-letter-spacing: 0;
+  --cds-display-03-font-size: 2.625rem;
+  --cds-display-03-font-weight: 300;
+  --cds-display-03-line-height: 1.19;
+  --cds-display-03-letter-spacing: 0;
+  --cds-display-04-font-size: 2.625rem;
+  --cds-display-04-font-weight: 300;
+  --cds-display-04-line-height: 1.19;
+  --cds-display-04-letter-spacing: 0;
+  --cds-legal-01-font-size: 0.75rem;
+  --cds-legal-01-font-weight: 400;
+  --cds-legal-01-line-height: 1.33333;
+  --cds-legal-01-letter-spacing: 0.32px;
+  --cds-legal-02-font-size: 0.875rem;
+  --cds-legal-02-font-weight: 400;
+  --cds-legal-02-line-height: 1.28572;
+  --cds-legal-02-letter-spacing: 0.16px;
+  --cds-body-compact-01-font-size: 0.875rem;
+  --cds-body-compact-01-font-weight: 400;
+  --cds-body-compact-01-line-height: 1.28572;
+  --cds-body-compact-01-letter-spacing: 0.16px;
+  --cds-body-compact-02-font-size: 1rem;
+  --cds-body-compact-02-font-weight: 400;
+  --cds-body-compact-02-line-height: 1.375;
+  --cds-body-compact-02-letter-spacing: 0;
+  --cds-body-01-font-size: 0.875rem;
+  --cds-body-01-font-weight: 400;
+  --cds-body-01-line-height: 1.42857;
+  --cds-body-01-letter-spacing: 0.16px;
+  --cds-body-02-font-size: 1rem;
+  --cds-body-02-font-weight: 400;
+  --cds-body-02-line-height: 1.5;
+  --cds-body-02-letter-spacing: 0;
+  --cds-heading-compact-01-font-size: 0.875rem;
+  --cds-heading-compact-01-font-weight: 600;
+  --cds-heading-compact-01-line-height: 1.28572;
+  --cds-heading-compact-01-letter-spacing: 0.16px;
+  --cds-heading-compact-02-font-size: 1rem;
+  --cds-heading-compact-02-font-weight: 600;
+  --cds-heading-compact-02-line-height: 1.375;
+  --cds-heading-compact-02-letter-spacing: 0;
+  --cds-heading-03-font-size: 1.25rem;
+  --cds-heading-03-font-weight: 400;
+  --cds-heading-03-line-height: 1.4;
+  --cds-heading-03-letter-spacing: 0;
+  --cds-heading-04-font-size: 1.75rem;
+  --cds-heading-04-font-weight: 400;
+  --cds-heading-04-line-height: 1.28572;
+  --cds-heading-04-letter-spacing: 0;
+  --cds-heading-05-font-size: 2rem;
+  --cds-heading-05-font-weight: 400;
+  --cds-heading-05-line-height: 1.25;
+  --cds-heading-05-letter-spacing: 0;
+  --cds-heading-06-font-size: 2.625rem;
+  --cds-heading-06-font-weight: 300;
+  --cds-heading-06-line-height: 1.199;
+  --cds-heading-06-letter-spacing: 0;
+  --cds-heading-07-font-size: 3.375rem;
+  --cds-heading-07-font-weight: 300;
+  --cds-heading-07-line-height: 1.199;
+  --cds-heading-07-letter-spacing: 0;
+  --cds-fluid-heading-03-font-size: 1.25rem;
+  --cds-fluid-heading-03-font-weight: 400;
+  --cds-fluid-heading-03-line-height: 1.4;
+  --cds-fluid-heading-03-letter-spacing: 0;
+  --cds-fluid-heading-04-font-size: 1.75rem;
+  --cds-fluid-heading-04-font-weight: 400;
+  --cds-fluid-heading-04-line-height: 1.28572;
+  --cds-fluid-heading-04-letter-spacing: 0;
+  --cds-fluid-heading-05-font-size: 2rem;
+  --cds-fluid-heading-05-font-weight: 400;
+  --cds-fluid-heading-05-line-height: 1.25;
+  --cds-fluid-heading-05-letter-spacing: 0;
+  --cds-fluid-heading-06-font-size: 2rem;
+  --cds-fluid-heading-06-font-weight: 600;
+  --cds-fluid-heading-06-line-height: 1.25;
+  --cds-fluid-heading-06-letter-spacing: 0;
+  --cds-fluid-paragraph-01-font-size: 1.5rem;
+  --cds-fluid-paragraph-01-font-weight: 300;
+  --cds-fluid-paragraph-01-line-height: 1.334;
+  --cds-fluid-paragraph-01-letter-spacing: 0;
+  --cds-fluid-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-fluid-quotation-01-font-size: 1.25rem;
+  --cds-fluid-quotation-01-font-weight: 400;
+  --cds-fluid-quotation-01-line-height: 1.3;
+  --cds-fluid-quotation-01-letter-spacing: 0;
+  --cds-fluid-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+  --cds-fluid-quotation-02-font-size: 2rem;
+  --cds-fluid-quotation-02-font-weight: 300;
+  --cds-fluid-quotation-02-line-height: 1.25;
+  --cds-fluid-quotation-02-letter-spacing: 0;
+  --cds-fluid-display-01-font-size: 2.625rem;
+  --cds-fluid-display-01-font-weight: 300;
+  --cds-fluid-display-01-line-height: 1.19;
+  --cds-fluid-display-01-letter-spacing: 0;
+  --cds-fluid-display-02-font-size: 2.625rem;
+  --cds-fluid-display-02-font-weight: 600;
+  --cds-fluid-display-02-line-height: 1.19;
+  --cds-fluid-display-02-letter-spacing: 0;
+  --cds-fluid-display-03-font-size: 2.625rem;
+  --cds-fluid-display-03-font-weight: 300;
+  --cds-fluid-display-03-line-height: 1.19;
+  --cds-fluid-display-03-letter-spacing: 0;
+  --cds-fluid-display-04-font-size: 2.625rem;
+  --cds-fluid-display-04-font-weight: 300;
+  --cds-fluid-display-04-line-height: 1.19;
+  --cds-fluid-display-04-letter-spacing: 0;
+  --cds-spacing-01: 0.125rem;
+  --cds-spacing-02: 0.25rem;
+  --cds-spacing-03: 0.5rem;
+  --cds-spacing-04: 0.75rem;
+  --cds-spacing-05: 1rem;
+  --cds-spacing-06: 1.5rem;
+  --cds-spacing-07: 2rem;
+  --cds-spacing-08: 2.5rem;
+  --cds-spacing-09: 3rem;
+  --cds-spacing-10: 4rem;
+  --cds-spacing-11: 5rem;
+  --cds-spacing-12: 6rem;
+  --cds-spacing-13: 10rem;
+  --cds-fluid-spacing-01: 0;
+  --cds-fluid-spacing-02: 2vw;
+  --cds-fluid-spacing-03: 5vw;
+  --cds-fluid-spacing-04: 10vw;
+  --cds-layout-01: 1rem;
+  --cds-layout-02: 1.5rem;
+  --cds-layout-03: 2rem;
+  --cds-layout-04: 3rem;
+  --cds-layout-05: 4rem;
+  --cds-layout-06: 6rem;
+  --cds-layout-07: 10rem;
+  --cds-container-01: 1.5rem;
+  --cds-container-02: 2rem;
+  --cds-container-03: 2.5rem;
+  --cds-container-04: 3rem;
+  --cds-container-05: 4rem;
+  --cds-size-xsmall: 1.5rem;
+  --cds-size-small: 2rem;
+  --cds-size-medium: 2.5rem;
+  --cds-size-large: 3rem;
+  --cds-size-xlarge: 4rem;
+  --cds-size-2XLarge: 5rem;
+  --cds-icon-size-01: 1rem;
+  --cds-icon-size-02: 1.25rem;
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  display: block;
+  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
+  border-left-width: 0.078125rem;
+  border-left-style: solid;
+  margin: var(--cds-spacing-02, 0.25rem) 0;
+  animation: fade 600ms;
+  border-left-color: var(--cds-text-01, #161616);
+  color: var(--cds-text-01, #161616);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__body a {
+  color: var(--cds-link-01, #0f62fe);
+}
+
+/**
+ * The InlineTip specifically is theme-agnostic, and so we have to 
+ * use color tokens to keep the colors static instead of theme tokens 
+ * that will change depending on the selected theme.
+ * 
+ * We are triggering a *large* amount of linting errors.
+ * So, we're adding 2 "disable" rules for the file instead of 25 
+ * individual rules.
+ */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable carbon/theme-token-use */
+.c4p--inline-tip {
+  position: relative;
+  display: flex;
+  background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
+}
+.c4p--inline-tip__wide {
+  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-10, 4rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-09, 3rem);
+}
+.c4p--inline-tip__wide.c4p--inline-tip__has-media {
+  padding-right: var(--cds-spacing-09, 3rem);
+}
+.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media {
+  padding-left: var(--cds-spacing-10, 4rem);
+}
+.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media img {
+  display: block;
+  height: 7.375rem;
+}
+.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media svg {
+  width: calc(7.375rem * 2) !important;
+  height: 7.375rem !important;
+}
+.c4p--inline-tip__narrow {
+  flex-direction: column-reverse;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding: 3.25rem var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
+}
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media {
+  padding-top: var(--cds-spacing-07, 2rem);
+  padding-right: var(--cds-spacing-05, 1rem);
+}
+.c4p--inline-tip__narrow .c4p--inline-tip__media {
+  padding-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--inline-tip__narrow .c4p--inline-tip__media img {
+  width: 100%;
+}
+.c4p--inline-tip__narrow .c4p--inline-tip__content {
+  padding-right: var(--cds-spacing-05, 1rem);
+}
+.c4p--inline-tip__narrow .c4p--inline-tip__footer {
+  justify-content: space-between;
+}
+.c4p--inline-tip__narrow .c4p--inline-tip__footer .c4p--inline-tip__close-btn {
+  margin-right: calc(-1 * var(--cds-spacing-05, 1rem));
+}
+.c4p--inline-tip a {
+  color: #a6c8ff;
+}
+.c4p--inline-tip a:visited, .c4p--inline-tip a:hover, .c4p--inline-tip a:visited:hover {
+  color: #a6c8ff;
+}
+.c4p--inline-tip__title {
+  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-productive-heading-01-font-weight, 600);
+  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+  color: #ffffff;
+}
+.c4p--inline-tip__body {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+  color: #f4f4f4;
+}
+.c4p--inline-tip__body p {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+  margin-bottom: var(--cds-spacing-03, 0.5rem);
+  font-size: inherit;
+  line-height: inherit;
+}
+.c4p--inline-tip__body p:last-of-type {
+  margin-bottom: 0;
+}
+.c4p--inline-tip__body .c4p--inline-tip__secondary-btn {
+  margin-top: var(--cds-spacing-03, 0.5rem);
+}
+.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button {
+  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
+  color: #a6c8ff;
+}
+.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:active, .c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:hover {
+  background-color: #7f3ae7;
+  color: #f4f4f4;
+}
+.c4p--inline-tip__footer {
+  display: flex;
+  padding-top: var(--cds-spacing-05, 1rem);
+}
+.c4p--inline-tip__footer:empty {
+  display: none;
+}
+.c4p--inline-tip__preview-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.c4p--inline-tip__icon-idea {
+  position: absolute;
+  width: 1.25rem;
+  color: #ffffff;
+  inset: var(--cds-spacing-05, 1rem) 0 0 var(--cds-spacing-05, 1rem);
+}
+.c4p--inline-tip__close-icon {
+  position: absolute !important;
+  top: 0;
+  right: 0;
+  width: var(--cds-spacing-07, 2rem);
+  height: var(--cds-spacing-07, 2rem);
+  min-height: var(--cds-spacing-07, 2rem) !important;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding: 0 0 0 0.375rem !important;
+  color: #ffffff;
+}
+.c4p--inline-tip__close-icon:active, .c4p--inline-tip__close-icon:hover {
+  background-color: #7f3ae7 !important;
+  color: var(--cds-text-01, #161616) !important;
+}
+.c4p--inline-tip__close-icon svg > path {
+  margin: 0;
+  fill: #ffffff !important;
+}
+.c4p--inline-tip__toggle-btn {
+  border: none;
+  margin: 0 var(--cds-spacing-05, 1rem) 0 calc(-1 * var(--cds-spacing-05, 1rem)) !important;
+  color: #a6c8ff !important;
+}
+.c4p--inline-tip__toggle-btn:hover {
+  background-color: #7c3dd6 !important;
+  color: #f4f4f4 !important;
+}
+.c4p--inline-tip__close-btn {
+  border: 0.0625rem solid #ffffff !important;
+  color: #ffffff !important;
+}
+.c4p--inline-tip__close-btn:active, .c4p--inline-tip__close-btn:hover {
+  background-color: #f4f4f4 !important;
+  color: #161616 !important;
 }
 
 /*# sourceMappingURL=index.css.map */