@layer components.icon{:host{--icon-circle-bg:var(--gray-100);--icon-circle-bg-hover:var(--gray-200);--icon-circle-color:var(--color-primary);--icon-circle-padding:.4em;color:var(--color-icon,currentColor);font-size:var(--icon-size,1em);vertical-align:middle;transition:color var(--interactive-transition-duration)ease;line-height:1;display:inline-block}:host-context(html[data-theme="dark"]){--icon-circle-bg:var(--gray-750);--icon-circle-bg-hover:var(--gray-700)}:host-context(html[data-theme="rainbow"]){--icon-circle-bg:#f5e9fb;--icon-circle-bg-hover:#ebd4f7;--icon-circle-color:#a73cdd}@keyframes rainbow-icon{0%{color:#f04242}14%{color:#f48c25}28%{color:#f9e71f}42%{color:#22c322}57%{color:#306ee8}71%{color:#6226d9}85%{color:#c23cdd}to{color:#f04242}}@media (prefers-reduced-motion:reduce){:host{transition:none}}i,svg{color:inherit}svg{vertical-align:middle;display:inline-block}[data-state=error]{color:var(--color-error);font-size:var(--font-size-small)}:host([circle]){aspect-ratio:1;padding:var(--icon-circle-padding);background-color:var(--icon-circle-bg);color:var(--icon-circle-color);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}@media (prefers-reduced-motion:no-preference){:host([circle]){transition:background-color .2s}}:host([circle]:hover),:host([circle]:focus-visible){background-color:var(--icon-circle-bg-hover)}:host([circle]:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}:host-context(html[data-theme="rainbow"])[circle]:focus-visible{outline-color:#a73cdd}:host([error]){color:var(--color-error)}:host([action]){cursor:pointer}@media (prefers-reduced-motion:no-preference){:host([action]){transition:opacity .2s,transform .2s}}:host([action]:hover),:host([action]:focus-visible){opacity:.7;transform:scale(1.1)}:host([action]:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}:host-context(html[data-theme="rainbow"])[action]:focus-visible{outline-color:#a73cdd}@media (prefers-reduced-motion:no-preference){:host-context(html[data-theme="rainbow"])[action]:hover{animation:4s linear infinite rainbow-icon}}:host([invisible]){visibility:hidden}}