<template>
  <button :type="type" class="button__button"
    :class="{ 'button__button__disabled': disabled, 'button__button__border': border, 'button__button__caution': cssClass === 'caution', 'button__button__mini': cssClass === 'mini' }">
    <slot />
  </button>
</template>

<script setup>
defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'button',
  },
  border: {
    type: Boolean,
    default: true,
  },
  cssClass: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss">
@import '~/assets/css/components';

.button {
  &__button {
    display: inline-block;
    padding: 4px 24px;
    background-color: inherit;
    color: $text-secondary-color;
    text-align: center;
    font-family: $font-secondary;
    font-weight: bold;
    font-size: 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      color: $text-secondary-hover-color;
    }

    &__border {
      background-color: $button-background-color;
      color: $button-text-color;
      border: $button-border;
      border-radius: 8px;

      &:hover {
        border: $button-hover-border;
        background-color: $button-hover-background-color;
        color: $button-hover-text-color;
      }
    }

    &__disabled,
    &__disabled:hover {
      cursor: default;
      background-color: $button-disabled-background-color;
      margin: 4px;
      color: $button-disabled-text-color;

      &.button__button__border {
        margin: 0;
        border: $button-disabled-border-border;
      }
    }

    &__caution {
      background-color: $button-caution-background-color;
      border: $button-caution-border;
      color: $button-caution-text-color;

      &:hover {
        background-color: $button-caution-hover-background-color;
        border: $button-caution-hover-border;
        color: $button-caution-hover-text-color;
      }
    }

    &__mini {
      font-size: 16px;
    }
  }
}
</style>
