<template id="tesoft-tag-template">
    <style>
        @import "/src/styles/default.css";

        :host {
            display: block;
        }

        tesoft-button::part(children) {
            align-items: center;
            display: grid;
            gap: var(--small-padding);
            grid-template-columns: auto auto;
            grid-template-rows: auto;
            padding: var(--small-padding) var(--medium-padding);
        }

        svg {
            height: 2.4rem;
            width: 2.4rem;
        }
    </style>

    <tesoft-button>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
            <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
        </svg>
        <slot></slot>
    </tesoft-button>
</template>

<script src="/src/components/tag.ts" type="module"></script>
{% includeOnce 'components/badge.njk' %}
