.icon, .mp-icon {
  color: var(--icon-color);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}
.mp-icon { width: var(--icon-size, 24px); height: var(--icon-size, 24px); }
:is(button, a):not(:disabled):not([aria-disabled="true"]):hover :is(.icon, .mp-icon),
.icon--hover { color: var(--icon-hover); }
:is(.is-active, [aria-current="page"], [aria-pressed="true"]):not(:where(.site-header *)) :is(.icon, .mp-icon),
.icon--active { color: var(--icon-active); }
:is(.is-active, [aria-current="page"], [aria-pressed="true"]):not(:where(.site-header *)):has(.icon, .mp-icon) {
  background-color: var(--icon-active-background);
}
:is(.button--primary, .button-primary) :is(.icon, .mp-icon) { color: var(--icon-active); }
.sidebar { --icon-color: #AFC7FF; --icon-hover: #D6E2FF; --icon-disabled: rgba(175,199,255,.45); }
.button:not(.button-secondary):not(.button--secondary):not(.button--outline) .icon {
  color: inherit;
}
.icon--semantic-success, .icon--semantic:is(.icon-portal-success,.icon-portal-approved,.icon-portal-verified) { color: var(--icon-success); }
.icon--semantic-warning, .icon--semantic.icon-portal-warning { color: var(--icon-warning); }
.icon--semantic-error, .icon--semantic:is(.icon-portal-error,.icon-portal-rejected,.icon-portal-access-denied) { color: var(--icon-error); }
.icon--semantic-info, .icon--semantic:is(.icon-portal-info,.icon-portal-lock) { color: var(--icon-info); }
.icon--monochrome { color: var(--icon-color); }
.icon--hover { color: var(--icon-hover); }
.icon--active { color: var(--icon-active); }
.icon-surface--accent {
  --icon-color: #FFFFFF;
  --icon-hover: #FFFFFF;
  --icon-disabled: rgba(255,255,255,.45);
  background-color: var(--icon-active-background);
}
:is(button, a):disabled :is(.icon, .mp-icon),
[aria-disabled="true"] :is(.icon, .mp-icon),
.icon--disabled { color: var(--icon-disabled); }
@media (forced-colors: active) {
  .icon, .mp-icon { color: CanvasText; }
  :is(button,a):hover :is(.icon,.mp-icon) { color: LinkText; }
  :disabled :is(.icon,.mp-icon), [aria-disabled="true"] :is(.icon,.mp-icon) { color: GrayText; }
}