@layer base{.swap{cursor:pointer;-webkit-user-select:none;user-select:none;place-items:center;line-height:0;display:inline-grid;position:relative}.swap>input{opacity:0;width:0;height:0;margin:0;position:absolute}.swap svg{flex-shrink:0;width:1.25em;height:1.25em}.swap-off,.swap-on{transform-origin:50%;grid-area:1/1;transition:transform .25s,opacity .25s}.swap-on{opacity:0}.swap-off,.swap>input:checked~.swap-on{opacity:1}.swap>input:checked~.swap-off{opacity:0}.swap-rotate .swap-off{transform:rotate(0)}.swap-rotate .swap-on{transform:rotate(-45deg)}.swap-rotate>input:checked~.swap-off{opacity:0;transform:rotate(45deg)}.swap-rotate>input:checked~.swap-on{opacity:1;transform:rotate(0)}.swap-flip{perspective:10rem}.swap-flip .swap-off{backface-visibility:hidden;transform:rotateY(0)}.swap-flip .swap-on{backface-visibility:hidden;transform:rotateY(180deg)}.swap-flip>input:checked~.swap-off{transform:rotateY(-180deg)}.swap-flip>input:checked~.swap-on{transform:rotateY(0)}}