<h3>Telerik CSS Variables</h3>

<TelerikChipList Data="@ChipListDataVariables">
    <ItemTemplate>
        <span class="@context.ColorClass">
            <TelerikSvgIcon Icon="@context.Icon" />
            @context.Text
        </span>
    </ItemTemplate>
</TelerikChipList>

<h3>Colors</h3>

<TelerikChipList Data="@ChipListDataColors">
    <ItemTemplate>
        <span class="c-@context.ColorClass">
            <TelerikSvgIcon Icon="@context.Icon" />
            @context.Text
        </span>
    </ItemTemplate>
</TelerikChipList>

<style>
    @foreach (ChipModel chip in ChipListDataVariables)
    {
        <text> .k-chip:has(.@chip.ColorClass) { background-color: var(--kendo-color-@chip.ColorClass); color: var(--kendo-color-on-@chip.ColorClass); } </text>
    }

    @foreach (ChipModel chip in ChipListDataColors)
    {
        <text> .k-chip:has(.c-@chip.ColorClass) { background-color: @chip.ColorClass; color: white; } </text>
    }
</style>

@code {
    private List<ChipModel> ChipListDataVariables { get; set; } = new List<ChipModel>() {
        new ChipModel()
        {
            Text = "Excel",
            Icon = SvgIcon.FileExcel,
            ColorClass = "base"
        },
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio,
            Removable = true,
            ColorClass = "primary"
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo,
            ColorClass = "info"
        },
        new ChipModel()
        {
            Text = "Image",
            Icon = SvgIcon.FileImage,
            ColorClass = "success"
        }
    };

    private List<ChipModel> ChipListDataColors { get; set; } = new List<ChipModel>() {
        new ChipModel()
        {
            Text = "Excel",
            Icon = SvgIcon.FileExcel,
            ColorClass = "gray"
        },
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio,
            Removable = true,
            ColorClass = "red"
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo,
            ColorClass = "blue"
        },
        new ChipModel()
        {
            Text = "Image",
            Icon = SvgIcon.FileImage,
            ColorClass = "green"
        }
    };

    public class ChipModel
    {
        public string Text { get; set; } = string.Empty;
        public ISvgIcon? Icon { get; set; }
        public bool Disabled { get; set; }
        public bool Removable { get; set; }
        public string ColorClass { get; set; } = string.Empty;
    }
}