@workday/canvas-kit-css/segmented-control.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-segmented-control-button {
  box-sizing: border-box;
  border-inline-start: none;
  min-width: auto;
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
  --cnvs-button-border: var(--cnvs-sys-color-border-container);
  --cnvs-button-border-radius: var(--cnvs-sys-shape-zero);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
}

.cnvs-segmented-control-button:hover, .cnvs-segmented-control-button.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
}

.cnvs-segmented-control-button:active, .cnvs-segmented-control-button.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
}

.cnvs-segmented-control-button:disabled, .cnvs-segmented-control-button.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
  --cnvs-button-border: var(--cnvs-sys-color-border-container);
  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
}

.cnvs-segmented-control-button:first-of-type {
  border-radius: var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);
  border-inline-start: 0.0625rem solid var(--cnvs-sys-color-border-container);
}

.cnvs-segmented-control-button:last-of-type {
  border-radius: 0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;
}

.cnvs-segmented-control-button[aria-pressed="true"] {
  --cnvs-button-background: var(--cnvs-brand-primary-base);
  --cnvs-button-border: var(--cnvs-brand-primary-base);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
}

.cnvs-segmented-control-button[aria-pressed="true"]:first-of-type {
  border-inline-start-color: var(--cnvs-brand-primary-base);
}

.cnvs-segmented-control-button[aria-pressed="true"]:disabled, .cnvs-segmented-control-button[aria-pressed="true"].disabled {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
  --cnvs-button-border: var(--cnvs-sys-color-border-container);
  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
}

.cnvs-segmented-control-button:focus-visible, .cnvs-segmented-control-button.focus {
  border-radius: var(--cnvs-sys-shape-x1);
  z-index: 1;
  animation: none;
  transition: all 120ms border-radius 1ms;
}


.cnvs-segmented-control-button.segmented-control-button-size-small {
  width: var(--cnvs-sys-space-x8);
  height: var(--cnvs-sys-space-x8);
}


.cnvs-segmented-control-button.segmented-control-button-size-medium {
  width: var(--cnvs-sys-space-x10);
  height: var(--cnvs-sys-space-x10);
}


.cnvs-segmented-control-button.segmented-control-button-size-large {
  width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
  height: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
}