.Icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  fill: currentColor;
}

.sizeBase {
  min-width: var(--x-icon-size-default);
  min-height: var(--x-icon-size-default);
  width: var(--x-icon-size-default);
  height: var(--x-icon-size-default);
}

.sizeSmall {
  min-width: var(--x-icon-size-small);
  min-height: var(--x-icon-size-small);
  width: var(--x-icon-size-small);
  height: var(--x-icon-size-small);
}

.sizeLarge {
  min-width: var(--x-icon-size-large);
  min-height: var(--x-icon-size-large);
  width: var(--x-icon-size-large);
  height: var(--x-icon-size-large);
}

.appearanceAccent {
  color: var(--x-default-color-accent);
}

.appearanceInteractive {
  color: var(--x-color-interactive-text);
}

.appearanceSubdued {
  color: var(
    --x-default-color-text-subdued,
    var(--x-default-color-text, inherit)
  );
}

.appearanceInfo {
  color: var(--x-color-info-accent);
}

.appearanceSuccess {
  color: var(--x-color-success-accent);
}

.appearanceCritical {
  color: var(--x-color-critical-accent);
}

.appearanceWarning {
  color: var(--x-color-warning-accent);
}

.Svg {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}