{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":37,"projects":[{"created":"2024-01-22T17:18:05.000Z","isPrivate":0,"projectId":"53c52f","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:05.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":279,"jsLen":0,"cssLen":952,"pureCSS":1,"html":"\n \n \n Option 1\n\n\n\n \n \n Option 2\n\n","css":".radio-button {\n display: flex;\n gap: 10px;\n justify-content: center;\n margin: 10px;\n position: relative;\n align-items: center;\n color: white;\n}\n\n.radio-button input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n}\n\n.radio {\n position: relative;\n display: inline-block;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n border: 2px solid #ccc;\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);\n transform: translateZ(-25px);\n transition: all 0.3s ease-in-out;\n}\n\n.radio::before {\n position: absolute;\n content: '';\n width: 10px;\n height: 10px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n background-color: #fff;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);\n opacity: 0;\n transition: all 0.3s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio {\n border-color: #5cb85c;\n transform: translateZ(0px);\n background-color: #fff;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio::before {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:18:05.000Z","isPrivate":0,"projectId":"b53bf4","snapshot":null,"tags":null,"title":"radio by JaydipPrajapati1910","updated":"2024-01-22T17:18:05.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":358,"jsLen":0,"cssLen":739,"pureCSS":1,"html":"

\n \n

\n\n\n\n","css":".radio-input {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.radio-input input {\n appearance: none;\n width: 2em;\n height: 2em;\n background-color: #171717;\n box-shadow: inset 2px 5px 10px rgb(5, 5, 5);\n border-radius: 50%;\n transition: .4s ease-in-out;\n}\n\n.radio-input input:hover {\n scale: 1.2;\n cursor: pointer;\n box-shadow: none;\n}\n\n.radio-input .circle {\n position: relative;\n top: 0.01em;\n left: -1.1em;\n width: 0.6em;\n height: 0.6em;\n background-color: yellow;\n scale: 0;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.radio-input input:checked {\n box-shadow: none;\n border: 1px solid yellow;\n}\n\n.radio-input input:checked + .circle {\n transform: rotate(360deg);\n scale: 1;\n}\n\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"0c9e3e","snapshot":null,"tags":null,"title":"radio by andrew-demchenk0","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":2372,"jsLen":0,"cssLen":560,"pureCSS":1,"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".theme-switcher {\n padding: 3px;\n width: -moz-fit-content;\n width: fit-content;\n display: flex;\n border-radius: 9999px;\n border: 1px solid grey;\n}\n\n.theme-switcher_switch {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: inherit;\n border: 0;\n background: none;\n cursor: pointer;\n}\n\n.theme-switcher_switch:hover > .icon {\n stroke: #323232;\n}\n\n.theme-switcher_switch:active {\n background-color: rgba(128, 128, 128, 0.35);\n}\n\n.theme-switcher_switch:active > .icon {\n stroke: white;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"555109","snapshot":null,"tags":null,"title":"radio by gharsh11032000","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":750,"jsLen":0,"cssLen":1097,"pureCSS":1,"html":"

\n \n \n \n React\n \n

\n \n \n \n Angular\n \n

\n \n \n \n Vue\n \n

","css":".radio-button-container {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n\n.radio-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n}\n\n.radio-button__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.radio-button__label {\n display: inline-block;\n padding-left: 30px;\n margin-bottom: 10px;\n position: relative;\n font-size: 15px;\n color: #f2f2f2;\n font-weight: 600;\n cursor: pointer;\n text-transform: uppercase;\n transition: all 0.3s ease;\n}\n\n.radio-button__custom {\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #555;\n transition: all 0.3s ease;\n}\n\n.radio-button__input:checked + .radio-button__label .radio-button__custom {\n background-color: #4c8bf5;\n border-color: transparent;\n transform: scale(0.8);\n box-shadow: 0 0 20px #4c8bf580;\n}\n\n.radio-button__input:checked + .radio-button__label {\n color: #4c8bf5;\n}\n\n.radio-button__label:hover .radio-button__custom {\n transform: scale(1.2);\n border-color: #4c8bf5;\n box-shadow: 0 0 20px #4c8bf580;\n}\n\n\n\n\n\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"6b7100","snapshot":null,"tags":null,"title":"radio by HARIPRASAD-2003","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":7039,"jsLen":0,"cssLen":759,"pureCSS":1,"html":"

\n \n \n \n \n \n

\n","css":".input {\n display: flex;\n flex-direction: column;\n width: 200px;\n background-color: #0d1117;\n justify-content: center;\n border-radius: 5px;\n}\n\n.value {\n background-color: transparent;\n border: none;\n padding: 10px;\n color: white;\n display: flex;\n position: relative;\n gap: 5px;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.value:not(:active):hover,\n.value:focus {\n background-color: #21262c;\n}\n\n.value:focus,\n.value:active {\n background-color: #1a1f24;\n outline: none;\n}\n\n.value::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -10px;\n width: 5px;\n height: 80%;\n background-color: #2f81f7;\n border-radius: 5px;\n opacity: 0;\n}\n\n.value:focus::before,\n.value:active::before {\n opacity: 1;\n}\n\n.value svg {\n width: 15px;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"a32ae4","snapshot":null,"tags":null,"title":"radio by 3bdel3ziz-T","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":4703,"jsLen":0,"cssLen":1027,"pureCSS":1,"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"section {\n --col-orange: #d17842;\n --col-dark: #0c0f14;\n --col-darkGray: #52555a;\n --col-gray: #aeaeae;\n\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n background-color: var(--col-dark);\n border-radius: 30px;\n}\n.label {\n padding: 8px 18px;\n transition: all 200ms;\n display: inline-block;\n}\n\n.label input[type=\"radio\"] {\n display: none;\n}\n.label > svg {\n transition: all 200ms;\n fill: var(--col-gray);\n width: 14px;\n}\n.label:hover:not(:has(input:checked)) > svg {\n fill: #d17842;\n opacity: 0.6;\n}\n.label::before {\n content: \"\";\n display: block;\n width: 0%;\n height: 2px;\n border-radius: 5px;\n position: relative;\n left: 50%;\n top: 20px;\n background: var(--col-orange);\n transition: all 200ms;\n}\n.label > svg {\n transition: 300ms;\n fill: var(--col-darkGray);\n margin-top: 0;\n}\n.label:has(input:checked) > svg {\n fill: var(--col-orange);\n scale: 1.2;\n margin-top: -5px;\n}\n\n.label:has(input:checked)::before {\n width: 100%;\n left: 0;\n top: 25px;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"b132d7","snapshot":null,"tags":null,"title":"radio by andrew-demchenk0","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":551,"jsLen":0,"cssLen":912,"pureCSS":1,"html":"

\n \n

\n Option\n

\n \n

\n Option\n

\n \n

\n Option\n

\n","css":".wrapper {\n --font-color-dark: #fefefe;\n --font-color-light: #111;\n --bg-color: #111;\n --main-color: #fefefe;\n position: relative;\n width: 250px;\n height: 36px;\n background-color: var(--bg-color);\n border: 2px solid var(--main-color);\n border-radius: 34px;\n display: flex;\n flex-direction: row;\n box-shadow: 4px 4px var(--main-color);\n}\n\n.option {\n width: 80.5px;\n height: 28px;\n position: relative;\n top: 2px;\n left: 2px;\n}\n\n.input {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.btn {\n width: 100%;\n height: 100%;\n background-color: var(--bg-color);\n border-radius: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span {\n color: var(--font-color-dark);\n}\n\n.input:checked + .btn {\n background-color: var(--main-color);\n}\n\n.input:checked + .btn .span {\n color: var(--font-color-light);\n}"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"b7b211","snapshot":null,"tags":null,"title":"radio by shadowfax29","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":472,"jsLen":0,"cssLen":2666,"pureCSS":1,"html":"

\n \n

\n EARTH\n

\n \n

\n MARS\n

\n \n

\n MOON\n

","css":".radio-inputs {\n display: flex;\n flex-wrap: wrap;\n border-radius: 0.5rem;\n background-color: rgba(255, 255, 255, 0.074);\n box-sizing: border-box;\n box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);\n padding: 0.25rem;\n width: 210px;\n height: 40px;\n font-size: 14px;\n box-size: border-box;\n}\n\n.obj1 {\n content: '';\n position: absolute;\n width: 100px;\n height: 100px;\n filter: blur(4px);\n z-index: -5;\n background: linear-gradient(blue,rgb(224, 107, 224));\n border-radius: 50%;\n overflow: hidden;\n} /* adjust position accordingly */\n\n.obj2 {\n content: '';\n position: absolute;\n width: 80px;\n height: 80px;\n filter: blur(4px);\n z-index: -5;\n background: linear-gradient(red,orange);\n border-radius: 50%;\n} /* adjust position accordingly */\n\n.obj3 {\n content: '';\n position: absolute;\n width: 60px;\n height: 60px;\n filter: blur(4px);\n z-index: -5;\n background-color: grey;\n border-radius: 50%;\n} /* adjust position accordingly */\n\n.radio1 , .radio2 , .radio3 {\n flex: 1;\n width: 70px;\n height: 30px;\n}\n\n.radio1 input ,\n.radio2 input ,\n.radio3 input {\n width: 30px;\n height: 30px;\n appearance: none;\n z-index: 2;\n cursor: pointer;\n margin-left: 22px;\n}\n\n.radio1 .name ,\n\n.radio2 .name ,\n\n.radio3 .name {\n display: flex;\n position: relative;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n bottom: 2.6em;\n padding: .5rem 0;\n color: rgba(51, 65, 85, 1);\n transition: all .15s ease-in-out;\n font-weight: 200;\n height: 40px;\n z-index: -2;\n}\n\n.radio1 input:checked ~ .name {\n color: white;\n background: linear-gradient(blue,green);\n font-weight: 600;\n}\n\n.radio2 input:checked ~ .name {\n color: white;\n background: linear-gradient(red,orange);\n font-weight: 600;\n}\n\n.radio3 input:checked ~ .name {\n color: white;\n background-color: grey;\n font-weight: 600;\n}\n\n#one input:checked ~ .obj1,\n#two input:checked ~ .obj2 ,\n#three input:checked ~ .obj3 {\n animation: shake 1s;\n animation-fill-mode: forwards;\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0);\n }\n\n 10% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 20% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 30% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 40% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 50% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 60% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 70% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 80% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 90% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 100% {\n transform: translateX(0) rotate(0);\n }\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"d3859a","snapshot":null,"tags":null,"title":"radio by 3bdel3ziz-T","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1200,"jsLen":0,"cssLen":1753,"pureCSS":1,"html":"

\n \n \n \n \n

\n \n \n

\n\n","css":".select {\n width: fit-content;\n cursor: pointer;\n position: relative;\n transition: 300ms;\n color: white;\n overflow: hidden;\n}\n\n.selected {\n background-color: #2a2f3b;\n padding: 5px;\n margin-bottom: 3px;\n border-radius: 5px;\n position: relative;\n z-index: 100000;\n font-size: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.arrow {\n position: relative;\n right: 0px;\n height: 10px;\n transform: rotate(-90deg);\n width: 25px;\n fill: white;\n z-index: 100000;\n transition: 300ms;\n}\n\n.options {\n display: flex;\n flex-direction: column;\n border-radius: 5px;\n padding: 5px;\n background-color: #2a2f3b;\n position: relative;\n top: -100px;\n opacity: 0;\n transition: 300ms;\n}\n\n.select:hover > .options {\n opacity: 1;\n top: 0;\n}\n\n.select:hover > .selected .arrow {\n transform: rotate(0deg);\n}\n\n.option {\n border-radius: 5px;\n padding: 5px;\n transition: 300ms;\n background-color: #2a2f3b;\n width: 150px;\n font-size: 15px;\n}\n.option:hover {\n background-color: #323741;\n}\n\n.options input[type=\"radio\"] {\n display: none;\n}\n\n.options label {\n display: inline-block;\n}\n.options label::before {\n content: attr(data-txt);\n}\n\n.options input[type=\"radio\"]:checked + label {\n display: none;\n}\n\n.options input[type=\"radio\"]#all:checked + label {\n display: none;\n}\n\n.select:has(.options input[type=\"radio\"]#all:checked) .selected::before {\n content: attr(data-default);\n}\n.select:has(.options input[type=\"radio\"]#option-1:checked) .selected::before {\n content: attr(data-one);\n}\n.select:has(.options input[type=\"radio\"]#option-2:checked) .selected::before {\n content: attr(data-two);\n}\n.select:has(.options input[type=\"radio\"]#option-3:checked) .selected::before {\n content: attr(data-three);\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"d5b90f","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":293,"jsLen":0,"cssLen":2452,"pureCSS":1,"html":"\n","css":".form {\n --background: #ffffff;\n --text: #414856;\n --radio: #7C96B2;\n --radio-checked: #4F29F0;\n --radio-size: 20px;\n --width: 150px;\n --height: 140px;\n --border-radius: 10px;\n background: var(--background);\n width: var(--width);\n height: var(--height);\n border-radius: var(--border-radius);\n color: var(--text);\n position: relative;\n box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);\n padding: 30px 20px;\n display: grid;\n grid-template-columns: auto var(--radio-size);\n align-items: center;\n}\n\n.form label {\n cursor: pointer;\n}\n\n.form input[type=\"radio\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n height: var(--radio-size);\n width: var(--radio-size);\n outline: none;\n margin: 0;\n cursor: pointer;\n border: 2px solid var(--radio);\n background: transparent;\n border-radius: 50%;\n display: grid;\n justify-self: end;\n justify-items: center;\n align-items: center;\n overflow: hidden;\n transition: border .5s ease;\n}\n\n.form input[type=\"radio\"]::before, .form input[type=\"radio\"]::after {\n content: \"\";\n display: flex;\n justify-self: center;\n border-radius: 50%;\n}\n\n.form input[type=\"radio\"]::before {\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--background);\n z-index: 1;\n opacity: var(--opacity, 1);\n}\n\n.form input[type=\"radio\"]::after {\n position: relative;\n width: calc(100% /2);\n height: calc(100% /2);\n background: var(--radio-checked);\n top: var(--y, 100%);\n transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);\n}\n\n.form input[type=\"radio\"]:checked {\n --radio: var(--radio-checked);\n}\n\n.form input[type=\"radio\"]:checked::after {\n --y: 0%;\n animation: stretch-animate .3s ease-out .17s;\n}\n\n.form input[type=\"radio\"]:checked::before {\n --opacity: 0;\n}\n\n.form input[type=\"radio\"]:checked ~ input[type=\"radio\"]::after {\n --y: -100%;\n}\n\n.form input[type=\"radio\"]:not(:checked)::before {\n --opacity: 1;\n transition: opacity 0s linear .5s;\n}\n\n@keyframes stretch-animate {\n 0% {\n transform: scale(1, 1);\n }\n\n 28% {\n transform: scale(1.15, 0.85);\n }\n\n 50% {\n transform: scale(0.9, 1.1);\n }\n\n 100% {\n transform: scale(1, 1);\n }\n}\n\n.socials {\n position: fixed;\n display: block;\n left: 20px;\n bottom: 20px;\n}\n\n.socials > a {\n display: block;\n width: 30px;\n opacity: .2;\n transform: scale(var(--scale, 0.8));\n transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);\n}\n\n.socials > a:hover {\n --scale: 1;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"fe3dfc","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1733,"jsLen":0,"cssLen":1330,"pureCSS":1,"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

","css":".radio-input {\n background-color: #fff;\n padding: 20px;\n border-radius: 20px;\n display: flex;\n}\n\n.radio-input input[type=radio] {\n display: none;\n}\n\n.radio-input input[type=radio] + label {\n color: #333;\n font-family: Arial, sans-serif;\n font-size: 14px;\n}\n\n.radio-input input[type=radio] + label span {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: -1px 4px 0 0;\n vertical-align: middle;\n cursor: pointer;\n border-radius: 50%;\n border: 2px solid #FFFFFF;\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);\n background-repeat: no-repeat;\n background-position: center;\n text-align: center;\n line-height: 44px;\n}\n\n.radio-input input[type=radio] + label span svg {\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n.radio-input input[type=radio]#color-1 + label span {\n background-color: #2ecc71;\n}\n\n.radio-input input[type=radio]#color-2 + label span {\n background-color: #3498db;\n}\n\n.radio-input input[type=radio]#color-3 + label span {\n background-color: #f1c40f;\n}\n\n.radio-input input[type=radio]:checked + label span svg {\n opacity: 1;\n}\n\n.radio-input:has(input[type=radio]#color-1:checked) {\n background-color: #2ecc71;\n}\n\n.radio-input:has(input[type=radio]#color-2:checked) {\n background-color: #3498db;\n}\n\n.radio-input:has(input[type=radio]#color-3:checked) {\n background-color: #f1c40f;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"84fe46","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":2583,"jsLen":0,"cssLen":1472,"pureCSS":1,"html":"

\n \n

\n Walk\n

\n\n

\n \n

\n Bike\n

\n\n

\n \n

\n Drive\n

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.radio-tile-group {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.radio-tile-group .input-container {\n position: relative;\n height: 80px;\n width: 80px;\n margin: 0.5rem;\n}\n\n.radio-tile-group .input-container .radio-button {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n margin: 0;\n cursor: pointer;\n}\n\n.radio-tile-group .input-container .radio-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border: 2px solid #079ad9;\n border-radius: 5px;\n padding: 1rem;\n transition: transform 300ms ease;\n}\n\n.radio-tile-group .input-container .icon svg {\n fill: #079ad9;\n width: 2rem;\n height: 2rem;\n}\n\n.radio-tile-group .input-container .radio-tile-label {\n text-align: center;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile {\n background-color: #079ad9;\n border: 2px solid #079ad9;\n color: white;\n transform: scale(1.1, 1.1);\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {\n fill: white;\n background-color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {\n color: white;\n background-color: #079ad9;\n}\n"}]}},"actionData":null,"errors":null}