.dn-toggle{--switch-container-width:44px;--switch-size:calc(var(--switch-container-width)/1.8);--light-gray:#e2e8f0;--gray:#cbd5e0;--dark-gray:#a0aec0;--teal:#237070;--dark-teal:#237070;align-items:center;cursor:pointer;display:flex}.dn-toggle .label{color:#1a202c;margin-left:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dn-toggle .input{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dn-toggle .switch{align-items:center;background-color:var(--light-gray);border-radius:var(--switch-size);display:flex;flex-basis:var(--switch-container-width);flex-shrink:0;height:var(--switch-size);position:relative;transition:background-color .25s ease-in-out}.dn-toggle .switch:before{background-color:#fff;border:0 solid var(--light-gray);border-radius:9999px;content:"";height:calc(var(--switch-size) - 4px);left:2px;position:absolute;transition:transform .375s ease-in-out;width:calc(var(--switch-size) - 4px)}.dn-toggle .input:checked+.switch{background-color:var(--teal)}.dn-toggle .input:checked+.switch:before{border-color:var(--teal);transform:translate(calc(var(--switch-container-width) - var(--switch-size)))}.dn-toggle .input:disabled+.switch{background-color:var(--gray)}.dn-toggle .input:disabled+.switch:before{background-color:var(--dark-gray);border-color:var(--dark-gray)}.dn-toggle .input:focus+.switch:before{border-color:var(--gray)}.dn-toggle .input:focus:checked+.switch:before{border-color:var(--dark-teal)}