@workday/canvas-kit-css/icon.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-svg {
  box-sizing: border-box;
  display: inline-block;
}

.cnvs-svg >svg {
  display: block;
  width: var(--cnvs-svg-width, var(--cnvs-svg-size));
  height: var(--cnvs-svg-height, var(--cnvs-svg-size));
}


.cnvs-svg.should-mirror {
  transform: scaleX(-1);
}


.cnvs-accent-icon {
  box-sizing: border-box;
  --cnvs-svg-size: 3.5rem;
}

.cnvs-accent-icon .color-500 {
  fill: var(--cnvs-accent-icon-color, var(--cnvs-base-palette-blueberry-500));
}

.cnvs-accent-icon .french-vanilla-100 {
  fill: var(--cnvs-base-palette-french-vanilla-100);
}


.cnvs-accent-icon.transparent .french-vanilla-100 {
  fill: transparent;
}


.cnvs-applet-icon {
  box-sizing: border-box;
  --cnvs-svg-size: 5.75rem;
}

.cnvs-applet-icon .color-100 {
  fill: var(--cnvs-base-palette-french-vanilla-100);
}

.cnvs-applet-icon .color-200 {
  fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blueberry-200));
}

.cnvs-applet-icon .color-300 {
  fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blueberry-300));
}

.cnvs-applet-icon .color-400 {
  fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));
}

.cnvs-applet-icon .color-400-alpha-20 {
  fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));
}

.cnvs-applet-icon .color-500 {
  fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blueberry-400));
}


.cnvs-system-icon {
  box-sizing: border-box;
}

.cnvs-system-icon svg {
  width: var(--cnvs-svg-width, var(--cnvs-svg-size, var(--cnvs-sys-space-x6)));
  height: var(--cnvs-svg-height, var(--cnvs-svg-size, var(--cnvs-sys-space-x6)));
}

.cnvs-system-icon .wd-icon-fill {
  fill: var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200));
}

.cnvs-system-icon .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
  fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));
}

.cnvs-system-icon .wd-icon-background {
  fill: var(--cnvs-system-icon-background-color, transparent);
}

.cnvs-system-icon:where(:hover, .hover) .wd-icon-fill {
  fill: var(--cnvs-deprecated-system-icon-fill-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));
}

.cnvs-system-icon:where(:hover, .hover) .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
  fill: var(--cnvs-deprecated-system-icon-accent-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));
}

.cnvs-system-icon:where(:hover, .hover) .wd-icon-background {
  fill: var(--cnvs-deprecated-system-icon-background-hover, var(--cnvs-system-icon-background-color, transparent));
}

@media (prefers-contrast: more) {
.cnvs-system-icon .wd-icon-fill, .cnvs-system-icon .wd-icon-accent {
  color: currentColor;
  fill: currentColor;
}


}


.cnvs-system-icon-circle {
  box-sizing: border-box;
  background: var(--cnvs-system-icon-circle-background-color, var(--cnvs-base-palette-soap-200));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cnvs-sys-space-zero);
  border: none;
  border-radius: var(--cnvs-sys-shape-round);
  overflow: hidden;
  width: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
  height: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
  --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10)) * 0.625);
  --cnvs-system-icon-color: var(--cnvs-system-icon-circle-icon-color);
}

.cnvs-system-icon-circle img {
  width: 100%;
  height: 100%;
}


.cnvs-graphic {
  box-sizing: border-box;
}


.cnvs-graphic.grow {
  width: 100%;
  --cnvs-svg-width: 100%;
}


.cnvs-graphic-image {
  box-sizing: border-box;
  width: var(--cnvs-graphic-image-width);
  height: var(--cnvs-graphic-image-height);
  display: inline-block;
}

.cnvs-graphic-image [data-part="graphic-img"] {
  width: var(--cnvs-graphic-image-width);
  height: var(--cnvs-graphic-image-height);
  max-width: 100%;
  max-height: 100%;
}


.cnvs-graphic-image.grow {
  width: 100%;
}

.cnvs-graphic-image.grow [data-part="graphic-img"] {
  width: 100%;
}