.switch-input{--switch-width:40px;--switch-height:20px;--switch-svg-width:30px;--switch-bg-color:#bbb;--switch-checked-bg-color:#97e381;--switch-sm-width:40px;--switch-sm-height:16px;--switch-sm-svg-width:24px;align-items:center;display:flex;justify-content:space-between}.switch-input input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--switch-bg-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='20' height='20' y='5' fill='%23fff' rx='10' ry='10'/%3E%3C/svg%3E");background-position:0;background-repeat:no-repeat;background-size:var(--switch-svg-width) var(--switch-height);border:none;border-radius:var(--switch-height);height:var(--switch-height);transition:background-position .15s ease-in-out,background-color .15s ease-in-out;width:var(--switch-width)}.switch-input input[type=checkbox]:checked{background-color:var(--switch-checked-bg-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='20' height='20' x='10' y='5' fill='%23fff' rx='10' ry='10'/%3E%3C/svg%3E");background-position:100%}.switch-input input[type=checkbox]:not([disabled]){cursor:pointer}.switch-input input[type=checkbox][disabled]{opacity:.5}.switch-input-sm input[type=checkbox]{background-size:var(--switch-sm-svg-width) var(--switch-sm-height);border-radius:var(--switch-sm-height);height:var(--switch-sm-height);width:var(--switch-sm-width)}