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

        :host {
            display: grid;
        }

        button, a {
            align-content: center;
            background-color: transparent;
            border-color: var(--light-gray);
            border-radius: var(--button-border-radius);
            border-style: solid;
            border-width: 0.1rem;
            color: var(--light-gray);
            display: grid;
            font-weight: 600;
            height: 100%;
            justify-content: center;
            padding: var(--medium-padding);
            text-decoration: none;
            width: 100%;
        }

        :host([transparent]) button, :host([transparent]) a {
            border-style: none;
        }

        :host([selected]) button, :host([selected]) a {
            background-color: var(--light-gray);
            border-style: none;
            color: var(--gray);
            font-weight: 800;
        }

        :host([disabled]) button, :host([disabled]) a {
            color: var(--gray);
        }

        :host(:not([disabled])) button:focus, :host(:not([disabled])) a:focus {
            outline-color: var(--gold);
            outline-offset: 0.2rem;
            outline-style: solid;
        }

        :host(:not([disabled])) button:hover, :host(:not([disabled])) a:hover {
            background-color: var(--gold) !important;
            color: var(--gray);
            cursor: pointer;
        }

        ::slotted(svg) {
            fill: var(--light-gray);
        }

        :host([selected]) ::slotted(svg), :host([disabled]) ::slotted(svg) {
            fill: var(--gray);
        }

        :host(:not([disabled])) button:hover ::slotted(svg), :host(:not([disabled])) a:hover ::slotted(svg) {
            fill: var(--gray);
        }
    </style>

    <div>
        <button part="children">
            <slot></slot>
        </button>
    </div>
</template>

<script src="/src/components/button.ts" type="module"></script>
