@carbon/ibm-products 2.36.0 → 2.37.0

package/css/index-without-carbon.css

@@ -2343,6 +2343,61 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 /* stylelint-disable max-nesting-depth */
+.c4p--carousel {
+  position: relative;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.c4p--carousel:focus {
+  outline: none;
+}
+
+.c4p--carousel__elements-container {
+  overflow: hidden;
+}
+
+.c4p--carousel__elements-container--scrolled,
+.c4p--carousel__elements-container--scroll-max {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  width: 2rem;
+  pointer-events: none;
+}
+
+.c4p--carousel__elements-container--scrolled {
+  left: 0;
+}
+
+.c4p--carousel__elements-container--scroll-max {
+  right: 0;
+}
+
+.c4p--carousel__elements {
+  display: flex;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  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;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion) {
+  .c4p--carousel__elements {
+    scroll-behavior: auto;
+  }
+}
+
+.c4p--carousel__elements::-webkit-scrollbar {
+  display: none;
+}
+
 .c4p--coachmark-overlay-elements__element-stepped-media {
   /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
   height: 8rem;
@@ -3257,7 +3312,7 @@ p.c4p--about-modal__copyright-text:first-child {
   padding-top: 0.5rem;
 }
 .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 .c4p--side-panel .c4p--side-panel__action-toolbar {
@@ -3438,7 +3493,7 @@ p.c4p--about-modal__copyright-text:first-child {
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
-  transition: visibility 0s linear 240ms;
+  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);
   --c4p--tearsheet--stacking-scale-factor-single: 0.95;
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
@@ -3663,7 +3718,7 @@ p.c4p--about-modal__copyright-text:first-child {
   flex-grow: 1;
 }
 .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__content {
-  background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
@@ -4140,7 +4195,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--card--has-slug {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
@@ -14442,7 +14497,7 @@ a.cds--side-nav__link--current::before {
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
-  transition: visibility 0s linear 240ms;
+  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);
   --c4p--tearsheet--stacking-scale-factor-single: 0.95;
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
@@ -14713,7 +14768,7 @@ a.cds--side-nav__link--current::before {
 }
 
 .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__content {
-  background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
 }
 
@@ -14986,61 +15041,6 @@ a.cds--side-nav__link--current::before {
   color: #ffffff;
 }
 
-.c4p--carousel {
-  position: relative;
-  /* stylelint-disable-next-line max-nesting-depth */
-}
-.c4p--carousel:focus {
-  outline: none;
-}
-
-.c4p--carousel__elements-container {
-  overflow: hidden;
-}
-
-.c4p--carousel__elements-container--scrolled,
-.c4p--carousel__elements-container--scroll-max {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  bottom: 0;
-  width: 2rem;
-  pointer-events: none;
-}
-
-.c4p--carousel__elements-container--scrolled {
-  left: 0;
-}
-
-.c4p--carousel__elements-container--scroll-max {
-  right: 0;
-}
-
-.c4p--carousel__elements {
-  display: flex;
-  overflow: scroll;
-  -ms-overflow-style: none;
-  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;
-  /* stylelint-disable-next-line max-nesting-depth */
-}
-@media (prefers-reduced-motion) {
-  .c4p--carousel__elements {
-    scroll-behavior: auto;
-  }
-}
-
-.c4p--carousel__elements::-webkit-scrollbar {
-  display: none;
-}
-
 .c4p--checklist__header {
   display: flex;
   padding: 1rem;
@@ -19320,4 +19320,763 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   overflow-y: auto;
 }
 
+.cds--tag {
+  --cds-layout-size-height-xs: 1.125rem;
+  --cds-layout-size-height-sm: 1.125rem;
+  --cds-layout-size-height-md: 1.5rem;
+  --cds-layout-size-height-lg: 2rem;
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  background-color: var(--cds-tag-background-gray, #e0e0e0);
+  color: var(--cds-tag-color-gray, #161616);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1rem;
+  margin: 0.25rem;
+  cursor: default;
+  max-inline-size: 100%;
+  min-block-size: var(--cds-layout-size-height-local);
+  min-inline-size: 2rem;
+  padding-inline: 0.5rem;
+  vertical-align: middle;
+  word-break: break-word;
+}
+.cds--layout--size-xs .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-xs);
+}
+.cds--layout--size-sm .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-sm);
+}
+.cds--layout--size-md .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-md);
+}
+.cds--layout--size-lg .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-lg);
+}
+.cds--tag.cds--tag--operational {
+  border: 1px solid var(--cds-tag-background-gray, #e0e0e0);
+}
+.cds--tag.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-gray, #d1d1d1);
+}
+.cds--tag .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-gray, #d1d1d1);
+}
+.cds--tag.cds--tag--lg {
+  padding-inline-start: 0.75rem;
+}
+.cds--tag:has(.cds--tag__custom-icon) {
+  padding-inline-start: 0.25rem;
+}
+.cds--tag.cds--tag--lg:not(.cds--tag--filter) {
+  padding-inline: 0.75rem;
+}
+.cds--tag.cds--tag--lg:has(.cds--tag__custom-icon) {
+  padding-inline-start: 0.5rem;
+}
+.cds--tag:not(:first-child) {
+  margin-inline-start: 0;
+}
+
+.cds--tag__label {
+  overflow: hidden;
+  max-inline-size: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cds--tag--interactive:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+  outline: none;
+}
+
+.cds--tag--interactive:hover {
+  cursor: pointer;
+}
+
+.cds--tag--filter {
+  cursor: pointer;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+}
+.cds--tag--filter:hover {
+  outline: none;
+}
+
+.cds--interactive--tag-children {
+  display: inline-flex;
+  place-items: center;
+}
+
+.cds--tag--selectable {
+  border: 1px solid var(--cds-border-inverse, #161616);
+  background-color: var(--cds-layer);
+  color: var(--cds-text-primary, #161616);
+  cursor: pointer;
+}
+.cds--tag--selectable:hover {
+  background-color: var(--cds-layer-hover);
+  outline: none;
+}
+.cds--tag--selectable:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: 1px;
+}
+
+.cds--tag--selectable-selected {
+  background-color: var(--cds-layer-selected-inverse, #161616);
+  color: var(--cds-text-inverse, #ffffff);
+}
+.cds--tag--selectable-selected:hover {
+  background-color: var(--cds-layer-selected-inverse, #161616);
+}
+
+.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-gray, #a8a8a8);
+  background-color: var(--cds-tag-background-gray, #e0e0e0);
+  color: var(--cds-tag-color-gray, #161616);
+  cursor: pointer;
+}
+.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-gray, #d1d1d1);
+  outline: none;
+}
+.cds--tag--operational:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: 1px;
+}
+
+.cds--tag--red {
+  background-color: var(--cds-tag-background-red, #ffd7d9);
+  color: var(--cds-tag-color-red, #750e13);
+}
+.cds--tag--red.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-red, #ff8389);
+}
+.cds--tag--red.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-red, #ffc2c5);
+}
+.cds--tag--red .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-red, #ffc2c5);
+}
+
+.cds--tag--magenta {
+  background-color: var(--cds-tag-background-magenta, #ffd6e8);
+  color: var(--cds-tag-color-magenta, #740937);
+}
+.cds--tag--magenta.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-magenta, #ff7eb6);
+}
+.cds--tag--magenta.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-magenta, #ffbdda);
+}
+.cds--tag--magenta .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-magenta, #ffbdda);
+}
+
+.cds--tag--purple {
+  background-color: var(--cds-tag-background-purple, #e8daff);
+  color: var(--cds-tag-color-purple, #491d8b);
+}
+.cds--tag--purple.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-purple, #be95ff);
+}
+.cds--tag--purple.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-purple, #dcc7ff);
+}
+.cds--tag--purple .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-purple, #dcc7ff);
+}
+
+.cds--tag--blue {
+  background-color: var(--cds-tag-background-blue, #d0e2ff);
+  color: var(--cds-tag-color-blue, #002d9c);
+}
+.cds--tag--blue.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-blue, #78a9ff);
+}
+.cds--tag--blue.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-blue, #b8d3ff);
+}
+.cds--tag--blue .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-blue, #b8d3ff);
+}
+
+.cds--tag--cyan {
+  background-color: var(--cds-tag-background-cyan, #bae6ff);
+  color: var(--cds-tag-color-cyan, #003a6d);
+}
+.cds--tag--cyan.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-cyan, #33b1ff);
+}
+.cds--tag--cyan.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-cyan, #99daff);
+}
+.cds--tag--cyan .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-cyan, #99daff);
+}
+
+.cds--tag--teal {
+  background-color: var(--cds-tag-background-teal, #9ef0f0);
+  color: var(--cds-tag-color-teal, #004144);
+}
+.cds--tag--teal.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-teal, #08bdba);
+}
+.cds--tag--teal.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-teal, #57e5e5);
+}
+.cds--tag--teal .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-teal, #57e5e5);
+}
+
+.cds--tag--green {
+  background-color: var(--cds-tag-background-green, #a7f0ba);
+  color: var(--cds-tag-color-green, #044317);
+}
+.cds--tag--green.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-green, #42be65);
+}
+.cds--tag--green.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-green, #74e792);
+}
+.cds--tag--green .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-green, #74e792);
+}
+
+.cds--tag--gray {
+  background-color: var(--cds-tag-background-gray, #e0e0e0);
+  color: var(--cds-tag-color-gray, #161616);
+}
+.cds--tag--gray.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-gray, #a8a8a8);
+}
+.cds--tag--gray.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-gray, #d1d1d1);
+}
+.cds--tag--gray .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-gray, #d1d1d1);
+}
+
+.cds--tag--cool-gray {
+  background-color: var(--cds-tag-background-cool-gray, #dde1e6);
+  color: var(--cds-tag-color-cool-gray, #121619);
+}
+.cds--tag--cool-gray.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-cool-gray, #a2a9b0);
+}
+.cds--tag--cool-gray.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
+}
+.cds--tag--cool-gray .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
+}
+
+.cds--tag--warm-gray {
+  background-color: var(--cds-tag-background-warm-gray, #e5e0df);
+  color: var(--cds-tag-color-warm-gray, #171414);
+}
+.cds--tag--warm-gray.cds--tag--operational {
+  border: 1px solid var(--cds-tag-border-warm-gray, #ada8a8);
+}
+.cds--tag--warm-gray.cds--tag--operational:hover {
+  background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
+}
+.cds--tag--warm-gray .cds--tag__close-icon:hover {
+  background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
+}
+
+.cds--tag--high-contrast:not(.cds--tag--operational) {
+  background-color: var(--cds-background-inverse, #393939);
+  color: var(--cds-text-inverse, #ffffff);
+}
+.cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational {
+  border: 1px solid var(--cds-background-inverse, #393939);
+}
+.cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover {
+  background-color: var(--cds-background-inverse-hover, #474747);
+}
+.cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
+  background-color: var(--cds-background-inverse-hover, #474747);
+}
+
+.cds--tag--outline:not(.cds--tag--operational) {
+  background-color: var(--cds-background, #ffffff);
+  color: var(--cds-text-primary, #161616);
+  outline: 1px solid var(--cds-background-inverse, #393939);
+  outline-offset: -1px;
+}
+.cds--tag--outline:not(.cds--tag--operational).cds--tag--operational {
+  border: 1px solid var(--cds-background, #ffffff);
+}
+.cds--tag--outline:not(.cds--tag--operational).cds--tag--operational:hover {
+  background-color: var(--cds-layer-hover);
+}
+.cds--tag--outline:not(.cds--tag--operational) .cds--tag__close-icon:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.cds--tag--disabled:not(.cds--tag--operational),
+.cds--tag--filter.cds--tag--disabled,
+.cds--tag--interactive.cds--tag--disabled {
+  background-color: var(--cds-layer);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  box-shadow: none;
+  outline: none;
+}
+.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational,
+.cds--tag--filter.cds--tag--disabled.cds--tag--operational,
+.cds--tag--interactive.cds--tag--disabled.cds--tag--operational {
+  border: 1px solid var(--cds-layer);
+}
+.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,
+.cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,
+.cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover {
+  background-color: var(--cds-layer);
+}
+.cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,
+.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,
+.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
+  background-color: var(--cds-layer);
+}
+.cds--tag--disabled:not(.cds--tag--operational):hover,
+.cds--tag--filter.cds--tag--disabled:hover,
+.cds--tag--interactive.cds--tag--disabled:hover {
+  cursor: not-allowed;
+}
+
+.cds--tag--selectable.cds--tag--disabled,
+.cds--tag--operational.cds--tag--disabled {
+  border: 1px solid var(--cds-border-disabled, #c6c6c6);
+  background-color: var(--cds-layer);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+.cds--tag--selectable.cds--tag--disabled:hover,
+.cds--tag--operational.cds--tag--disabled:hover {
+  background-color: var(--cds-layer);
+  cursor: not-allowed;
+}
+
+.cds--tag--interactive {
+  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+
+.cds--tag__close-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  margin: 0 0 0 0.125rem;
+  background-color: transparent;
+  block-size: var(--cds-layout-size-height-local);
+  color: currentColor;
+  cursor: pointer;
+  inline-size: var(--cds-layout-size-height-local);
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+.cds--tag__close-icon svg {
+  fill: currentColor;
+}
+
+.cds--tag__custom-icon {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  block-size: 1rem;
+  color: currentColor;
+  inline-size: 1rem;
+  margin-inline-end: 0.25rem;
+  outline: none;
+}
+.cds--tag__custom-icon svg {
+  fill: currentColor;
+}
+
+.cds--tag--disabled .cds--tag__close-icon {
+  cursor: not-allowed;
+}
+
+.cds--tag__close-icon:focus {
+  z-index: 99999;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+  outline: none;
+}
+
+.cds--tag--high-contrast .cds--tag__close-icon:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff);
+}
+
+.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover {
+  background-color: transparent;
+}
+
+.cds--tag--filter.cds--tag--disabled svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--tag--sm.cds--tag--filter {
+  padding-inline-end: 0;
+}
+
+.cds--tag--sm .cds--tag__close-icon {
+  margin-inline-start: 0.3125rem;
+}
+
+.cds--tag.cds--skeleton {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: var(--cds-skeleton-background, #e8e8e8);
+  box-shadow: none;
+  pointer-events: none;
+  background-color: var(--cds-skeleton-background, #e8e8e8);
+  color: var(--cds-text-primary, #161616);
+  overflow: hidden;
+  inline-size: 3.75rem;
+}
+.cds--tag.cds--skeleton:hover, .cds--tag.cds--skeleton:focus, .cds--tag.cds--skeleton:active {
+  border: none;
+  cursor: default;
+  outline: none;
+}
+.cds--tag.cds--skeleton::before {
+  position: absolute;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cds--tag.cds--skeleton::before {
+    animation: none;
+  }
+}
+.cds--tag.cds--skeleton.cds--tag--operational {
+  border: 1px solid var(--cds-skeleton-background, #e8e8e8);
+}
+.cds--tag.cds--skeleton.cds--tag--operational:hover {
+  background-color: var(--cds-skeleton-background, #e8e8e8);
+}
+.cds--tag.cds--skeleton .cds--tag__close-icon:hover {
+  background-color: var(--cds-skeleton-background, #e8e8e8);
+}
+@media not all and (min-resolution >= 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .cds--tag.cds--skeleton {
+      transform: translateZ(0);
+    }
+  }
+}
+
+.cds--tag .cds--slug .cds--slug__button--inline {
+  color: currentColor;
+  margin-inline-start: 0.0625rem;
+}
+
+.cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before {
+  background-color: currentColor;
+}
+
+.cds--tag .cds--slug .cds--slug__button--inline:hover {
+  border-color: currentColor;
+}
+
+/* stylelint-disable */
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--tag {
+    outline: 1px solid transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--tag__close-icon svg,
+  .cds--tag__custom-icon svg {
+    fill: ButtonText;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--tag__close-icon:focus {
+    color: Highlight;
+    outline: 1px solid Highlight;
+  }
+}
+
+/* stylelint-enable */
+.c4p--condition-builder__content-container * {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+}
+
+.c4p--condition-builder__condition-builder-item__content {
+  overflow: auto;
+  min-width: 12rem;
+  max-width: 20rem;
+  max-height: 22rem;
+}
+
+.c4p--condition-builder__condition-builder-item__title {
+  font-size: var(--cds-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-01-font-weight, 600);
+  line-height: var(--cds-heading-01-line-height, 1.42857);
+  letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
+  padding: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-item-option__search {
+  padding-block-end: 1rem;
+  padding-inline: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option {
+  height: 2rem;
+  cursor: pointer;
+  padding-inline: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.c4p--condition-builder__condition-builder-item-option__option-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option-label {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  column-gap: 0.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c4p--condition-builder__condition-builder-item-option > ul[aria-multiSelectable=true] .c4p--condition-builder__condition-builder-item-option__option-label {
+  justify-content: center;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:not(:first-of-type) .c4p--condition-builder__condition-builder-item-option__option-content {
+  border-block-start: 0.0625rem solid var(--cds-border-subtle);
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:hover .c4p--condition-builder__condition-builder-item-option__option-content,
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] .c4p--condition-builder__condition-builder-item-option__option-content,
+.c4p--condition-builder__condition-builder-item-option__option:hover + .c4p--condition-builder__condition-builder-item-option__option .c4p--condition-builder__condition-builder-item-option__option-content,
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] + .c4p--condition-builder__condition-builder-item-option__option .c4p--condition-builder__condition-builder-item-option__option-content {
+  border-block-start-color: transparent;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] {
+  background-color: var(--cds-layer-selected);
+}
+
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true]:hover {
+  background-color: var(--cds-layer-selected-hover);
+}
+
+.c4p--condition-builder__condition-builder-item-date,
+.c4p--condition-builder__condition-builder-item-text,
+.c4p--condition-builder__condition-builder-item-number,
+c4p--condition-builder__condition-builder-item-time {
+  padding-block-end: 1rem;
+  padding-inline: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-checkmark {
+  margin-left: auto;
+}
+
+.c4p--condition-builder__condition-builder-button {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  inline-size: 100%;
+  display: inline-flex;
+  height: 2rem;
+  align-items: center;
+  background-color: var(--cds-layer);
+  color: inherit;
+  column-gap: 0.25rem;
+  cursor: pointer;
+  padding-inline: 0.5rem;
+  white-space: nowrap;
+}
+.c4p--condition-builder__condition-builder-button *,
+.c4p--condition-builder__condition-builder-button *::before,
+.c4p--condition-builder__condition-builder-button *::after {
+  box-sizing: inherit;
+}
+.c4p--condition-builder__condition-builder-button::-moz-focus-inner {
+  border: 0;
+}
+
+.c4p--condition-builder__condition-builder-button:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.c4p--condition-builder__condition-builder__group.hoveredConnector .c4p--condition-builder__condition-wrapper > .conditionBlockWrapper .c4p--condition-builder__connector-button {
+  background-color: var(--cds-layer-hover);
+}
+
+.c4p--condition-builder__condition-builder-button:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  content: "";
+  inset: 0;
+}
+@media screen and (prefers-contrast) {
+  .c4p--condition-builder__condition-builder-button:focus {
+    outline-style: dotted;
+  }
+}
+
+.c4p--condition-builder__statement-button,
+.c4p--condition-builder__connector-button {
+  min-width: 4rem;
+  padding-inline: 0.5rem;
+}
+
+.c4p--condition-builder__property-field {
+  font-size: var(--cds-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-01-font-weight, 600);
+  line-height: var(--cds-heading-01-line-height, 1.42857);
+  letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
+  padding-left: 0.5rem;
+}
+
+.c4p--condition-builder__close-condition {
+  padding-right: 0.5rem;
+}
+
+.c4p--condition-builder__add-button {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c4p--condition-builder__conditionWrapper {
+  display: flex;
+}
+
+.c4p--condition-builder__multiselectSelectionStatusContainer {
+  display: flex;
+  align-items: center;
+  padding-inline: 1rem;
+}
+.c4p--condition-builder__multiselectSelectionStatusContainer .c4p--condition-builder__selectAll-button {
+  margin-left: auto;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .c4p--condition-builder__condition-builder-item-option__option:focus {
+    outline-style: dotted;
+  }
+}
+
+.c4p--condition-builder__groupOperatorConnector {
+  margin-bottom: 0.25rem;
+}
+
+.c4p--condition-builder__option-check-box {
+  display: flex;
+  margin-right: 0.5rem;
+}
+
+.c4p--condition-builder__option-icon {
+  align-self: center;
+  margin-left: auto;
+}
+
+.c4p--condition-builder__condition-block,
+.c4p--condition-builder__condition-block .c4p--condition-builder__block {
+  position: relative;
+  display: inline-flex;
+}
+
+[role=row]:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-offset: 0;
+}
+@media screen and (prefers-contrast) {
+  [role=row]:focus {
+    outline-style: dotted;
+  }
+}
+
+.c4p--condition-builder__condition-builder-condition__deletion-preview .c4p--condition-builder__condition-builder-button:not(.c4p--condition-builder__statement-button,
+.c4p--condition-builder__connector-button) {
+  background-color: var(--cds-tag-background-red, #ffd7d9);
+  color: var(--cds-tag-color-red, #750e13);
+}
+
+.c4p--condition-builder__condition-builder-condition__deletion-preview .c4p--condition-builder__condition-builder-button:not(.c4p--condition-builder__statement-button,
+.c4p--condition-builder__connector-button):hover {
+  background-color: var(--cds-tag-hover-red, #ffc2c5);
+}
+
+.c4p--condition-builder__text-ellipsis {
+  display: block;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.c4p--condition-builder__condition-builder__group {
+  display: flex;
+}
+
+.c4p--condition-builder__condition-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.c4p--condition-builder__gap {
+  margin-right: 0.125rem;
+}
+
+.c4p--condition-builder__gap-bottom {
+  margin-bottom: 0.125rem;
+}
+
+.c4p--condition-builder__gap-left {
+  margin-left: 0.125rem;
+}
+
+.c4p--condition-builder__condition-block {
+  display: flex;
+  flex-direction: row;
+}
+
 /*# sourceMappingURL=index-without-carbon.css.map */