@layer components.icon{:host{color:var(--color-icon,currentColor);vertical-align:middle;transition:color var(--interactive-transition-duration)ease;font-size:1em;line-height:1;display:inline-block}@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,red);font-size:var(--font-size-sm,.875rem)}:host([circle]){aspect-ratio:1;padding:var(--icon-circle-padding,.4em);background-color:var(--icon-circle-bg,#f3f4f6);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,#e5e7eb)}: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-focus,currentColor);outline-offset:2px}:host([invisible]){visibility:hidden}}