<template>
<button class="Button" :class="[color, display]">
  <slot />
</button>
</template>

<script setup lang="ts">
type Props = {
  color ?: 'success' | 'error' | 'neutral' | 'inherit'
  display ?: 'elevated' | 'text' | 'icon'
}

const { color = 'success', display = 'elevated' } = defineProps<Props>()
</script>

<style scoped>
.Button {
  all: unset;
  --btn-clr: var(--clr-black);
  --btn-clr-contrast: var(--clr-white);
  --btn-text: var(--clr-black);
  --btn-bg: var(--clr-white);

  font-family: 'Roboto Condensed', sans-serif;
  cursor: pointer;
  padding: var(--padding-xs) var(--padding-default);
  border-radius: var(--radius-default);
  font-weight: 400;

  color: var(--btn-text);
  background-color: var(--btn-bg);

  &.success {
    --btn-clr: var(--clr-success);
    --btn-clr-contrast: var(--clr-success-contrast);
  }

  &.error {
    --btn-clr: var(--clr-error);
    --btn-clr-contrast: var(--clr-error-contrast);
  }

  &.neutral {
    --btn-clr: var(--clr-neutral);
    --btn-clr-contrast: var(--clr-neutral-contrast);
  }

  &.inherit {
    --btn-clr: inherit;
    --btn-clr-contrast: inherit;
  }

  &.elevated {
    --btn-bg: var(--btn-clr);
    --btn-text: var(--btn-clr-contrast);
    box-shadow: var(--box-shadow-z2);
  }

  &.text {
    --btn-bg: transparent;
    --btn-text: var(--btn-clr);
  }

  &.icon {
    --btn-bg: transparent;
    --btn-text: var(--btn-clr);
    padding: var(--padding-xs);
    border-radius: 50%;
  }
}
</style>