import{rectangle as e,hachureEllipseFill as i,ellipse as t,svgNode as s}from"../../../../wired-elements/lib/wired-lib.js";import{WiredToggle as o}from"../../../../wired-elements/lib/wired-toggle.js";import{html as r,css as l,unsafeCSS as d}from"../../../../lit/index.js";const a=new URL("./images/sun.svg",import.meta.url).href,n=new URL("./images/moon.svg",import.meta.url).href;export class WiredDarkmodeToggle extends o{constructor(){super(),this.checked=!1,this.label="Dark mode"}canvasSize(){return[100,48]}static get tag(){return"wired-darkmode-toggle"}draw(o,r){e(o,0,0,r[0],48,this.seed).classList.add("toggle-bar"),this.knob=s("g"),this.knob.classList.add("knob"),o.appendChild(this.knob);const l=i(26,26,40,40,this.seed);l.classList.add("knobfill"),this.knob.appendChild(l),t(this.knob,26,26,40,40,this.seed)}static get properties(){return{checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},label:{type:String}}}render(){return r`
      <div style="position: relative;">
        <svg id="svg"></svg>
        <label for="input">${this.label}</label>
        <input
          id="input"
          type="checkbox"
          .checked="${this.checked}"
          ?disabled="${this.disabled}"
          @change="${this.onChange}"
        />
      </div>
    `}static get styles(){return[super.styles,l`
        :host {
          opacity: 1;
          display: inline-flex;
          vertical-align: top;
        }
        :host div {
          background-image: url("${d(a)}");
          background-repeat: no-repeat;
          --wired-toggle-off-color: var(--simple-colors-fixed-theme-amber-7);
          --wired-toggle-on-color: var(
            --simple-colors-fixed-theme-light-blue-9
          );
          background-position-x: 50px;
          width: 100px;
          display: inline-flex;
        }
        :host([checked]) div {
          background-image: url("${d(n)}");
          background-position: left;
        }
        input {
          width: 100px;
          height: 48px;
          padding: 0;
          margin: 0;
        }
        label {
          clip: rect(0 0 0 0);
          clip-path: inset(50%);
          height: 1px;
          overflow: hidden;
          position: absolute;
          white-space: nowrap;
          width: 1px;
        }
      `]}}customElements.define(WiredDarkmodeToggle.tag,WiredDarkmodeToggle);