<script lang="ts">
  let clazz: string = "";
  export { clazz as class };
  export let id = "";
  export let disabled = false;
  export let style = "";
  export let title = "";
</script>

<input
  type="checkbox"
  {id}
  class="svcmp-Checkbox {clazz}"
  {disabled}
  on:click
  on:focus
  {style}
  {title} />

<style lang="scss">
  .svcmp-Checkbox {
    appearance: none;
    background: transparent;
    color: var(--text);
    padding: 0.3rem;
    vertical-align: baseline;
    border-radius: 0.25rem;
    cursor: text;
    border: 2px solid var(--links);
    transition: 0.1s ease-in-out;
    background-size: cover;
    margin: 0;
  }
  .svcmp-Checkbox:not(:disabled):hover {
    cursor: pointer;
    background-color: var(--links-transparent);
  }
  .svcmp-Checkbox:checked {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAPnAAAD5wHDtfxxAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAfxJREFUWIW9ls2LTnEUxz/PY6Jhmh1qSkRJ9ChlQamZLRuWbCTZjA1lRXZSFlJKyUJTkz/AxsbCRtmoyUuTRHlZKMlLMobG+Fg89+Zxnfvc5+Xee+pXt9895/f5nnPuPfc2VGq0I8B+YBpYAECta02oH23bM7Wl0qipAg3gTpJ9aovA6WYddOBkBg4wCkzVUYEtwCNgLLP/DmhVXYER4FYAFzgBfKr6wTtvbNdSnyrhu9SfAfylOla1gFXqkwC+pO7p9K1KwJUArnoh61sFfJ+6HMDn1JVVCxhXXwfwHyaTL7vKfg2vAhuD/bPA0zCixOwPBpmr3lebeXFlTcK1SYbrM/tfgZ3Am7zAslpwPYADnOoGB0ppwfGc0t/uJX7YFmwCHgPjmf0PQAt4X3TAMC1oAjMBHNp/PIVw4J8WHFNn1dU9lv5MTulv9tPC9GKH+i05YE7dXBC4Xf0ewF/ZHkZ9CVijzmcO+qIeygkaUR8G8GV1qh94KmAmOEz1t3rJ/4fIxRz/y/3CUwFH/Vv+yO6p65KAveqvwGdeHR1UAOo24+93am/VSfV5cG9J3T0IvFMASQY3uoiIMlc9Nyg8KyBdRS3ptAfqirIF9NIS1QV16zDwbgJ6acn0sPAiAemKRNxVG3UJQD2gLibwz+qGMuD9CMD2LHihHi4LrvIH6xoIB63GYHwAAAAASUVORK5CYII=");
  }
  .svcmp-Checkbox:disabled {
    opacity: 0.5;
  }
</style>