{"version":3,"sources":["webpack:///./src/components/elements/ToggleSwitch.vue","webpack:///./src/components/elements/ToggleSwitch.vue?7805","webpack:///./src/components/elements/ToggleSwitch.vue?ebb3"],"names":["class","disabled","onInput","type","checked","value","name","emits","props","Boolean","default","methods","event","stopPropagation","this","$emit","render","__scopeId"],"mappings":"8MAMM,eAEM,OAFDA,MAAM,UAAQ,CACjB,eAAmB,OAAdA,MAAM,U,MAEPA,MAAM,S,wEARhB,eAYM,OAZDA,MAAK,CAAC,eAAc,UAAoB,EAAAC,WAAY,QAAK,8BAAE,EAAAC,QAAA,sB,CAE9D,eAAwC,SAAjCC,KAAK,WAAYC,QAAS,EAAAC,O,oBACjC,eAQQ,cANN,EAGA,eAEO,OAFP,EAEO,CADL,eAAQ,yB,MAOD,GACbC,KAAM,eACNC,MAAO,CAAC,SACRC,MAAO,CACLH,MAAO,CACLF,KAAMM,QACNC,SAAS,GAGXT,SAAU,CACRE,KAAMM,QACNC,SAAS,IAIbC,QAAS,CACPT,QADO,SACCU,GAEN,GADAA,EAAMC,kBACFC,KAAKb,SACP,OAAO,EAETa,KAAKC,MAAM,QAASH,M,UCjC1B,EAAOI,OAAS,EAChB,EAAOC,UAAY,kBAEJ,U,oCCRf,Y","file":"static/js/chunk-06539e5d.1a0f4e72.js","sourcesContent":["<template>\n  <div class=\"power-switch\" :class=\"{disabled: disabled}\" @click=\"onInput\">\n    <!--suppress HtmlFormInputWithoutLabel -->\n    <input type=\"checkbox\" :checked=\"value\">\n    <label>\n      <!--suppress HtmlUnknownTag -->\n      <div class=\"switch\">\n        <div class=\"dot\" />\n      </div>\n      <span class=\"label\">\n        <slot />\n      </span>\n    </label>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitch\",\n  emits: ['input'],\n  props: {\n    value: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  methods: {\n    onInput(event) {\n      event.stopPropagation()\n      if (this.disabled)\n        return false\n\n      this.$emit('input', event)\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.power-switch {\n  position: relative;\n  transition: transform .3s;\n  transform: scale(var(--scale, 1)) translateZ(0);\n\n  &:active {\n    --scale: .96;\n  }\n\n  &.disabled {\n    opacity: 0.6;\n  }\n\n  input {\n    display: none;\n    & + label {\n      border-radius: 1em;\n      display: block;\n      cursor: pointer;\n      position: relative;\n      transition: box-shadow .4s;\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        border-radius: inherit;\n        background: none;\n        opacity: var(--gradient, 0);\n        transition: opacity .4s;\n      }\n\n      .switch {\n        position: relative;\n        display: inline-block;\n        vertical-align: top;\n        height: 1.4em;\n        width: 2.5em;\n        border-radius: 1em;\n        background: $toggle-bg;\n        box-shadow: $toggle-shadow;\n\n        &:before {\n          content: '';\n          position: absolute;\n          left: 0;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          border-radius: inherit;\n          background: $toggle-selected-bg;\n          opacity: var(--gradient, 0);\n          transition: opacity .4s;\n        }\n\n        .dot {\n          background: $toggle-dot-bg;\n          position: absolute;\n          width: 1.5em;\n          height: 1.5em;\n          border-radius: 50%;\n          box-shadow: $toggle-dot-shadow;\n          left: -0.25em;\n          top: -0.05em;\n          transform: translateX(var(--offset, 0));\n          transition: transform .4s, box-shadow .4s;\n\n          &:before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            border-radius: inherit;\n            background: $toggle-selected-dot-bg;\n            box-shadow: $toggle-dot-shadow;\n            opacity: var(--gradient, 0);\n            transition: opacity .4s;\n          }\n        }\n      }\n\n      span {\n        line-height: 2em;\n        font-size: 1.2em;\n        color: var(--text, #646B8C);\n        font-weight: 500;\n        display: inline-block;\n        vertical-align: top;\n        position: relative;\n        margin-left: 0.5em;\n        transition: color .4s;\n      }\n\n      & + span {\n        text-align: center;\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 100%;\n        opacity: 0;\n        font-size: 1em;\n        font-weight: 500;\n        color: #A6ACCD;\n        transform: translateY(0.2em);\n        transition: opacity .4s, transform .4s;\n      }\n    }\n\n    &:not(:checked) {\n      & + label {\n        pointer-events: none;\n        & + span {\n          opacity: 1;\n          transform: translateY(0.6em);\n        }\n      }\n    }\n\n    &:checked {\n      & + label {\n        --offset: 1.5em;\n        --text: #406046;\n        --gradient: 1;\n        --shadow: rgba(0, 39, 6, .1);\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./ToggleSwitch.vue?vue&type=template&id=8fae7678&scoped=true\"\nimport script from \"./ToggleSwitch.vue?vue&type=script&lang=js\"\nexport * from \"./ToggleSwitch.vue?vue&type=script&lang=js\"\n\nimport \"./ToggleSwitch.vue?vue&type=style&index=0&id=8fae7678&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-8fae7678\"\n\nexport default script","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./ToggleSwitch.vue?vue&type=style&index=0&id=8fae7678&lang=scss&scoped=true\""],"sourceRoot":""}