@supports (-webkit-appearance:none) or (-moz-appearance:none){input[type=checkbox],input[type=radio]{--active:var(--primary);--active-inner:#fff;--focus:2px var(--primary-mid);--border:var(--grey-mid);--border-hover:var(--primary-dark);--background:#fff;--disabled:var(--grey-mid-light);--disabled-inner:var(--grey-light);-webkit-appearance:none;-moz-appearance:none;background:var(--b,var(--background));border:1px solid var(--bc,var(--border));cursor:pointer;display:inline-block;height:21px;margin:0;outline:none;position:relative;transition:background .3s,border-color .3s,box-shadow .2s;vertical-align:top}input[type=checkbox]:after,input[type=radio]:after{content:"";display:block;left:0;position:absolute;top:0;transition:transform var(--d-t,.3s) var(--d-t-e,ease),opacity var(--d-o,.2s)}input[type=checkbox]:checked,input[type=radio]:checked{--b:var(--active);--bc:var(--active);--d-o:.3s;--d-t:.6s;--d-t-e:cubic-bezier(.2,.85,.32,1.2)}input[type=checkbox]:disabled,input[type=radio]:disabled{--b:var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked,input[type=radio]:disabled:checked{--b:var(--disabled-inner);--bc:var(--border)}input[type=checkbox]:disabled+label,input[type=radio]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled),input[type=radio]:hover:not(:checked):not(:disabled){--bc:var(--border-hover)}input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch),input[type=radio]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after,input[type=radio]:not(.switch):after{opacity:var(--o,0)}input[type=checkbox]:not(.switch):checked,input[type=radio]:not(.switch):checked{--o:1}input[type=checkbox]+label,input[type=radio]+label{cursor:pointer;display:inline-block;margin-left:4px;vertical-align:top}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{border:2px solid var(--active-inner);border-left:0;border-top:0;height:9px;left:7px;top:4px;transform:rotate(var(--r,20deg));width:5px}input[type=checkbox]:not(.switch):checked{--r:43deg}input[type=checkbox].switch{border-radius:11px;width:38px}input[type=checkbox].switch:after{background:var(--ab,var(--border));border-radius:50%;height:15px;left:2px;top:2px;transform:translate(var(--x,0));width:15px}input[type=checkbox].switch:checked{--ab:var(--active-inner);--x:17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}}