<template lang="pug">
  base-input-container(:label="label")
    label.switch
      input(type="checkbox", v-model="value")
      span.slider
</template>

<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
export default {
  name: "KitToggle",
  components: { BaseInputContainer },
  props: {
    label: String,
    modelValue: Object,
  },
  computed: {
    value: {
      get() {
        return !!this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", !!value);
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.switch
  position: relative
  display: inline-block
  width: 60px
  height: 34px
  input
    opacity: 0
    width: 0
    height: 0

.slider
  position: absolute
  cursor: pointer
  top: 0
  left: 0
  right: 0
  bottom: 0
  background-color: #ccc
  -webkit-transition: .4s
  transition: .4s
  border-radius: 34px
  &:before
    position: absolute
    content: ""
    height: 26px
    width: 26px
    left: 4px
    bottom: 4px
    background-color: white
    -webkit-transition: .4s
    transition: .4s
    border-radius: 50%

input:checked + .slider
  background-color: var(--btn-blue-color)

input:focus + .slider
  box-shadow: 0 0 1px var(--btn-blue-color)

input:checked + .slider:before
  -webkit-transform: translateX(26px)
  -ms-transform: translateX(26px)
  transform: translateX(26px)
</style>
