component StyledIcon {
  props {
    size: string = "default"
    color: string = "primary"
    title: string = "Styled Icon"
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
    icon: string = "icon-[lucide--sparkles]"
    label: string = ""
    class: string = ""
  }

  view {
    <span {...attrs} class="wrn-styled-icon {class}" data-size="{size}" data-color="{color}" data-variant="{variant}" role="{label ? 'img' : 'presentation'}" aria-label="{label}" aria-hidden="{label ? 'false' : 'true'}" data-wrn-owner="StyledIcon" data-wrn-part="root" data-wrn-component="StyledIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="{icon}"></span></span>
  }

  style {
    .wrn-styled-icon { --icon-color:var(--wrn-color-primary-text); display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:var(--wrn-radius-sm); color:var(--icon-color); background:color-mix(in srgb, var(--icon-color) 12%, transparent); }
    .wrn-styled-icon > span { width:1.25rem; height:1.25rem; }
    .wrn-styled-icon[data-color="success"] { --icon-color:var(--wrn-color-success-text); }
    .wrn-styled-icon[data-color="warning"] { --icon-color:var(--wrn-color-warning-text); }
    .wrn-styled-icon[data-size="sm"] { width:2rem; height:2rem; }
    .wrn-styled-icon[data-size="lg"] { width:3rem; height:3rem; }
    .wrn-styled-icon[data-variant="outline"] { border:1px solid currentColor; background:transparent; }
    .wrn-styled-icon[data-variant="plain"] { background:transparent; }
  }
}