@carbon/styles 1.82.0-rc.0 → 1.82.0

package/css/styles.css

@@ -2548,6 +2548,7 @@ em {
 :root {
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2565,6 +2566,7 @@ em {
 .cds--layer-one {
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2582,6 +2584,7 @@ em {
 .cds--layer-two {
   --cds-layer: var(--cds-layer-02, #ffffff);
   --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-02, #f4f4f4);
   --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
@@ -2599,6 +2602,7 @@ em {
 .cds--layer-three {
   --cds-layer: var(--cds-layer-03, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-03, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
@@ -2613,6 +2617,18 @@ em {
   --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
 }
 
+.cds--layer-one.cds--layer__with-background {
+  background-color: var(--cds-layer-background);
+}
+
+.cds--layer-two.cds--layer__with-background {
+  background-color: var(--cds-layer-background);
+}
+
+.cds--layer-three.cds--layer__with-background {
+  background-color: var(--cds-layer-background);
+}
+
 .cds--layout--size-xs {
   --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
   --cds-layout-size-height: var(--cds-layout-size-height-context);
@@ -2862,6 +2878,9 @@ em {
   --cds-layer-active-01: #c6c6c6;
   --cds-layer-active-02: #c6c6c6;
   --cds-layer-active-03: #c6c6c6;
+  --cds-layer-background-01: #ffffff;
+  --cds-layer-background-02: #f4f4f4;
+  --cds-layer-background-03: #ffffff;
   --cds-layer-hover-01: #e8e8e8;
   --cds-layer-hover-02: #e8e8e8;
   --cds-layer-hover-03: #e8e8e8;
@@ -2908,6 +2927,7 @@ em {
   --cds-toggle-off: #8d8d8d;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2994,6 +3014,9 @@ em {
   --cds-status-blue: #0043ce;
   --cds-status-purple: #8a3ffc;
   --cds-status-gray: #6f6f6f;
+  --cds-content-switcher-background: #e0e0e0;
+  --cds-content-switcher-background-hover: #d1d1d1;
+  --cds-content-switcher-selected: #ffffff;
 }
 
 .cds--g10 {
@@ -3094,6 +3117,9 @@ em {
   --cds-layer-active-01: #c6c6c6;
   --cds-layer-active-02: #c6c6c6;
   --cds-layer-active-03: #c6c6c6;
+  --cds-layer-background-01: #f4f4f4;
+  --cds-layer-background-02: #ffffff;
+  --cds-layer-background-03: #f4f4f4;
   --cds-layer-hover-01: #e8e8e8;
   --cds-layer-hover-02: #e8e8e8;
   --cds-layer-hover-03: #e8e8e8;
@@ -3140,6 +3166,7 @@ em {
   --cds-toggle-off: #8d8d8d;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3226,6 +3253,9 @@ em {
   --cds-status-blue: #0043ce;
   --cds-status-purple: #8a3ffc;
   --cds-status-gray: #6f6f6f;
+  --cds-content-switcher-background: #e0e0e0;
+  --cds-content-switcher-background-hover: #d1d1d1;
+  --cds-content-switcher-selected: #ffffff;
 }
 
 .cds--g90 {
@@ -3326,6 +3356,9 @@ em {
   --cds-layer-active-01: #6f6f6f;
   --cds-layer-active-02: #8d8d8d;
   --cds-layer-active-03: #393939;
+  --cds-layer-background-01: #262626;
+  --cds-layer-background-02: #393939;
+  --cds-layer-background-03: #525252;
   --cds-layer-hover-01: #474747;
   --cds-layer-hover-02: #636363;
   --cds-layer-hover-03: #5e5e5e;
@@ -3372,6 +3405,7 @@ em {
   --cds-toggle-off: #8d8d8d;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3457,6 +3491,9 @@ em {
   --cds-status-blue: #4589ff;
   --cds-status-purple: #a56eff;
   --cds-status-gray: #8d8d8d;
+  --cds-content-switcher-background: rgba(0, 0, 0, 0);
+  --cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
+  --cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
 }
 
 .cds--g100 {
@@ -3557,6 +3594,9 @@ em {
   --cds-layer-active-01: #525252;
   --cds-layer-active-02: #6f6f6f;
   --cds-layer-active-03: #8d8d8d;
+  --cds-layer-background-01: #161616;
+  --cds-layer-background-02: #262626;
+  --cds-layer-background-03: #393939;
   --cds-layer-hover-01: #333333;
   --cds-layer-hover-02: #474747;
   --cds-layer-hover-03: #636363;
@@ -3603,6 +3643,7 @@ em {
   --cds-toggle-off: #6f6f6f;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3688,6 +3729,9 @@ em {
   --cds-status-blue: #4589ff;
   --cds-status-purple: #a56eff;
   --cds-status-gray: #8d8d8d;
+  --cds-content-switcher-background: rgba(0, 0, 0, 0);
+  --cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
+  --cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
 }
 
 .cds--accordion {
@@ -11212,8 +11256,15 @@ fieldset[disabled] .cds--form__helper-text {
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   display: flex;
   justify-content: space-evenly;
+  border-radius: 0.25rem;
   block-size: var(--cds-layout-size-height-local);
   inline-size: 100%;
+  outline: 0.0625rem solid var(--cds-border-inverse, #161616);
+  outline-offset: -0.0625rem;
+}
+
+.cds--content-switcher:has(.cds--content-switcher-btn:disabled) {
+  outline-color: var(--cds-border-disabled, #c6c6c6);
 }
 
 .cds--content-switcher-btn {
@@ -11235,7 +11286,6 @@ fieldset[disabled] .cds--form__helper-text {
   color: var(--cds-text-secondary, #525252);
   text-align: start;
   text-decoration: none;
-  transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
   white-space: nowrap;
 }
 .cds--content-switcher-btn html {
@@ -11257,6 +11307,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--content-switcher-btn::after {
   position: absolute;
   display: block;
+  border-radius: 0.25rem;
   background-color: var(--cds-layer-selected-inverse, #161616);
   block-size: 100%;
   content: "";
@@ -11265,23 +11316,16 @@ fieldset[disabled] .cds--form__helper-text {
   inset-inline-start: 0;
   transform: scaleY(0);
   transform-origin: bottom;
-  transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-@media (prefers-reduced-motion: reduce) {
-  .cds--content-switcher-btn::after {
-    transition: none;
-  }
 }
 .cds--content-switcher-btn:disabled::after {
   display: none;
 }
 .cds--content-switcher-btn:focus {
-  z-index: 3;
-  border-color: var(--cds-focus, #0f62fe);
-  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
+  border: 0;
 }
 .cds--content-switcher-btn:focus::after {
-  clip-path: inset(3px 3px 3px 3px);
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
 }
 .cds--content-switcher-btn:hover {
   color: var(--cds-text-primary, #161616);
@@ -11300,8 +11344,25 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--content-switcher-btn:disabled:hover {
   cursor: not-allowed;
 }
-.cds--content-switcher-btn:disabled:first-child, .cds--content-switcher-btn:disabled:last-child {
-  border-color: var(--cds-border-disabled, #c6c6c6);
+
+.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
+  display: block;
+  border-radius: 0.25rem;
+  block-size: 100%;
+  box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
+  content: "";
+  inline-size: 100%;
+}
+.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
+  background-color: var(--cds-focus-inset, #ffffff);
+  transform: scaleY(1);
+}
+.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
+  border-radius: 0;
+  background-color: var(--cds-layer-hover);
+  border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
+  border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
+  box-shadow: none;
 }
 
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
@@ -11312,22 +11373,20 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
   border-end-start-radius: 0.25rem;
-  border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-start-start-radius: 0.25rem;
+  box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
 }
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
-  border-color: var(--cds-border-disabled, #c6c6c6);
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  box-shadow: none;
 }
 
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
   border-end-end-radius: 0.25rem;
-  border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-start-end-radius: 0.25rem;
+  box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
 }
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
-  border-color: var(--cds-border-disabled, #c6c6c6);
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  box-shadow: none;
 }
 
 .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
@@ -11335,6 +11394,11 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
   border: 0;
 }
+.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before,
+.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child:disabled::before,
+.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child:disabled::before {
+  display: none;
+}
 
 .cds--content-switcher-btn::before {
   position: absolute;
@@ -11348,7 +11412,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
-  display: none;
+  background-color: transparent;
 }
 
 .cds--content-switcher-btn:focus::before,
@@ -11372,7 +11436,6 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--content-switcher__icon {
   fill: var(--cds-icon-secondary, #525252);
-  transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .cds--content-switcher__icon + span {
@@ -11392,13 +11455,36 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-primary, #161616);
 }
 
+.cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
+.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
+.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
+.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
+  z-index: 0;
+  border-radius: 0;
+  block-size: 100%;
+  border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
+  border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
+  box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
+  content: "";
+  inline-size: 100%;
+}
+.cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
+.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
+  background-color: var(--cds-focus-inset, #ffffff);
+  transform: scaleY(1);
+}
+
 .cds--content-switcher-btn.cds--content-switcher--selected {
   z-index: 3;
-  background-color: var(--cds-layer-selected-inverse, #161616);
   color: var(--cds-text-inverse, #ffffff);
 }
+.cds--content-switcher-btn.cds--content-switcher--selected:hover {
+  background-color: transparent;
+}
 .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
-  background-color: var(--cds-layer-selected-disabled, #8d8d8d);
+  background-color: var(--cds-button-disabled, #c6c6c6);
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 .cds--content-switcher-btn.cds--content-switcher--selected::after {
@@ -11418,28 +11504,38 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--content-switcher--icon-only {
   justify-content: flex-start;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn {
+  align-items: center;
+  padding: 0;
+  transition: none;
+}
+.cds--content-switcher--icon-only .cds--content-switcher-btn:focus {
+  box-shadow: none;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:first-of-type::before {
+  background-color: transparent;
 }
 
 .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
   border-end-start-radius: 0.25rem;
-  border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-start-start-radius: 0.25rem;
-}
-
-.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
-.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
-  border-color: var(--cds-layer-selected-disabled, #8d8d8d);
+  box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
 }
 
 .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
   border-end-end-radius: 0.25rem;
-  border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-start-end-radius: 0.25rem;
+  box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
 }
 
-.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
-.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
-  border-color: var(--cds-background, #ffffff);
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn[disabled],
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn[disabled] {
+  box-shadow: none;
 }
 
 .cds--content-switcher--lg .cds--content-switcher-btn {
@@ -11452,6 +11548,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--content-switcher--icon-only .cds--content-switcher-btn svg {
+  z-index: 1;
   fill: var(--cds-icon-primary, #161616);
 }
 
@@ -11464,23 +11561,14 @@ fieldset[disabled] .cds--form__helper-text {
   block-size: 2rem;
 }
 
-.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
-  display: none;
-}
-
 .cds--content-switcher-btn:focus::before,
 .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
-.cds--content-switcher-btn:hover::before,
-.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
+.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):not(:focus)::before,
 .cds--content-switcher--selected::before,
 .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
   background-color: transparent;
 }
 
-.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
-  border-color: var(--cds-border-inverse, #161616);
-}
-
 .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
@@ -11494,6 +11582,190 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-border-subtle);
 }
 
+.cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
+.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
+.cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
+.cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
+  z-index: 0;
+  border-radius: 0;
+  block-size: 100%;
+  border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
+  border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
+  box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
+  content: "";
+  inline-size: 100%;
+}
+.cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
+  background-color: var(--cds-focus-inset, #ffffff);
+  transform: scaleY(1);
+}
+
+.cds--content-switcher--low-contrast {
+  background-color: var(--cds-content-switcher-background, #e0e0e0);
+  outline-color: var(--cds-border-strong);
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn {
+  border-color: var(--cds-border-strong);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover, .cds--content-switcher--low-contrast .cds--content-switcher-btn:active {
+  background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn::before {
+  background-color: var(--cds-border-strong);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn::after {
+  background-color: var(--cds-content-switcher-selected, #ffffff);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled {
+  border-color: var(--cds-border-disabled, #c6c6c6);
+  background-color: transparent;
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover {
+  cursor: not-allowed;
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
+  background: transparent;
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
+  background-color: var(--cds-content-switcher-background, #e0e0e0);
+  box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
+  border-color: var(--cds-border-strong);
+  background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
+  box-shadow: none;
+}
+
+.cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
+  box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
+}
+
+.cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
+  box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
+  border-color: var(--cds-border-strong);
+  box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
+  background-color: var(--cds-content-switcher-background, #e0e0e0);
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected {
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+  color: var(--cds-text-primary, #161616);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:hover {
+  background-color: transparent;
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected::after {
+  border-radius: 0.25rem;
+  background-color: var(--cds-content-switcher-selected, #ffffff);
+  box-shadow: inset 0 0 0 0.0625rem var(--cds-border-inverse, #161616);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:focus::after {
+  box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
+  border: 0.0625rem solid var(--cds-border-disabled, #c6c6c6);
+  border-radius: 0.25rem;
+  background-color: var(--cds-content-switcher-selected, #ffffff);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before {
+  background-color: transparent;
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
+.cds--content-switcher--low-contrast .cds--content-switcher--selected::before,
+.cds--content-switcher--low-contrast .cds--content-switcher--selected + .cds--content-switcher-btn::before {
+  background-color: transparent;
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
+  background-color: var(--cds-border-disabled, #c6c6c6);
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before {
+  background-color: transparent;
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:not([disabled]) {
+  box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn:not([disabled]) {
+  box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn svg {
+  fill: var(--cds-icon-secondary, #525252);
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn:hover svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected[disabled] svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
+  border-color: var(--cds-border-disabled, #c6c6c6);
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered):focus::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered)::before,
+.cds--content-switcher--low-contrast .cds--content-switcher--selected:not(.cds--content-switcher__selected-hovered)::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
+  background-color: transparent;
+}
+
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
+  border-color: var(--cds-border-strong);
+  box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
+}
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
+.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
+  background-color: var(--cds-content-switcher-background, #e0e0e0);
+}
+
 .cds--radio-button-group {
   box-sizing: border-box;
   padding: 0;