<script>
import PxBase from '../bases/PxBase.vue';

/**
Standard button component.

#### Variants


- default - standard button based o

#### PxStyles Settings

- button.background - the background color of the button
- button.color - the text color of the button

#### CSS Variables

*/

export default {
    mixins: [PxBase],
    name: 'px-button',
    props: {
        /**
         * The text that gets displayed on the button in the default slot.
         */
        label: { type: String, default: '' },

        /**
         * Disables interaction.
         */
        disabled: { type: Boolean, default: false },
    },
};
</script>

<template>
    <button :class="bem(variantsMap)" v-bind="$attrs" :disabled="!!disabled">
        <slot>
            {{ label }}
        </slot>
    </button>
</template>

<style lang="scss">
@use '../styles/px.scss' as *;
@use '@thinkpixellab-public/px-styles/src/modules/controls' as *;

.px-button {
    &--base {
        @include button-base();
    }

    &--default {
        @include button();
    }

    &--outline {
        @include button-outline();
    }

    &--pill {
        border-radius: 1000px;
        padding: 0 1.5em;
    }
}
</style>
