<template>
  <!--  eslint-disable vue/no-deprecated-dollar-listeners-api */ -->
  <VBtn
    depressed
    :color="color"
    class="disable-min-width"
    :class="{ 'v-btn--active': isActive, 'primary--text': color === 'mainBg' }"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot />
  </VBtn>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  name: 'PButton',
  inheritAttrs: false,
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: 'mainBg',
    },
  },
})
</script>

<style lang="scss" scoped>
.disable-min-width.disable-min-width {
  min-width: auto;
}

.v-btn--active.v-btn--active.v-btn--active {
  background: $accent !important;
  border: 1px solid $primary !important;

  &::before {
    opacity: 0;
  }
}
</style>
