/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <slot></slot>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        display: contents;
    }
    ::slotted(*) {
        position: relative;
        box-sizing: border-box;
        margin: 5px;
        color: var(--input-text-color, #000000);
        background-color: var(--input-back-color, #ffffff);
        border-style: solid;
        border-width: var(--input-border-width, 2px);
        border-color: var(--input-border-color, #222222);
        border-radius: var(--input-border-radius, 6px);
        font-size: 1rem;
    }
    ::slotted(textarea) {
        padding: 7px;
        cursor: auto;
    }
    ::slotted(input:focus),
    ::slotted(select:focus),
    ::slotted(textarea:focus),
    ::slotted(button:focus),
    ::slotted(a:focus) {
        box-shadow: 0 0 2px 2px var(--input-focus-color, #06b5ff);
        outline: none;
    }
    ::slotted(input:focus:not(:focus-visible)),
    ::slotted(select:focus:not(:focus-visible)),
    ::slotted(textarea:focus:not(:focus-visible)),
    ::slotted(button:focus:not(:focus-visible)),
    ::slotted(a:focus:not(:focus-visible)) {
        box-shadow: none;
        outline: none;
    }
    ::slotted(input:not([type])),
    ::slotted(input[type="text"]),
    ::slotted(input[type="password"]),
    ::slotted(input[type="search"]),
    ::slotted(input[type="url"]),
    ::slotted(input[type="email"]),
    ::slotted(input[type="tel"]),
    ::slotted(input[type="time"]),
    ::slotted(input[type="date"]),
    ::slotted(input[type="week"]),
    ::slotted(input[type="month"]),
    ::slotted(input[type="datetime-local"]),
    ::slotted(input[type="number"]),
    ::slotted(select),
    ::slotted(input[type="button"]),
    ::slotted(input[type="reset"]),
    ::slotted(input[type="submit"]),
    ::slotted(input[type="color"]),
    ::slotted(button),
    ::slotted(a) {
        height: 2rem;
        padding: 0px 7px;
    }
    ::slotted(input[type="checkbox"]),
    ::slotted(input[type="button"]),
    ::slotted(input[type="reset"]),
    ::slotted(input[type="submit"]),
    ::slotted(input[type="color"]),
    ::slotted(button),
    ::slotted(a) {
        cursor: pointer;
        user-select: none;
    }
    ::slotted(input[type="button"]),
    ::slotted(input[type="reset"]),
    ::slotted(input[type="submit"]),
    ::slotted(input[type="color"]),
    ::slotted(button),
    ::slotted(a) {
        color: var(--button-text-color, #000000);
        background-color: var(--button-back-color, #eaeaea);
        border-width: var(--button-border-width, 2px);
        border-color: var(--button-border-color, #222222);
        border-radius: var(--button-border-radius, 6px);
        font-weight: bold;
    }
    ::slotted(input[type="button"]:hover),
    ::slotted(input[type="reset"]:hover),
    ::slotted(input[type="submit"]:hover),
    ::slotted(input[type="color"]:hover),
    ::slotted(button:hover),
    ::slotted(a:hover) {
        color: var(--button-hover-text-color, #ffffff);
        background-color: var(--button-hover-back-color, #353935);
        background-image: var(--button-hover-back-image, none);
        border-color: var(--button-hover-border-color, #222222);
    }
    ::slotted(a) {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }
    ::slotted(a)::after {
        display: inline-flex;
        align-items: center;
        margin-left: 5px;
        font-size: 1.5em;
        line-height: 1em;
        content: "🔗︎";
    }
    ::slotted(input[type="checkbox"]) {
        flex-shrink: 0;
        width: 3rem;
        height: 1.5rem;
        background-color: var(--switch-unchecked-back-color, #ffffff);
        border-radius: 1rem;
        appearance: none;
    }
    ::slotted(input[type="checkbox"])::after {
        position: absolute;
        box-sizing: border-box;
        display: block;
        width: 50%;
        height: 100%;
        background-color: var(--switch-button-back-color, #000000);
        border-radius: 50%;
        content: "";
    }
    ::slotted(input[type="checkbox"]:indeterminate) {
        background-color: var(--switch-indeterminate-back-color, #ffffff);
    }
    ::slotted(input[type="checkbox"]:indeterminate)::after {
        left: 25%;
    }
    ::slotted(input[type="checkbox"]:checked) {
        background-color: var(--switch-checked-back-color, #9ee1ec);
    }
    ::slotted(input[type="checkbox"]:checked)::after {
        left: 50%;
    }
    ::slotted(input[type="radio"]) {
        flex-shrink: 0;
        width: 1.5rem;
        height: 1.5rem;
        background-color: var(--input-back-color, #ffffff);
        border: solid 1px var(--input-border-color, #222222);
        border-radius: 1rem;
        appearance: none;
    }
    ::slotted(input[type="radio"]:checked)::after {
        position: absolute;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--input-text-color, #000000);
        border: solid 5px var(--input-back-color, #ffffff);
        border-radius: 50%;
        content: "";
    }
    
`);

/* ======================================================================= */

import CustomElement from "../element/CustomElement.js";

/**
 * @deprecated
 */
export default class InputWrapper extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

}

customElements.define("emc-input-wrapper", InputWrapper);
