<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";
</script>

<button {id} class="btn-{variant} {clazz}" {disabled} on:click on:focus {style}>
  <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-danger {
    @extend %standard;
    border: 2px solid var(--error);
  }
  .btn-danger:hover {
    @extend %standard-hover;
    background-color: var(--error-transparent);
  }
</style>