svg { flex-shrink: 0; }

svg path {
    stroke: var(--icon-Primary);
}

svg.stroke-color-none path { stroke: none; }


svg.size-20-24{
    width: clamp(20px, calc(28px - 0.5vw), 24px);
    height: clamp(20px, calc(28px - 0.5vw), 24px);
}

svg.stroke-color-Brand path { stroke: var(--icon-Brand); }
svg.fill-color-Brand path { fill: var(--icon-Brand); }

svg.stroke-color-Secondary path { stroke: var(--icon-Secondary); }
svg.fill-color-Secondary path { fill: var(--icon-Secondary); }

svg.stroke-color-Primary path { stroke: var(--icon-Primary); }
svg.fill-color-Primary path { fill: var(--icon-Primary); }

svg.stroke-color-Inverse path { stroke: var(--icon-Inverse); }

svg.stroke-color-Positive path { stroke: var(--icon-Positive); }

svg.stroke-color-Blue path { stroke: #5F99FB; }

svg.stroke-color-Warning path { stroke: var(--icon-Warning); }

svg.stroke-color-Negative path { stroke: var(--icon-Negative); }

svg.stroke-color-Selected path { stroke: var(--icon-Selected); }
svg.fill-color-Selected path { fill: var(--icon-Selected); }

svg.fill-color-White path { fill: white; }
svg.stroke-color-White path { stroke: white; }