{% load lb_tags %}
<c-vars
    class=""
    size="md"
    :sizeClasses="{
        'xs': 'kbd-xs',
        'sm': 'kbd-sm',
        'md': 'kbd-md',
        'lg': 'kbd-lg',
        'xl': 'kbd-xl'
    }"
    variant=""
    :variantClasses="{
        'neutral': 'bg-neutral/15 text-neutral border-neutral/25',
        'primary': 'bg-primary/15 text-primary border-primary/25',
        'secondary': 'bg-secondary/15 text-secondary border-secondary/25',
        'accent': 'bg-accent/15 text-accent border-accent/25',
        'info': 'bg-info/15 text-info border-info/25',
        'success': 'bg-success/15 text-success border-success/25',
        'warning': 'bg-warning/15 text-warning border-warning/25',
        'error': 'bg-error/15 text-error border-error/25'
    }"
/>
{% parse_icon attrs as i %}

<kbd class="kbd {{ sizeClasses|get_dict_item:size }} {{ variantClasses|get_dict_item:variant }} {{ class }}" {{ attrs|strip_icon_attrs }}>{% if i.name %}<c-component is="lbi" n="{{ i.name }}" w="1em" h="1em" :fill=i.fill class="{{ i.css_class }}" />{% endif %}{{ slot }}</kbd>