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

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

<style lang="scss">
  .btn {
    appearance: none;
    background: transparent;
    color: var(--text);
    padding: 0.675em 1em;
    border-radius: 0.25rem;
    cursor: text;
    border: 2px solid var(--links);
    transition: 0.1s ease-in-out;
  }
  .btn:hover {
    cursor: pointer;
    background-color: var(--links-transparent);
  }
</style>