{"clientId":"4d4f3421-19a4-492a-b59b-f7f195aa7b05","name":"cwicly/div","isValid":true,"originalContent":"<button data-action=\"dark-mode\" aria-label=\"Toggle Dark Mode\"></button>","validationIssues":[],"attributes":{"has_parent":true,"skeletonActive":true,"htmlAttributes":[],"relativeStyles":[],"uniqueID":"407c94cb-719f-4bf7-8131-139092687044","hideConditions":[],"hideConditionsType":"&&","classID":"div-c687044","id":"div-c407c94","additionalClassesR":"","customCSS":"","interactions":{"click":[],"dbclick":[],"scrollinview":[]},"linkWrapperActive":true,"linkWrapperType":"action","linkWrapperSourceType":"static","linkWrapperAction":"toggleDarkMode","backgroundClipPathBlob":true,"backgroundClipType":"polygon","backgroundClipChanged":"false","backgroundVideoSource":"mp4","fontGlobalStyle":1,"fontLocation":"google","containerLayoutTag":"button","separatorTypeTop":"waves1","separatorTypeBottom":"waves1","effectsTiltTransition":true,"effectsTiltReset":true},"innerBlocks":[{"clientId":"82539eec-bdd6-49ab-83a5-1256e18d6804","name":"cwicly/code","isValid":true,"originalContent":"","validationIssues":[],"attributes":{"skeletonActive":true,"showBlock":true,"code":"<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"sun-and-moon\" aria-hidden=\"true\" width=\"24\"\n    height=\"24\" viewBox=\"0 0 24 24\">\n    <mask class=\"moon\" id=\"moon-mask\">\n        <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n        <circle cx=\"24\" cy=\"10\" r=\"6\" fill=\"black\" />\n    </mask>\n    <circle class=\"sun\" cx=\"12\" cy=\"12\" r=\"6\" mask=\"url(#moon-mask)\" fill=\"currentColor\" />\n    <g class=\"sun-beams\" stroke=\"currentColor\">\n        <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n        <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n        <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n        <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n        <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n        <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n        <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n        <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n    </g>\n</svg>","codeRender":"<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"sun-and-moon\" aria-hidden=\"true\" width=\"24\"\n    height=\"24\" viewBox=\"0 0 24 24\">\n    <mask class=\"moon\" id=\"moon-mask\">\n        <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n        <circle cx=\"24\" cy=\"10\" r=\"6\" fill=\"black\" />\n    </mask>\n    <circle class=\"sun\" cx=\"12\" cy=\"12\" r=\"6\" mask=\"url(#moon-mask)\" fill=\"currentColor\" />\n    <g class=\"sun-beams\" stroke=\"currentColor\">\n        <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n        <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n        <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n        <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n        <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n        <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n        <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n        <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n    </g>\n</svg>","codeCSS":"@import \"https://unpkg.com/open-props/easings.min.css\";\n\n.sun-and-moon {\n  pointer-events: none;\n}\n\n.sun-and-moon> :is(.moon, .sun, .sun-beams) {\n  transform-origin: center;\n}\n\n.sun-and-moon>.sun-beams {\n  stroke: currentColor;\n  stroke-width: 2px;\n}\n\n.dark .sun-and-moon>.sun {\n  transform: scale(1.75);\n}\n\n.dark .sun-and-moon>.sun-beams {\n  opacity: 0;\n}\n\n.dark .sun-and-moon>.moon>circle {\n  transform: translateX(-7px);\n}\n\n@supports (cx: 1) {\n  .dark .sun-and-moon>.moon>circle {\n    cx: 17;\n    transform: translateX(0);\n  }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .sun-and-moon>.sun {\n    transition: transform .5s var(--ease-elastic-3);\n  }\n\n  .sun-and-moon>.sun-beams {\n    transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);\n  }\n\n  .sun-and-moon .moon>circle {\n    transition: transform .25s var(--ease-out-5);\n  }\n\n  @supports (cx: 1) {\n    .sun-and-moon .moon>circle {\n      transition: cx .25s var(--ease-out-5);\n    }\n  }\n\n  .dark .sun-and-moon>.sun {\n    transition-timing-function: var(--ease-3);\n    transition-duration: .25s;\n    transform: scale(1.75);\n  }\n\n  .dark .sun-and-moon>.sun-beams {\n    transition-duration: .15s;\n    transform: rotateZ(-25deg);\n  }\n\n  .dark .sun-and-moon>.moon>circle {\n    transition-duration: .5s;\n    transition-delay: .25s;\n  }\n}","hideConditions":[],"hideConditionsType":"&&"},"innerBlocks":[]}]}