<!-- This Component is specially commented to illustrate how Svelte works -->

<script lang="ts">
  // We're declaring vars that can be passed as parameters to the component,
  // in a manner like:
  // <Checkbox id="T">
  // where the variable `id' is set to "T".
  // `class' is a reserved keyword in JS, so we call the variable `clazz` and
  // export it as 'class' so we can still say <Checkbox class="whatever">.
  let clazz: string = "";
  export { clazz as class };
  export let id = "";
  export let disabled = false; // Boolean parameters have no content.
  export let style = "";
  export let title = "";
</script>

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

<!--
  Reviewing the above:

<input                            This is the content of the component.
                                  Well, technically it all is, but this
                                  is actual HTML content.
  type="checkbox"                 Fixed value. Not dynamic, always
                                  applied. Works as you'd expect.
  {id}                            This de-sugars to id="{id}", inlining
                                  the value of the `id' variable for
                                  {id}.
  class="svcmp-Checkbox {clazz}"  One static class, and other classes 
                                  passed are added also.
  {disabled}                      {disabled} is inlined if `disabled` is
                                  true. Otherwise, it is skipped.
  on:click                        Listener bindings. Ask core.
  on:focus                        "
  {style}                         Same idea as {id} above.
  {title} />                      "

-->

<style lang="scss">
  /*
    These styles are inlined as a part of the component.
    Class and id names are mangled, but I try to keep them reasonable so that
    the file is maintainable.
    This sort of styling will replace the entire css/ directory eventually.
  */

  .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>