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

        :host {
            display: block;
        }

        :host > div {
            background-color: var(--gray);
            border-color: var(--dark-gray);
            border-radius: 0.4rem;
            border-style: solid;
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto;
        }

        :host([focused]) > div {
            outline-color: var(--gold);
            outline-style: solid;
        }

        input {
            background-color: transparent;
            border-style: none;
            color: var(--light-gray);
            grid-column: 2;
            padding: var(--medium-padding);
        }

        input:focus {
            outline: none;
        }

        slot {
            align-content: center;
            display: grid;
            justify-content: center;
            padding: var(--small-padding);
        }

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

        :host([focused]) ::slotted(svg) {
            fill: var(--gold);
        }
    </style>

    <div>
        <slot name="left"></slot>
        <input>
        <slot name="right"></slot>
    </div>
</template>

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