:host { display: block; --icon-width: var(--site-icon-width); --icon-height: var(--site-icon-height); --rotate-by: 0deg; }
:host svg { display: flex; }
:host([size="jumbo"]), :host([size="jumbo"]) svg, :host([size="jumbo"]) img { width: var(--icon-width, 70px); height: var(--icon-height, 70px); }
:host([size="xlarge"]), :host([size="xlarge"]) svg, :host([size="xlarge"]) img { width: var(--icon-width, 40px); height: var(--icon-height, 40px); }
:host([size="mlarge"]), :host([size="mlarge"]) svg, :host([size="mlarge"]) img { width: var(--icon-width, 32px); height: var(--icon-height, 32px); }
:host([size="large"]), :host([size="large"]) svg, :host([size="large"]) img { width: var(--icon-width, 24px); height: var(--icon-height, 24px); }
:host([size="medium"]), :host([size="medium"]) svg, :host([size="medium"]) img { width: var(--icon-width, 20px); height: var(--icon-height, 20px); }
:host([size="tiny"]), :host([size="tiny"]) svg, :host([size="tiny"]) img { width: var(--icon-width, 16px); height: var(--icon-height, 16px); }
:host([rotate="-270"]) { --rotate-by: -270deg; }
:host([rotate="-180"]) { --rotate-by: -180deg; }
:host([rotate="-90"]) { --rotate-by: -90deg; }
:host([rotate="0"]) { --rotate-by: 0deg; }
:host([rotate="90"]) { --rotate-by: 90deg; }
:host([rotate="180"]) { --rotate-by: 180deg; }
:host([rotate="270"]) { --rotate-by: 270deg; }
:host(*) svg { fill: currentcolor; transform: rotate(var(--rotate-by)); }
:host(*) img { transform: rotate(var(--rotate-by)); }
:host([mirror="horizontal"]) svg, :host([mirror="horizontal"]) img { transform: rotate(var(--rotate-by)) scaleX(-1); }
:host([mirror="vertical"]) svg, :host([mirror="vertical"]) img { transform: rotate(var(--rotate-by)) scaleY(-1); }
:host([mirror="both"]) svg, :host([mirror="both"]) img { transform: rotate(var(--rotate-by)) scale(-1, -1); }
:host([color="primary"]) { color: var(--primary); }
:host([color="secondary"]) { color: var(--secondary); }
:host([color="tertiary"]) { color: var(--tertiary); }
:host([color="on-surface-color"]) { color: var(--fds-on-surface-color); }
:host([color="on-surface-low"]) { color: var(--fds-on-surface-low); }
:host([color="btn-accent"]) { color: var(--fds-btn-accent); }
:host([color="on-surface-hi"]) { color: var(--fds-on-surface-hi); }
:host([color="info"]) { color: var(--fds-info); }
:host([color="on-surface-m"]) { color: var(--fds-on-surface-m); }
:host([color="success"]) { color: var(--fds-success); }
:host([color="alert"]) { color: var(--fds-alert); }
:host([color="error"]) { color: var(--fds-error); }