@carbon/ibm-products 1.55.2 → 1.56.0

package/css/index-full-carbon.css

@@ -23194,6 +23194,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--carousel__elements::-webkit-scrollbar {
   display: none;
 }
+@media (prefers-reduced-motion) {
+  .c4p--carousel__elements {
+    scroll-behavior: auto;
+  }
+}
 
 /**
  * The Guidebanner specifically is theme-agnostic, and so we have to 
@@ -25597,6 +25602,580 @@ th.c4p--datagrid__select-all-toggle-on.button {
   color: var(--cds-link-01, #0f62fe);
 }
 
+/* stylelint-disable declaration-no-important */
+.c4p--coachmark-dragbar {
+  display: flex;
+}
+.c4p--coachmark-dragbar__handle {
+  flex-grow: 1;
+  padding: var(--cds-spacing-03, 0.5rem) 0 0 var(--cds-spacing-03, 0.5rem);
+  border: 0;
+  background-color: transparent;
+  text-align: left;
+}
+.c4p--coachmark-dragbar__handle:hover {
+  cursor: move;
+}
+.c4p--coachmark-dragbar--close-btn {
+  width: var(--cds-spacing-07, 2rem);
+  height: var(--cds-spacing-07, 2rem);
+  margin-left: auto !important;
+}
+.c4p--coachmark-dragbar--close-btn svg > path {
+  margin: 0;
+  fill: var(--cds-inverse-01, #ffffff) !important;
+}
+.c4p--coachmark-dragbar--close-btn:hover {
+  background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
+}
+.c4p--coachmark-dragbar__light c4p--coachmark-dragbar--close-btn:active {
+  background-color: var(--cds-active-secondary, #6f6f6f);
+}
+.c4p--coachmark-dragbar__dark c4p--coachmark-dragbar--close-btn:active {
+  background-color: var(--cds-button-tertiary-active, #002d9c);
+}
+.c4p--coachmark-dragbar svg {
+  color: var(--cds-inverse-01, #ffffff);
+}
+
+/* stylelint-disable declaration-no-important */
+.c4p--coachmark-header {
+  display: flex;
+}
+.c4p--coachmark-header--close-btn {
+  width: var(--cds-spacing-07, 2rem);
+  height: var(--cds-spacing-07, 2rem);
+  margin-left: auto !important;
+}
+.c4p--coachmark-header--close-btn svg > path {
+  margin: 0;
+  fill: var(--cds-inverse-01, #ffffff) !important;
+}
+.c4p--coachmark-header--close-btn:hover {
+  background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
+}
+.c4p--coachmark-header__light c4p--coachmark-header--close-btn:active {
+  background-color: var(--cds-active-secondary, #6f6f6f);
+}
+.c4p--coachmark-header__dark c4p--coachmark-header--close-btn:active {
+  background-color: var(--cds-button-tertiary-active, #002d9c);
+}
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+.c4p--coachmark-overlay {
+  position: absolute;
+  z-index: 5901;
+  width: 18rem;
+  border-radius: var(--cds-spacing-01, 0.125rem);
+  background-color: var(--cds-inverse-02, #393939);
+  color: var(--cds-inverse-01, #ffffff);
+  /* ------------------ */
+}
+.c4p--coachmark-overlay--fixed {
+  position: fixed;
+  right: var(--cds-spacing-05, 1rem);
+  bottom: 0;
+  transform: translateY(100%);
+  /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
+  transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-overlay--fixed {
+    transition: none;
+  }
+}
+.c4p--coachmark-overlay--is-visible {
+  transform: translateY(0);
+}
+.c4p--coachmark-overlay__caret {
+  position: absolute;
+  z-index: 5902;
+  width: 0;
+  height: 0;
+  border-right: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) solid transparent;
+  border-bottom: solid calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) var(--cds-inverse-02, #393939);
+  border-left: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) solid transparent;
+}
+.c4p--coachmark-overlay--top {
+  transform: translate(-50%, calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
+}
+.c4p--coachmark-overlay--top .c4p--coachmark-overlay__caret {
+  left: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+  transform: rotate(180deg);
+}
+.c4p--coachmark-overlay--top-left {
+  transform: translate(calc(-1 * var(--cds-spacing-06, 1.5rem)), calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
+}
+.c4p--coachmark-overlay--top-left .c4p--coachmark-overlay__caret {
+  left: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+  transform: rotate(180deg);
+}
+.c4p--coachmark-overlay--top-right {
+  transform: translate(calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))), calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
+}
+.c4p--coachmark-overlay--top-right .c4p--coachmark-overlay__caret {
+  right: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+  transform: rotate(180deg);
+}
+.c4p--coachmark-overlay--bottom {
+  transform: translate(-50%, calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+}
+.c4p--coachmark-overlay--bottom .c4p--coachmark-overlay__caret {
+  top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+  left: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+}
+.c4p--coachmark-overlay--bottom-left {
+  transform: translate(calc(-1 * var(--cds-spacing-06, 1.5rem)), calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+}
+.c4p--coachmark-overlay--bottom-left .c4p--coachmark-overlay__caret {
+  top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+  left: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+}
+.c4p--coachmark-overlay--bottom-right {
+  transform: translate(calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))), calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+}
+.c4p--coachmark-overlay--bottom-right .c4p--coachmark-overlay__caret {
+  top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+  right: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
+}
+.c4p--coachmark-overlay--left {
+  transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), -50%);
+}
+.c4p--coachmark-overlay--left .c4p--coachmark-overlay__caret {
+  top: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
+  right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
+  transform: rotate(90deg);
+}
+.c4p--coachmark-overlay--left-top {
+  transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), calc(-1 * var(--cds-spacing-06, 1.5rem)));
+}
+.c4p--coachmark-overlay--left-top .c4p--coachmark-overlay__caret {
+  top: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
+  right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
+  transform: rotate(90deg);
+}
+.c4p--coachmark-overlay--left-bottom {
+  transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))));
+}
+.c4p--coachmark-overlay--left-bottom .c4p--coachmark-overlay__caret {
+  right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
+  bottom: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
+  transform: rotate(90deg);
+}
+.c4p--coachmark-overlay--right {
+  transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), -50%);
+}
+.c4p--coachmark-overlay--right .c4p--coachmark-overlay__caret {
+  top: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
+  left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
+  transform: rotate(-90deg);
+}
+.c4p--coachmark-overlay--right-top {
+  transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), calc(-1 * var(--cds-spacing-06, 1.5rem)));
+}
+.c4p--coachmark-overlay--right-top .c4p--coachmark-overlay__caret {
+  top: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
+  left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
+  transform: rotate(-90deg);
+}
+.c4p--coachmark-overlay--right-bottom {
+  transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))));
+}
+.c4p--coachmark-overlay--right-bottom .c4p--coachmark-overlay__caret {
+  bottom: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
+  left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
+  transform: rotate(-90deg);
+}
+.c4p--coachmark-overlay__element-stepped-media {
+  height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--coachmark-overlay__body {
+  padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
+}
+.c4p--coachmark-overlay__body .bx--btn--ghost {
+  color: var(--cds-inverse-link, #78a9ff);
+}
+.c4p--coachmark-overlay__body .bx--btn--ghost:hover {
+  color: var(--cds-inverse-link, #78a9ff);
+}
+.c4p--coachmark-overlay__body c4p--coachmark-overlay-element {
+  display: block;
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__content {
+  padding-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div {
+  margin: 0 0 var(--cds-spacing-03, 0.5rem);
+}
+.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div > h2 {
+  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);
+  order: 1;
+}
+.c4p--coachmark-overlay__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link {
+  color: var(--cds-inverse-link, #78a9ff);
+}
+.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:hover {
+  color: #a6c8ff;
+}
+.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:active {
+  color: var(--cds-text-04, #ffffff);
+}
+.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
+  outline-color: var(--cds-text-04, #ffffff);
+}
+.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
+  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
+}
+.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
+  background-color: var(--cds-active-secondary, #6f6f6f);
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
+  color: #0062fe;
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:hover {
+  color: #0043ce;
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:active {
+  color: var(--cds-link-02, #0043ce);
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:focus {
+  color: var(--cds-inverse-01, #ffffff);
+  outline-color: var(--cds-inverse-01, #ffffff);
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--primary:focus {
+  background-color: var(--cds-button-primary-active, #002d9c);
+  box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-interactive-01, #0f62fe), inset 0 0 0 0.1875rem var(--cds-interactive-03, #0f62fe);
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
+  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:active {
+  background-color: var(--cds-button-tertiary-active, #002d9c);
+}
+.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
+  box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-interactive-01, #0f62fe), inset 0 0 0 0.1875rem var(--cds-interactive-03, #0f62fe);
+}
+.c4p--coachmark-overlay .c4p--carousel__item {
+  flex: 0 0 100% !important;
+}
+
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+.c4p--coachmark-tagline {
+  position: fixed;
+  z-index: 1000;
+  right: var(--cds-spacing-05, 1rem);
+  bottom: 0;
+  display: grid;
+  overflow: hidden;
+  width: 18rem;
+  border-radius: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-01, 0.125rem) 0 0;
+  background: #6929c4;
+  background-image: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
+  color: #ffffff !important;
+  grid-template-columns: [ctacol] auto [closebtncol] var(--cds-spacing-08, 2.5rem);
+  opacity: 1;
+  transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9) 300ms;
+  transition-delay: 240ms;
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-tagline {
+    transition: none;
+  }
+}
+.c4p--coachmark-tagline::before {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(90deg, #0043ce 0%, #6929c4 100%);
+  content: "";
+  opacity: 0;
+  /* stylelint-disable-next-line carbon/motion-duration-use */
+  transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9);
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-tagline::before {
+    transition: none;
+  }
+}
+.c4p--coachmark-tagline:hover::before {
+  opacity: 1;
+}
+.c4p--coachmark-tagline--is-open {
+  background: #ffffff;
+  opacity: 0;
+}
+.c4p--coachmark-tagline--is-open c4p--coachmark-tagline__cta {
+  opacity: 0;
+}
+.c4p--coachmark-tagline--is-open c4p--coachmark-tagline--close-btn {
+  display: none;
+}
+.c4p--coachmark-tagline--is-open::before {
+  background: #ffffff;
+}
+.c4p--coachmark-tagline__cta {
+  display: grid;
+  padding: var(--cds-spacing-03, 0.5rem) 0;
+  border: none;
+  background: transparent;
+  color: #ffffff !important;
+  grid-template-columns: [iconcol] var(--cds-spacing-07, 2rem) [bodycol] auto;
+  text-align: left;
+  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);
+}
+.c4p--coachmark-tagline__cta:hover {
+  cursor: pointer !important;
+}
+.c4p--coachmark-tagline__cta .c4p--coachmark-tagline__idea {
+  justify-self: center;
+}
+.c4p--coachmark-tagline--close-btn {
+  width: var(--cds-spacing-07, 2rem);
+  height: var(--cds-spacing-07, 2rem);
+  margin-left: auto !important;
+  color: #ffffff;
+}
+.c4p--coachmark-tagline--close-btn svg > path {
+  margin: 0;
+  fill: #ffffff !important;
+}
+.c4p--coachmark-tagline--close-btn:hover {
+  background-color: #7c3dd6 !important;
+}
+
+/**
+ * The CoachmarkBeacon 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 */
+.c4p--coachmark-beacon {
+  position: relative;
+}
+.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
+  position: absolute;
+  top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
+  left: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
+  width: var(--cds-spacing-04, 0.75rem);
+  height: var(--cds-spacing-04, 0.75rem);
+  border-radius: 50%;
+  background-color: #4589ff;
+  content: "";
+}
+.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center {
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
+}
+.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
+  /* stylelint-disable-next-line carbon/motion-easing-use */
+  animation: ring-ripple 2s infinite;
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
+    animation: none;
+  }
+}
+.c4p--coachmark-beacon .c4p--coachmark-beacon__target {
+  position: absolute;
+  top: calc(-1 * var(--cds-spacing-05, 1rem));
+  left: calc(-1 * var(--cds-spacing-05, 1rem));
+  width: var(--cds-spacing-07, 2rem);
+  height: var(--cds-spacing-07, 2rem);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+  cursor: pointer;
+}
+.c4p--coachmark-beacon .c4p--coachmark-beacon__target[aria-expanded=true] circle {
+  animation: none;
+}
+.c4p--coachmark-beacon__center {
+  position: absolute;
+  z-index: 6900;
+  top: calc((var(--cds-spacing-06, 1.5rem) - var(--cds-spacing-01, 0.125rem)) * -1);
+  left: calc((var(--cds-spacing-06, 1.5rem) - var(--cds-spacing-01, 0.125rem)) * -1);
+  width: var(--cds-spacing-11, 5rem);
+  height: var(--cds-spacing-11, 5rem);
+  pointer-events: none;
+}
+.c4p--coachmark-beacon__center circle {
+  /* stylelint-disable-next-line carbon/motion-easing-use */
+  animation: ripple 2s infinite;
+  fill: var(--cds-support-04, #0043ce);
+  fill-opacity: 0;
+  -webkit-mask-image: none;
+  mask-image: none;
+  stroke: var(--cds-support-04, #0043ce);
+  stroke-opacity: 0;
+  stroke-width: 1px;
+  transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-beacon__center circle {
+    animation: none;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    fill-opacity: 0;
+    r: 1px;
+    stroke-opacity: 0;
+    transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  }
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
+@keyframes ring-ripple {
+  0% {
+    fill-opacity: 0;
+    r: 12px;
+    stroke-opacity: 0;
+    transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  }
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
+.c4p--coachmark-overlay-elements__element-stepped-media {
+  height: 8rem;
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--coachmark-overlay-elements__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.c4p--coachmark-overlay-elements--controls-progress {
+  margin-right: auto;
+  justify-self: flex-start;
+  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
+  line-height: var(--cds-helper-text-01-line-height, 1.33333);
+  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
+}
+
+.c4p--coachmark-overlay-element__content {
+  padding-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--coachmark-overlay-element__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);
+  margin: 0 0 var(--cds-spacing-03, 0.5rem);
+}
+.c4p--coachmark-overlay-element__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);
+}
+.c4p--coachmark-overlay-element__button {
+  margin-bottom: 0;
+}
+
+.c4p--carousel__item .c4p--coachmark-overlay-element__button {
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+
+/* stylelint-disable carbon/theme-token-use */
+.c4p--coachmark-stack-element {
+  position: fixed;
+  z-index: 5901;
+  right: var(--cds-spacing-05, 1rem);
+  bottom: -100%;
+  transform: translateY(100%);
+}
+.c4p--coachmark-stack-element--is-mounted {
+  bottom: 0;
+  /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
+  transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-stack-element--is-mounted {
+    transition: none;
+  }
+}
+.c4p--coachmark-stack-element--is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.c4p--coachmark-stack-element--is-stacked {
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
+  transform-origin: top center;
+}
+.c4p--coachmark-stack-element--is-stacked__light {
+  background-color: #262626;
+}
+.c4p--coachmark-stack-element--is-stacked__dark {
+  background-color: var(--cds-active-tertiary, #002d9c);
+}
+
+.c4p--coachmark-stack-element ~ .c4p--coachmark-stack-element {
+  z-index: 5902;
+}
+
+.c4p--coachmark-stacked-home__nav-links {
+  margin-top: var(--cds-spacing-04, 0.75rem);
+  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
+}
+.c4p--coachmark-stacked-home__icon-idea {
+  margin-bottom: var(--cds-spacing-03, 0.5rem);
+}
+
 /**
  * The InlineTip specifically is theme-agnostic, and so we have to 
  * use color tokens to keep the colors static instead of theme tokens