<template>
  <span :class="[$style.wrapper,{[$style['align-center']]:align=='center'}]">
    <label :class="$style.label">
      <input type="checkbox" :class="$style.checkbox">
      <span :class="$style.custom"></span>
      <span v-if="label" :class="$style.text">{{ label }}</span>
    </label>
  </span>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'left'
    }
  }

}
</script>

<style module lang="scss">

  .wrapper{
    position: relative;
  }

  .label{
    display:flex;
    align-items:center;
  }

  .align-center.label{
    justify-content: center;
  }

  .custom{
    width: 1.9rem;
    height: 1.9rem;
    display:inline-block;
    position:relative;
  }

  .custom:before {
    border: 1px solid #95959a;
    content: '';
    display: block;
    height: 1.9rem;
    left: 0;
    /* margin-top: -0.8rem; */
    position: absolute;
    top: 0;
    width: 1.9rem;
    border-radius: 0.4rem;
  }
  .custom:after {
    border-right: 0.4rem solid #7e6aee;
    border-bottom: 0.4rem solid #7e6aee;
    content: '';
    display: block;
    height: 1.4rem;
    width: 0.7rem;
    top: 0.2rem;
    left: 0.7rem;
    opacity: 0;
    position: absolute;

    transform: rotate(45deg);

  }

  .checkbox{
    display:none;
  }

  .checkbox:checked + .custom::before {
    border-color: #666;
  }
  .checkbox:checked + .custom::after {
    opacity: 1;
  }

  .text{
    margin-left: 1rem;
  }

.checkbox{

  @include mq-pc {
  }
  @include mq-sp {

  }
}
</style>
