var n={radioButton:"radioButton",inputContainer:"inputContainer",input:"input",control:"control",labelAnimation:"labelAnimation",radioCheckedAnimation:"radioCheckedAnimation",disabled:"disabled",label:"label"};!function(n){const o="s_id-f0fb17b54d8d_3_70_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const i=document.createElement("style");i.id=o,e.firstChild?e.insertBefore(i,e.firstChild):e.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable unit-disallowed-list */\n.radioButton {\n  display: grid;\n  grid-template-columns: 1.5em auto;\n  grid-gap: 0.5em;\n  cursor: pointer;\n}\n.inputContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n}\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  height: 1em;\n  border: 0.1em solid;\n  box-sizing: border-box;\n  border-color: var(--ui-border-color);\n  border-radius: 50%;\n  transition: border-width var(--motion-productive-medium) var(--motion-timing-enter);\n  background-color: var(--secondary-background-color);\n}\ninput:checked + .control {\n  border-color: var(--primary-color);\n  border-width: 0.3em;\n}\ninput:checked + .labelAnimation {\n  animation-name: radioCheckedAnimation;\n  animation-duration: var(--motion-productive-medium);\n  animation-timing-function: var(--motion-timing-enter);\n  animation-fill-mode: forwards;\n}\ninput:disabled + .control {\n  border: 0.5em solid;\n  border-color: var(--disabled-background-color);\n  border-radius: 50%;\n}\ninput:checked:disabled + .control {\n  border: 0.3em solid;\n  border-color: var(--disabled-background-color);\n  background-color: var(--secondary-text-color);\n}\n.radioButton.disabled {\n  cursor: not-allowed;\n}\n.radioButton.disabled .label {\n  color: var(--disabled-text-color);\n}\n.inputContainer input:focus-visible + .control {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 50%;\n}\n.radioButton:hover .inputContainer input:enabled:checked + .control {\n  border-color: var(--primary-hover-color);\n}\n.radioButton:hover .inputContainer input:enabled:not(:checked) + .control,\n.radioButton:focus-within .inputContainer input:enabled:not(:checked) + .control {\n  border-color: var(--primary-text-color);\n}\n@keyframes radioCheckedAnimation {\n  0% {\n    height: 1em;\n    width: 1em;\n  }\n  50% {\n    height: 0.8em;\n    width: 0.8em;\n  }\n  100% {\n    height: 1em;\n    width: 1em;\n  }\n}");export{n as default};
//# sourceMappingURL=RadioButton.module.scss.js.map
