checbox b&w

<template>
  <label class="epb-checkbox">
    <input class="epb_checkbox__input"
           type="checkbox">
    <span class="epb-checkbox__check">
    </span>
  </label>
</template>

<script lang="ts">

  export default {
    name: 'epb-checkbox',
    props: {
      label: String,
      value: Boolean,
      disabled: Boolean,
      checked: Boolean,
      position: {
        type: String,
        default: 'left'
      },
      trueValue: {
        default: true
      },
      falseValue: {
        default: false
      },
      color: {
        type: String,
        default: 'primary'
      }
    },
    computed: {},
    methods: {
      onClick: function (event): void {
        this.$emit('click', event);
      }
    }
  };
</script>

<style lang="scss" scoped>

  .epb-checkbox {

    height: 24px;
    width: 24px;
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;

    input:checked ~ .epb-checkbox__check::after {
      transform: rotate(45deg) scale(1);
      opacity: 1;
      left: 8px;
      top: 3px;
      width: 6px;
      height: 12px;
      border: solid white;
      border-width: 0 2px 2px 0;
      background-color: transparent;
      border-radius: 0;
    }


    &__input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    &__check {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 24px;
      width: 24px;
      background-color: pink;
      border-radius: 5px;
      border: 2px solid pink;

      &::after {
        position: absolute;
        content: "";
        left: 12px;
        top: 12px;
        height: 0px;
        width: 0px;
        border-radius: 5px;
        //border: solid black;
        border-width: 0 3px 3px 0;
        transform: rotate(0deg) scale(0);
        opacity: 1;
      }
    }
  }


</style>