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

<button
  {id}
  class="btn-{variant} {clazz}"
  {disabled}
  on:click
  on:focus
  {style}
  class:btn-disabled={disabled}
  class:btn-selected={selected}>
  <slot />
</button>

<style lang="scss">
  %standard {
    appearance: none;
    background: transparent;
    color: var(--text);
    padding: 0.675em 1em;
    border-radius: 0.25rem;
    cursor: text;
    transition: 0.1s ease-in-out;
  }

  %standard-hover {
    cursor: pointer;
  }

  .btn-normal {
    @extend %standard;
    border: 2px solid var(--links);
  }
  .btn-normal:hover {
    @extend %standard-hover;
    background-color: var(--links-transparent);
  }
  .btn-selected {
    background-color: var(--links-semitransparent);
  }

  .btn-danger {
    @extend %standard;
    border: 2px solid var(--error);
  }
  .btn-danger:hover {
    @extend %standard-hover;
    background-color: var(--error-transparent);
  }

  .btn-disabled {
    @extend %standard;
    border: 2px solid gray;
    color: rgba(205, 214, 244, 60);
  }
  .btn-disabled:hover {
    background-color: transparent;
    cursor: not-allowed;
  }
</style>