<template>
    <FormBase :error="error" :off="off">
        <input type="checkbox" :disabled="off" :model="model" :id="_uid">
        <label :class="classes()"  :for="_uid">{{ label }}</label>
    </FormBase>
</template>

<script>
import FormBase from './FormBase';

export default {
    extends: FormBase,
    props: [
        
    ],
    components: {
        FormBase
    },
    methods: {
        classes(){
            let classes = '';
            classes += this.error ? 'error ': '';
            classes += this.off ? 'disabled ': '';
            return classes;
        },
    }
}
</script>

<style scoped>

    label {
        display: inline;
        cursor: pointer;
    }

    label::after {
        width: 12px;
        height: 12px;
        background-color: var(--white-normal);
        border: 1px solid var(--grey);
        display: block;
        content: "";
        float: right;
        margin-right: 5px;
    }

    label.error::after {
        border: 2px solid var(--error);
    }

    label.disabled::after {
        background-color: var(--grey-lightest);
        color: var(--grey);
        border-color: var(--grey-light);
        cursor: not-allowed;
    }


    input[type="checkbox"]:checked + label::after {
        background-color: var(--primary-blue-dark);
        box-shadow: inset 0px 0px 0px 3px #fff;
    }


    input[type="checkbox"]{
        visibility: hidden;
    }

</style>