:host { display: block; --icon-width: var(--site-icon-width); --icon-height: var(--site-icon-height); }
svg { height: var(--icon-height); width: var(--icon-width); }
:host(.size-xlarge), :host(.size-xlarge) svg { width: var(--icon-width, 40px); height: var(--icon-height, 40px); }
:host(.size-large), :host(.size-large) svg { width: var(--icon-width, 24px); height: var(--icon-height, 24px); }
:host(.size-medium), :host(.size-medium) svg { width: var(--icon-width, 20px); height: var(--icon-height, 20px); }
:host(.size-tiny), :host(.size-tiny) svg { width: var(--icon-width, 16px); height: var(--icon-height, 16px); }
:host(.mirror-horizontal) svg { transform: scaleX(-1); }
:host(.mirror-vertical) svg { transform: scaleY(-1); }
:host(.mirror-both) svg { transform: scale(-1); }
:host(.active) svg { fill: var(--primary); }
:host(.default) svg { fill: var(--on-surface-hi); }