{"version":3,"sources":["switcher.scss","switcher.css"],"names":[],"mappings":"AAAA,2CAAA;AAKA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EAEA,+BAAA;EAYA,eAAA;EAqEA,oBAAA;ACnFF;ADGE;EACE,QAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;ACDJ;ADGI;EACE,mCAAA;UAAA,2BAAA;ACDN;ADME;EACE,kBAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,wBAAA;EACA,gBAAA;EAGA,kCAAA;ACNJ;ADQI;EACE,wCAAA;ACNN;ADUM;EAEE,qEAAA;ACTR;ADWQ;EACE,2EAAA;ACTV;ADIM;EAEE,yEAAA;ACHR;ADKQ;EACE,+EAAA;ACHV;ADFM;EAEE,qEAAA;ACGR;ADDQ;EACE,2EAAA;ACGV;ADRM;EAEE,+DAAA;ACSR;ADPQ;EACE,qEAAA;ACSV;ADdM;EAEE,mEAAA;ACeR;ADbQ;EACE,yEAAA;ACeV;ADpBM;EAEE,qEAAA;ACqBR;ADnBQ;EACE,2EAAA;ACqBV;AD1BM;EAEE,+DAAA;AC2BR;ADzBQ;EACE,qEAAA;AC2BV;ADhCM;EAEE,iEAAA;ACiCR;AD/BQ;EACE,uEAAA;ACiCV;AD3BE;EACE,wDAAA;UAAA,gDAAA;AC6BJ;AD1BE;EACE,sBAAA;AC4BJ;ADzBE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,uBAAA;EACA,wBAAA;EACA,yBAAA;EAAA,iBAAA;AC2BJ;ADxBE;EACE,mCAAA;MAAA,+BAAA;UAAA,2BAAA;AC0BJ;ADvBE;EACE,iCAAA;ACyBJ;ADvBI;EACE,iCAAA;ACyBN;ADrBE;;EAEE,aAAA;EACA,mBAAA;EACA,oBAAA;ACuBJ;ADnBE;EACE,sBAAA;ACqBJ;ADlBE;EACE,sBAAA;ACoBJ;ADhBE;EACE,mBAAA;ACkBJ;ADfE;EACE,oBAAA;ACiBJ;ADbE;EACE,WAAA;EACA,YAAA;ACeJ;ADbI;EACE,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;ACeN;ADZI;EACE,mCAAA;MAAA,+BAAA;UAAA,2BAAA;ACcN;ADFE;EACE,YAAA;EACA,YAAA;ACIJ;ADFI;EACE,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;ACIN;ADDI;EACE,mCAAA;MAAA,+BAAA;UAAA,2BAAA;ACGN;;ADEA;EACE,yBAAA;ACCF","file":"switcher.css","sourcesContent":["/* The switch - the box around the slider */\n// @see https://www.w3schools.com/howto/howto_css_switch.asp\n\n$colors: 'primary', 'secondary', 'success', 'info', 'danger', 'warning', 'dark', 'light';\n\n.unicorn-switch {\n  position: relative;\n  display: inline-block;\n  width: 60px;\n  height: 34px;\n  margin-bottom: 0;\n\n  /* Hide default HTML checkbox */\n  input {\n    width: 0;\n    height: 0;\n    position: relative;\n    left: 30px;\n\n    &:focus {\n      box-shadow: none !important;\n    }\n  }\n\n  /* The slider */\n  .switch-slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    -webkit-transition: .4s;\n    transition: .4s;\n\n    // BS variables\n    background-color: var(--bs-btn-bg);\n\n    &:hover {\n      background-color: var(--bs-btn-hover-bg);\n    }\n\n    @each $color in $colors {\n      &.btn-#{$color} {\n        // BS variables\n        background-color: var(--bs-btn-bg, var(--bs-#{$color}, var(--#{$color})));\n\n        &:hover {\n          background-color: var(--bs-btn-hover-bg, var(--bs-#{$color}, var(--#{$color})));\n        }\n      }\n    }\n  }\n\n  input:focus + .switch-slider {\n    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n  }\n\n  .switch-slider.bg-default {\n    background-color: #ccc;\n  }\n\n  .switch-slider:before {\n    position: absolute;\n    content: \"\";\n    height: 26px;\n    width: 26px;\n    left: 4px;\n    bottom: 4px;\n    background-color: white;\n    -webkit-transition: .4s;\n    transition: .25s;\n  }\n\n  input:checked + .switch-slider:before {\n    transform: translateX(26px);\n  }\n\n  input:not(:checked) + .switch-slider {\n    background-color: #ccc !important;\n\n    &:hover {\n      background-color: #aaa !important;\n    }\n  }\n\n  input[disabled] + .switch-slider,\n  input[readonly] + .switch-slider {\n    opacity: .65;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Rounded sliders */\n  .switch-slider.slider-round {\n    border-radius: .25rem;\n  }\n\n  .switch-slider.slider-round:before {\n    border-radius: .18rem;\n  }\n\n  // Circle sliders\n  .switch-slider.slider-circle {\n    border-radius: 50px;\n  }\n\n  .switch-slider.slider-circle:before {\n    border-radius: 100px;\n  }\n\n  // Size\n  &.switch-sm {\n    width: 46px;\n    height: 24px;\n\n    .switch-slider:before {\n      height: 18px;\n      width: 18px;\n      left: 3px;\n      bottom: 3px;\n    }\n\n    input:checked + .switch-slider:before {\n      transform: translateX(22px);\n    }\n\n    //.switch-slider.slider-round {\n    //  border-radius: .2rem;\n    //}\n    //\n    //.switch-slider.slider-round:before {\n    //  border-radius: .15rem;\n    //}\n  }\n\n  &.switch-lg {\n    width: 100px;\n    height: 34px;\n\n    .switch-slider:before {\n      height: 26px;\n      width: 45px;\n      left: 4px;\n      bottom: 4px;\n    }\n\n    input:checked + .switch-slider:before {\n      transform: translateX(47px);\n    }\n  }\n}\n\n.has-invalid .unicorn-switch .switch-slider {\n  border: 1px solid #dc3545;\n}\n","/* The switch - the box around the slider */\n.unicorn-switch {\n  position: relative;\n  display: inline-block;\n  width: 60px;\n  height: 34px;\n  margin-bottom: 0;\n  /* Hide default HTML checkbox */\n  /* The slider */\n  /* Rounded sliders */\n}\n.unicorn-switch input {\n  width: 0;\n  height: 0;\n  position: relative;\n  left: 30px;\n}\n.unicorn-switch input:focus {\n  box-shadow: none !important;\n}\n.unicorn-switch .switch-slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  background-color: var(--bs-btn-bg);\n}\n.unicorn-switch .switch-slider:hover {\n  background-color: var(--bs-btn-hover-bg);\n}\n.unicorn-switch .switch-slider.btn-primary {\n  background-color: var(--bs-btn-bg, var(--bs-primary, var(--primary)));\n}\n.unicorn-switch .switch-slider.btn-primary:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-primary, var(--primary)));\n}\n.unicorn-switch .switch-slider.btn-secondary {\n  background-color: var(--bs-btn-bg, var(--bs-secondary, var(--secondary)));\n}\n.unicorn-switch .switch-slider.btn-secondary:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-secondary, var(--secondary)));\n}\n.unicorn-switch .switch-slider.btn-success {\n  background-color: var(--bs-btn-bg, var(--bs-success, var(--success)));\n}\n.unicorn-switch .switch-slider.btn-success:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-success, var(--success)));\n}\n.unicorn-switch .switch-slider.btn-info {\n  background-color: var(--bs-btn-bg, var(--bs-info, var(--info)));\n}\n.unicorn-switch .switch-slider.btn-info:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-info, var(--info)));\n}\n.unicorn-switch .switch-slider.btn-danger {\n  background-color: var(--bs-btn-bg, var(--bs-danger, var(--danger)));\n}\n.unicorn-switch .switch-slider.btn-danger:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-danger, var(--danger)));\n}\n.unicorn-switch .switch-slider.btn-warning {\n  background-color: var(--bs-btn-bg, var(--bs-warning, var(--warning)));\n}\n.unicorn-switch .switch-slider.btn-warning:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-warning, var(--warning)));\n}\n.unicorn-switch .switch-slider.btn-dark {\n  background-color: var(--bs-btn-bg, var(--bs-dark, var(--dark)));\n}\n.unicorn-switch .switch-slider.btn-dark:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-dark, var(--dark)));\n}\n.unicorn-switch .switch-slider.btn-light {\n  background-color: var(--bs-btn-bg, var(--bs-light, var(--light)));\n}\n.unicorn-switch .switch-slider.btn-light:hover {\n  background-color: var(--bs-btn-hover-bg, var(--bs-light, var(--light)));\n}\n.unicorn-switch input:focus + .switch-slider {\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n.unicorn-switch .switch-slider.bg-default {\n  background-color: #ccc;\n}\n.unicorn-switch .switch-slider:before {\n  position: absolute;\n  content: \"\";\n  height: 26px;\n  width: 26px;\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  -webkit-transition: 0.4s;\n  transition: 0.25s;\n}\n.unicorn-switch input:checked + .switch-slider:before {\n  transform: translateX(26px);\n}\n.unicorn-switch input:not(:checked) + .switch-slider {\n  background-color: #ccc !important;\n}\n.unicorn-switch input:not(:checked) + .switch-slider:hover {\n  background-color: #aaa !important;\n}\n.unicorn-switch input[disabled] + .switch-slider,\n.unicorn-switch input[readonly] + .switch-slider {\n  opacity: 0.65;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.unicorn-switch .switch-slider.slider-round {\n  border-radius: 0.25rem;\n}\n.unicorn-switch .switch-slider.slider-round:before {\n  border-radius: 0.18rem;\n}\n.unicorn-switch .switch-slider.slider-circle {\n  border-radius: 50px;\n}\n.unicorn-switch .switch-slider.slider-circle:before {\n  border-radius: 100px;\n}\n.unicorn-switch.switch-sm {\n  width: 46px;\n  height: 24px;\n}\n.unicorn-switch.switch-sm .switch-slider:before {\n  height: 18px;\n  width: 18px;\n  left: 3px;\n  bottom: 3px;\n}\n.unicorn-switch.switch-sm input:checked + .switch-slider:before {\n  transform: translateX(22px);\n}\n.unicorn-switch.switch-lg {\n  width: 100px;\n  height: 34px;\n}\n.unicorn-switch.switch-lg .switch-slider:before {\n  height: 26px;\n  width: 45px;\n  left: 4px;\n  bottom: 4px;\n}\n.unicorn-switch.switch-lg input:checked + .switch-slider:before {\n  transform: translateX(47px);\n}\n\n.has-invalid .unicorn-switch .switch-slider {\n  border: 1px solid #dc3545;\n}"]}