.dn-button.button.toggle-button{transition:transform .2s var(--transition-timingFunction-in-out)}.dn-button.button.toggle-button:hover,.dn-button.button.toggle-button[data-active=true]{background:var(--color-lightest);color:var(--color-darkest)}.dn-button.button.toggle-button[data-active=true]{border-color:var(--color-lightest)}.dn-button.button.toggle-button .button__after{height:1.5rem;position:relative;width:1.5rem}.dn-button.button.toggle-button span{background-color:currentColor;display:block;height:2px;left:50%;position:absolute;top:50%;transition:var(--transition-fast);width:1rem}.dn-button.button.toggle-button[data-active=false] .button__after span:first-child{transform:translate3d(-50%,-50%,0)}.dn-button.button.toggle-button[data-active=false] .button__after span:nth-child(2){transform:translate3d(-50%,-50%,0) rotate(90deg)}.dn-button.button.toggle-button[data-active=true] .button__after span:first-child{transform:translate3d(-40%,-50%,0) rotate(-45deg)}.dn-button.button.toggle-button[data-active=true] .button__after span:nth-child(2){transform:translate3d(-120%,100%,0) rotate(45deg);width:.5rem}.dn-button.button.toggle-button--dark{color:var(--color-darkest)}.dn-button.button.toggle-button--dark:hover{background:var(--color-shade-black-20);color:var(--color-darkest)}.dn-button.button.toggle-button--dark[data-active=true]{background:var(--color-darkest);border-color:var(--color-darkest);color:var(--color-lightest)}.dn-button.button.toggle-button--light[data-active=true]{color:var(--color-darkest)}.dn-button.button.toggle-button--light[data-active=true],.dn-button.button.toggle-button--light[data-active=true]:hover{background:var(--color-secondary);border-color:var(--color-secondary)}.dn-button.button.toggle-button--icon-only{height:2rem;padding:0;width:2rem}.dn-button.button.toggle-button--icon-only .button__after{margin-left:0}.dn-button.button.toggle-button--icon-only:hover{transform:scale(1.1) translate(-3%)}.dn-button.button.toggle-button--icon-only:active{transform:scale(.95)}