@adobe/spectrum-css/dist/spectrum-core.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Icon,
.spectrum-UIIcon {
  display: inline-block;
  color: inherit;
  fill: currentColor;
  pointer-events: none;
}
.spectrum-Icon:not(:root), .spectrum-UIIcon:not(:root) {
    overflow: hidden;
  }
.spectrum-Icon {
  --spectrum-icon-size-s: var(--spectrum-alias-workflow-icon-size-s);
  --spectrum-icon-size-m: var(--spectrum-alias-workflow-icon-size-m);
  --spectrum-icon-size-l: var(--spectrum-alias-workflow-icon-size-l);
  --spectrum-icon-size-xl: var(--spectrum-alias-workflow-icon-size-xl);
  --spectrum-icon-size-xxl: var(--spectrum-global-dimension-size-400);
}
.spectrum-Icon--sizeS,
  .spectrum-Icon--sizeS img,
  .spectrum-Icon--sizeS svg {
    height: var(--spectrum-icon-size-s);
    width: var(--spectrum-icon-size-s);
  }
.spectrum-Icon--sizeM,
  .spectrum-Icon--sizeM img,
  .spectrum-Icon--sizeM svg {
    height: var(--spectrum-icon-size-m);
    width: var(--spectrum-icon-size-m);
  }
.spectrum-Icon--sizeL,
  .spectrum-Icon--sizeL img,
  .spectrum-Icon--sizeL svg {
    height: var(--spectrum-icon-size-l);
    width: var(--spectrum-icon-size-l);
  }
.spectrum-Icon--sizeXL,
  .spectrum-Icon--sizeXL img,
  .spectrum-Icon--sizeXL svg {
    height: var(--spectrum-icon-size-xl);
    width: var(--spectrum-icon-size-xl);
  }
.spectrum-Icon--sizeXXL,
  .spectrum-Icon--sizeXXL img,
  .spectrum-Icon--sizeXXL svg {
    height: var(--spectrum-icon-size-xxl);
    width: var(--spectrum-icon-size-xxl);
  }
.spectrum--medium .spectrum-UIIcon--large {
    display: none;
  }
.spectrum--medium .spectrum-UIIcon--medium {
    display: inline;
  }
.spectrum--large .spectrum-UIIcon--medium {
    display: none;
  }
.spectrum--large .spectrum-UIIcon--large {
    display: inline;
  }
