import { r as registerInstance, c as createEvent, h, H as Host } from './index-b6f10a81.js';

const dvnCheckboxCss = ":host{display:block}:host(.inline){display:inline-block;margin-right:calc(4 * var(--spacing-unit))}label{cursor:pointer;user-select:none;position:relative;vertical-align:top;display:block}label:hover:not(.disabled) .input:checked~.check-mark{box-shadow:0 0 5px var(--base-color);border-color:var(--base-color-light);background:var(--base-color-light)}label:hover:not(.disabled) .input:not(:checked)~.check-mark{border-color:var(--base-color)}label.disabled{cursor:default;color:var(--color-disabled)}label.leaned{margin:0}label.small{padding:4px 4px 4px 22px}label.medium{padding:6px 6px 6px 28px}label.large{padding:8px 8px 8px 34px}label.neutral{--base-color:var(--color-neutral);--base-color-light:var(--color-neutral-light)}label.primary{--base-color:var(--color-primary);--base-color-light:var(--color-primary-light)}label.secondary{--base-color:var(--color-secondary);--base-color-light:var(--color-secondary-light)}label.warning{--base-color:var(--color-warning);--base-color-light:var(--color-warning-light)}label.danger{--base-color:var(--color-danger);--base-color-light:var(--color-danger-light)}label.small .check-mark{height:14px;width:14px;left:4px}label.medium .check-mark{height:16px;width:16px;left:6px}label.large .check-mark{height:18px;width:18px;left:8px}label.leaned .check-mark{left:0}input{opacity:0;position:absolute;cursor:pointer;margin:0}input:disabled{cursor:no-drop}input:checked:not(:disabled)~.check-mark{border-color:var(--base-color);background:var(--base-color)}input:checked:disabled~.check-mark{border-color:var(--color-disabled);background:var(--color-disabled)}input:checked~.check-mark:after{display:block}input:focus:not(.disabled)~.check-mark{box-shadow:0 0 5px var(--base-color);border-color:var(--base-color)}.check-mark{top:0;bottom:0;margin:auto;position:absolute;border-radius:3px;transition:all .3s;box-sizing:border-box;border:1px solid var(--color-border);background-color:var(--color-input-background)}.check-mark:after{content:\"\";position:absolute;display:none;left:0;top:35%;bottom:50%;right:0;margin:auto;width:10px;height:6px;transform:rotate(-45deg);box-sizing:border-box;border-color:var(--color-background-secondary);border-style:solid;border-width:0px 0px 3px 3px}";

const DvnCheckbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.scale = 'medium';
    this.tint = 'primary';
    this.disabled = false;
    this.checked = false;
    this.inline = false;
    this.leaned = false;
  }
  render() {
    return (h(Host, { class: {
        inline: this.inline,
      } }, h("label", { class: {
        disabled: this.disabled,
        [this.scale]: true,
        [this.tint]: true,
        leaned: this.leaned,
      } }, this.label, h("input", { class: "input", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: (e) => {
        this.change.emit(!this.checked);
        e.stopPropagation();
      } }), h("span", { class: "check-mark" }))));
  }
};
DvnCheckbox.style = dvnCheckboxCss;

export { DvnCheckbox as dvn_checkbox };
