<template>
    <v-btn
            class="button"
            @click="buttonClicked"
            :to="to"
            :block="block"
            :depressed="depressed"
            :class="{active, disabled: !active}"
    >
        <slot></slot>
    </v-btn>
</template>

<script>
    export default {
        name: "BaseButton",
        props: {
            block: Boolean,
            depressed: Boolean,
            active: Boolean,
            to: String,
        },
        methods: {
            buttonClicked() {
                this.$emit('click');
            }
        },
    }
</script>

<style lang="stylus" scoped>
    @import "../assets/stylus/fonts.styl";

    .button
        color #ffffff
        width 15vw
        height 3.33vw
        border-radius 9vh !important
        font-size base-button-fontsize
        text-transform none
        font-weight 400

    .disabled
        background-color #ffacaf !important
        pointer-events none

    .active
        background-color #ed1c24 !important
        pointer-events auto
</style>