@layer components.icon{:host{display:inline-block;color:var(--color-icon, currentColor);font-size:1em;line-height:1;vertical-align:middle}i,svg{color:inherit}svg{display:inline-block;vertical-align:middle}[data-state=error]{color:var(--color-error, red);font-size:var(--font-size-sm, 0.875rem)}[data-circle]{display:inline-flex;align-items:center;justify-content:center;width:2.5em;height:2.5em;border-radius:50%;box-shadow:var(--icon-circle-shadow, none);border:var(--icon-circle-border, 1px solid currentColor);background-color:var(--icon-circle-bg, transparent)}@media(prefers-reduced-motion: no-preference){[data-circle]{transition:box-shadow .2s,background-color .2s,border .2s}}[data-circle]:hover{background-color:var(--icon-circle-bg-hover, color-mix(in srgb, currentColor 5%, transparent));box-shadow:var(--icon-circle-shadow-hover, none);border:var(--icon-circle-border-hover, 1px solid currentColor)}[data-circle=primary]{box-shadow:var(--icon-circle-shadow-primary, none);border:var(--icon-circle-border-primary, 1px solid var(--color-primary, currentColor));background-color:var(--icon-circle-bg-primary, var(--icon-circle-bg, transparent));color:var(--color-primary, currentColor)}[data-circle=primary]:hover{box-shadow:var(--icon-circle-shadow-primary-hover, none);border:var(--icon-circle-border-primary-hover, 1px solid var(--color-primary, currentColor));background-color:var(--icon-circle-bg-primary-hover, var(--icon-circle-bg-hover, color-mix(in srgb, var(--color-primary, currentColor) 5%, transparent)))}[data-circle=secondary]{box-shadow:var(--icon-circle-shadow-secondary, none);border:var(--icon-circle-border-secondary, 1px solid var(--color-secondary, currentColor));background-color:var(--icon-circle-bg-secondary, var(--icon-circle-bg, transparent));color:var(--color-secondary, currentColor)}[data-circle=secondary]:hover{box-shadow:var(--icon-circle-shadow-secondary-hover, none);border:var(--icon-circle-border-secondary-hover, 1px solid var(--color-secondary, currentColor));background-color:var(--icon-circle-bg-secondary-hover, var(--icon-circle-bg-hover, color-mix(in srgb, var(--color-secondary, currentColor) 5%, transparent)))}}/*# sourceMappingURL=faIcon.css.map */