<script>let className = "";
export { className as class };
export let disabled = false;
export let type = "secondary";
export let outline = false;
export let href = "";
export let form = "";
</script>

{#if href}
  <a
    class="btn {type}{className ? ` ${className}` : ''}"
    class:outline
    role="button"
    aria-disabled={disabled}
    href={disabled ? undefined : href}
  >
    <slot />
  </a>
{:else if form}
  <input type="submit" value={form} class="btn {type}{className ? ` ${className}` : ''}" {disabled} />
{:else}
  <button class="btn {type}{className ? ` ${className}` : ''}" class:outline on:click {disabled}>
    <slot />
  </button>
{/if}

<style>
  .fill-horizontal {
    width: 100%;
  }

  .btn {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
    border-radius: var(--border-radius-extralarge);
    padding: var(--border-radius-default) var(--border-radius-extralarge);
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
    font-size: var(--heading-desktop-h6) * 2 / 3;
    font-weight: var(--text-medium);
    line-height: 2;
    outline: none;
    transition: all 0.1s ease-in-out;
    border-color: transparent;
  }

  .btn:disabled,
  .btn[aria-disabled='true'] {
    cursor: default;
    opacity: var(--text-opacity-light);
  }

  .btn:not(:disabled):not([aria-disabled='true']):active {
    transform: translateY(1px);
    box-shadow: var(--shadow-inset-xs);
    transition: none;
  }

  .btn.outline {
    border: 1px solid;
  }

  .btn.primary:not(.outline) {
    background: var(--dabble-blue-gradient);
    color: #fff;
    /* box-shadow: var(--shadow-sm2); */
  }

  .btn.primary:not(.outline):not(:disabled):not([aria-disabled='true']):hover {
    background: var(--dabble-blue-gradient-hovered);
  }

  .btn.primary.outline {
    border-color: var(--dabble-blue);
    color: var(--dabble-blue);
    box-shadow: var(--shadow-sm2);
  }

  .btn.primary.outline:not(:disabled):not([aria-disabled='true']):hover {
    background-color: var(--dabble-blue);
    color: #fff;
  }

  .btn.secondary:not(.outline) {
    background-color: #f8f9fa;
    color: #212529;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }

  .btn.secondary:not(.outline):not(:disabled):not([aria-disabled='true']):hover {
    background-color: #e2e6ea;
  }

  .btn.secondary.outline {
    border-color: #f8f9fa;
    color: #212529;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }

  .btn.secondary.outline:not(:disabled):not([aria-disabled='true']):hover {
    background-color: #f8f9fa;
  }

  .btn.warning:not(.outline) {
    background: var(--dabble-warning-gradient);
    color: #fff;
    /* box-shadow: var(--shadow-sm2); */
  }

  .btn.warning:not(.outline):not(:disabled):not([aria-disabled='true']):hover {
    background: var(--dabble-warning-gradient-hovered);
  }

  .btn.warning.outline {
    border-color: var(--dabble-warning);
    color: var(--dabble-warning);
    box-shadow: var(--shadow-sm2);
  }

  .btn.warning.outline:not(:disabled):not([aria-disabled='true']):hover {
    background-color: var(--dabble-warning);
    color: #fff;
  }

  .btn.danger:not(.outline) {
    background: var(--dabble-danger-gradient);
    color: #fff;
    /* box-shadow: var(--shadow-sm2); */
  }

  .btn.danger:not(.outline):not(:disabled):not([aria-disabled='true']):hover {
    background: var(--dabble-danger-gradient-hovered);
  }

  .btn.danger.outline {
    border-color: var(--dabble-danger);
    color: var(--dabble-danger);
    box-shadow: var(--shadow-sm2);
  }

  .btn.danger.outline:not(:disabled):not([aria-disabled='true']):hover {
    background-color: var(--dabble-danger);
    color: #fff;
  }
</style>
