@layer components.icon{:host{--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}@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,var(--gray-100));color:var(--icon-circle-color,var(--color-primary));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){background-color:var(--icon-circle-bg-hover,var(--gray-200))}:host([circle]:focus-visible){background-color:var(--icon-circle-bg-hover,var(--gray-200))}:host([circle]:focus-visible){outline:2px solid var(--icon-focus-outline-color,var(--color-primary));outline-offset:2px}:host([error]){color:var(--color-error)}:host([primary]){color:var(--color-primary)}:host([action]){cursor:pointer}:host([hover]){cursor:pointer}:host([submit]){cursor:pointer}:host([action]){aspect-ratio:1;justify-content:center;align-items:center;display:inline-flex}@media (prefers-reduced-motion:no-preference){:host([action]){transition:opacity .2s,transform .2s}:host([hover]){transition:opacity .2s,transform .2s}}:host([action]:hover){opacity:.7;transform:scale(1.1)}:host([action]:focus-visible){opacity:.7;transform:scale(1.1)}:host([hover]:hover){opacity:.7;transform:scale(1.1)}:host([action]:focus-visible){outline:2px solid var(--icon-focus-outline-color,var(--color-primary));outline-offset:2px;border-radius:50%}@media (prefers-reduced-motion:no-preference){:host([action]:hover){animation:var(--icon-rainbow-animation,none)}:host([hover]:hover){animation:var(--icon-rainbow-animation,none)}}:host([invisible]){visibility:hidden}}