.spectrum--large {
  --ui-icon-large-display: block;
  --ui-icon-medium-display: none;
}
.spectrum--medium {
  --ui-icon-medium-display: block;
  --ui-icon-large-display: none;
}
.spectrum-UIIcon--large {
  display: var(--ui-icon-large-display);
}
.spectrum-UIIcon--medium {
  display: var(--ui-icon-medium-display);
}
.spectrum-UIIcon-ChevronDown75,
.spectrum-UIIcon-ChevronDown100,
.spectrum-UIIcon-ChevronDown200,
.spectrum-UIIcon-ChevronDown300,
.spectrum-UIIcon-ChevronDown400,
.spectrum-UIIcon-ChevronDown500,
.spectrum-UIIcon-ArrowDown75,
.spectrum-UIIcon-ArrowDown100,
.spectrum-UIIcon-ArrowDown200,
.spectrum-UIIcon-ArrowDown300,
.spectrum-UIIcon-ArrowDown400,
.spectrum-UIIcon-ArrowDown500,
.spectrum-UIIcon-ArrowDown600 {
  transform: rotate(90deg);
}
.spectrum-UIIcon-ChevronLeft75,
.spectrum-UIIcon-ChevronLeft100,
.spectrum-UIIcon-ChevronLeft200,
.spectrum-UIIcon-ChevronLeft300,
.spectrum-UIIcon-ChevronLeft400,
.spectrum-UIIcon-ChevronLeft500,
.spectrum-UIIcon-ArrowLeft75,
.spectrum-UIIcon-ArrowLeft100,
.spectrum-UIIcon-ArrowLeft200,
.spectrum-UIIcon-ArrowLeft300,
.spectrum-UIIcon-ArrowLeft400,
.spectrum-UIIcon-ArrowLeft500,
.spectrum-UIIcon-ArrowLeft600 {
  transform: rotate(180deg);
}
.spectrum-UIIcon-ChevronUp75,
.spectrum-UIIcon-ChevronUp100,
.spectrum-UIIcon-ChevronUp200,
.spectrum-UIIcon-ChevronUp300,
.spectrum-UIIcon-ChevronUp400,
.spectrum-UIIcon-ChevronUp500,
.spectrum-UIIcon-ArrowUp75,
.spectrum-UIIcon-ArrowUp100,
.spectrum-UIIcon-ArrowUp200,
.spectrum-UIIcon-ArrowUp300,
.spectrum-UIIcon-ArrowUp400,
.spectrum-UIIcon-ArrowUp500,
.spectrum-UIIcon-ArrowUp600 {
  transform: rotate(270deg);
}
.spectrum-UIIcon-ChevronRight75,
.spectrum-UIIcon-ChevronDown75,
.spectrum-UIIcon-ChevronLeft75,
.spectrum-UIIcon-ChevronUp75 {
  width: var(--spectrum-alias-ui-icon-chevron-size-75);
  height: var(--spectrum-alias-ui-icon-chevron-size-75);
}
.spectrum-UIIcon-ChevronRight100,
.spectrum-UIIcon-ChevronDown100,
.spectrum-UIIcon-ChevronLeft100,
.spectrum-UIIcon-ChevronUp100 {
  width: var(--spectrum-alias-ui-icon-chevron-size-100);
  height: var(--spectrum-alias-ui-icon-chevron-size-100);
}
.spectrum-UIIcon-ChevronRight200,
.spectrum-UIIcon-ChevronDown200,
.spectrum-UIIcon-ChevronLeft200,
.spectrum-UIIcon-ChevronUp200 {
  width: var(--spectrum-alias-ui-icon-chevron-size-200);
  height: var(--spectrum-alias-ui-icon-chevron-size-200);
}
.spectrum-UIIcon-ChevronRight300,
.spectrum-UIIcon-ChevronDown300,
.spectrum-UIIcon-ChevronLeft300,
.spectrum-UIIcon-ChevronUp300 {
  width: var(--spectrum-alias-ui-icon-chevron-size-300);
  height: var(--spectrum-alias-ui-icon-chevron-size-300);
}
.spectrum-UIIcon-ChevronRight400,
.spectrum-UIIcon-ChevronDown400,
.spectrum-UIIcon-ChevronLeft400,
.spectrum-UIIcon-ChevronUp400 {
  width: var(--spectrum-alias-ui-icon-chevron-size-400);
  height: var(--spectrum-alias-ui-icon-chevron-size-400);
}
.spectrum-UIIcon-ChevronRight500,
.spectrum-UIIcon-ChevronDown500,
.spectrum-UIIcon-ChevronLeft500,
.spectrum-UIIcon-ChevronUp500 {
  width: var(--spectrum-alias-ui-icon-chevron-size-500);
  height: var(--spectrum-alias-ui-icon-chevron-size-500);
}
.spectrum-UIIcon-ArrowRight75,
.spectrum-UIIcon-ArrowDown75,
.spectrum-UIIcon-ArrowLeft75,
.spectrum-UIIcon-ArrowUp75 {
  width: var(--spectrum-alias-ui-icon-arrow-size-75);
  height: var(--spectrum-alias-ui-icon-arrow-size-75);
}
.spectrum-UIIcon-ArrowRight100,
.spectrum-UIIcon-ArrowDown100,
.spectrum-UIIcon-ArrowLeft100,
.spectrum-UIIcon-ArrowUp100 {
  width: var(--spectrum-alias-ui-icon-arrow-size-100);
  height: var(--spectrum-alias-ui-icon-arrow-size-100);
}
.spectrum-UIIcon-ArrowRight200,
.spectrum-UIIcon-ArrowDown200,
.spectrum-UIIcon-ArrowLeft200,
.spectrum-UIIcon-ArrowUp200 {
  width: var(--spectrum-alias-ui-icon-arrow-size-200);
  height: var(--spectrum-alias-ui-icon-arrow-size-200);
}
.spectrum-UIIcon-ArrowRight300,
.spectrum-UIIcon-ArrowDown300,
.spectrum-UIIcon-ArrowLeft300,
.spectrum-UIIcon-ArrowUp300 {
  width: var(--spectrum-alias-ui-icon-arrow-size-300);
  height: var(--spectrum-alias-ui-icon-arrow-size-300);
}
.spectrum-UIIcon-ArrowRight400,
.spectrum-UIIcon-ArrowDown400,
.spectrum-UIIcon-ArrowLeft400,
.spectrum-UIIcon-ArrowUp400 {
  width: var(--spectrum-alias-ui-icon-arrow-size-400);
  height: var(--spectrum-alias-ui-icon-arrow-size-400);
}
.spectrum-UIIcon-ArrowRight500,
.spectrum-UIIcon-ArrowDown500,
.spectrum-UIIcon-ArrowLeft500,
.spectrum-UIIcon-ArrowUp500 {
  width: var(--spectrum-alias-ui-icon-arrow-size-500);
  height: var(--spectrum-alias-ui-icon-arrow-size-500);
}
.spectrum-UIIcon-ArrowRight600,
.spectrum-UIIcon-ArrowDown600,
.spectrum-UIIcon-ArrowLeft600,
.spectrum-UIIcon-ArrowUp600 {
  width: var(--spectrum-alias-ui-icon-arrow-size-600);
  height: var(--spectrum-alias-ui-icon-arrow-size-600);
}
.spectrum-UIIcon-Checkmark50 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-50);
  height: var(--spectrum-alias-ui-icon-checkmark-size-50);
}
.spectrum-UIIcon-Checkmark75 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-75);
  height: var(--spectrum-alias-ui-icon-checkmark-size-75);
}
.spectrum-UIIcon-Checkmark100 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-100);
  height: var(--spectrum-alias-ui-icon-checkmark-size-100);
}
.spectrum-UIIcon-Checkmark200 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-200);
  height: var(--spectrum-alias-ui-icon-checkmark-size-200);
}
.spectrum-UIIcon-Checkmark300 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-300);
  height: var(--spectrum-alias-ui-icon-checkmark-size-300);
}
.spectrum-UIIcon-Checkmark400 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-400);
  height: var(--spectrum-alias-ui-icon-checkmark-size-400);
}
.spectrum-UIIcon-Checkmark500 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-500);
  height: var(--spectrum-alias-ui-icon-checkmark-size-500);
}
.spectrum-UIIcon-Checkmark600 {
  width: var(--spectrum-alias-ui-icon-checkmark-size-600);
  height: var(--spectrum-alias-ui-icon-checkmark-size-600);
}
.spectrum-UIIcon-Dash50 {
  width: var(--spectrum-alias-ui-icon-dash-size-50);
  height: var(--spectrum-alias-ui-icon-dash-size-50);
}
.spectrum-UIIcon-Dash75 {
  width: var(--spectrum-alias-ui-icon-dash-size-75);
  height: var(--spectrum-alias-ui-icon-dash-size-75);
}
.spectrum-UIIcon-Dash100 {
  width: var(--spectrum-alias-ui-icon-dash-size-100);
  height: var(--spectrum-alias-ui-icon-dash-size-100);
}
.spectrum-UIIcon-Dash200 {
  width: var(--spectrum-alias-ui-icon-dash-size-200);
  height: var(--spectrum-alias-ui-icon-dash-size-200);
}
.spectrum-UIIcon-Dash300 {
  width: var(--spectrum-alias-ui-icon-dash-size-300);
  height: var(--spectrum-alias-ui-icon-dash-size-300);
}
.spectrum-UIIcon-Dash400 {
  width: var(--spectrum-alias-ui-icon-dash-size-400);
  height: var(--spectrum-alias-ui-icon-dash-size-400);
}
.spectrum-UIIcon-Dash500 {
  width: var(--spectrum-alias-ui-icon-dash-size-500);
  height: var(--spectrum-alias-ui-icon-dash-size-500);
}
.spectrum-UIIcon-Dash600 {
  width: var(--spectrum-alias-ui-icon-dash-size-600);
  height: var(--spectrum-alias-ui-icon-dash-size-600);
}
.spectrum-UIIcon-Cross75 {
  width: var(--spectrum-alias-ui-icon-cross-size-75);
  height: var(--spectrum-alias-ui-icon-cross-size-75);
}
.spectrum-UIIcon-Cross100 {
  width: var(--spectrum-alias-ui-icon-cross-size-100);
  height: var(--spectrum-alias-ui-icon-cross-size-100);
}
.spectrum-UIIcon-Cross200 {
  width: var(--spectrum-alias-ui-icon-cross-size-200);
  height: var(--spectrum-alias-ui-icon-cross-size-200);
}
.spectrum-UIIcon-Cross300 {
  width: var(--spectrum-alias-ui-icon-cross-size-300);
  height: var(--spectrum-alias-ui-icon-cross-size-300);
}
.spectrum-UIIcon-Cross400 {
  width: var(--spectrum-alias-ui-icon-cross-size-400);
  height: var(--spectrum-alias-ui-icon-cross-size-400);
}
.spectrum-UIIcon-Cross500 {
  width: var(--spectrum-alias-ui-icon-cross-size-500);
  height: var(--spectrum-alias-ui-icon-cross-size-500);
}
.spectrum-UIIcon-Cross600 {
  width: var(--spectrum-alias-ui-icon-cross-size-600);
  height: var(--spectrum-alias-ui-icon-cross-size-600);
}
.spectrum-UIIcon-TripleGripper100 {
  width: var(--spectrum-alias-ui-icon-triplegripper-size-100-height);
  height: var(--spectrum-alias-ui-icon-triplegripper-size-100-width);
}
.spectrum-UIIcon-DoubleGripper100 {
  width: var(--spectrum-alias-ui-icon-doublegripper-size-100-height);
  height: var(--spectrum-alias-ui-icon-doublegripper-size-100-width);
}
.spectrum-UIIcon-SingleGripper100 {
  width: var(--spectrum-alias-ui-icon-singlegripper-size-100-height);
  height: var(--spectrum-alias-ui-icon-singlegripper-size-100-width);
}
.spectrum-UIIcon-CornerTriangle75 {
  width: var(--spectrum-alias-ui-icon-cornertriangle-size-75);
  height: var(--spectrum-alias-ui-icon-cornertriangle-size-75);
}
.spectrum-UIIcon-CornerTriangle100 {
  width: var(--spectrum-alias-ui-icon-cornertriangle-size-100);
  height: var(--spectrum-alias-ui-icon-cornertriangle-size-100);
}
.spectrum-UIIcon-CornerTriangle200 {
  width: var(--spectrum-alias-ui-icon-cornertriangle-size-200);
  height: var(--spectrum-alias-ui-icon-cornertriangle-size-200);
}
.spectrum-UIIcon-CornerTriangle300 {
  width: var(--spectrum-alias-ui-icon-cornertriangle-size-300);
  height: var(--spectrum-alias-ui-icon-cornertriangle-size-300);
}
.spectrum-UIIcon-Asterisk75 {
  width: var(--spectrum-alias-ui-icon-asterisk-size-75);
  height: var(--spectrum-alias-ui-icon-asterisk-size-300);
}
.spectrum-UIIcon-Asterisk100 {
  width: var(--spectrum-alias-ui-icon-asterisk-size-100);
  height: var(--spectrum-alias-ui-icon-asterisk-size-100);
}
.spectrum-UIIcon-Asterisk200 {
  width: var(--spectrum-alias-ui-icon-asterisk-size-200);
  height: var(--spectrum-alias-ui-icon-asterisk-size-200);
}
.spectrum-UIIcon-Asterisk300 {
  width: var(--spectrum-alias-ui-icon-asterisk-size-300);
  height: var(--spectrum-alias-ui-icon-asterisk-size-300);
}