var n={wrapper:"wrapper_c42ec3f19d",checkbox:"checkbox_7ca9db60af",icon:"icon_2c2c96bd66",label:"label_5bc64c5593",input:"input_4493898e89",checkboxGrowAnimation:"checkboxGrowAnimation_fa1fc2f6c0"};!function(n){const e="s_id-3c767214051a_3_70_5";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable selector-class-pattern */\n.wrapper_c42ec3f19d {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_7ca9db60af {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n.checkbox_7ca9db60af:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n.checkbox_7ca9db60af:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_2c2c96bd66 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_5bc64c5593 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--spacing-small);\n}\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_4493898e89 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_4493898e89:focus + .checkbox_7ca9db60af {\n  border-color: var(--secondary-text-color);\n}\n.input_4493898e89:focus:checked + .checkbox_7ca9db60af {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_4493898e89:focus-visible + .checkbox_7ca9db60af {\n  outline: none;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 2px;\n}\n.input_4493898e89:checked:focus + .checkbox_7ca9db60af:after,\n.input_4493898e89:indeterminate:focus + .checkbox_7ca9db60af:after {\n  background-color: var(--primary-hover-color);\n}\n.input_4493898e89:checked + .checkbox_7ca9db60af,\n.input_4493898e89:indeterminate + .checkbox_7ca9db60af {\n  animation: checkboxGrowAnimation_fa1fc2f6c0 var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_4493898e89:checked + .checkbox_7ca9db60af:hover,\n.input_4493898e89:indeterminate + .checkbox_7ca9db60af:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_4493898e89:checked + .checkbox_7ca9db60af:hover:after,\n.input_4493898e89:indeterminate + .checkbox_7ca9db60af:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_4493898e89:checked + .checkbox_7ca9db60af:after,\n.input_4493898e89:indeterminate + .checkbox_7ca9db60af:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  left: 0;\n}\n.input_4493898e89:checked + .checkbox_7ca9db60af > .icon_2c2c96bd66,\n.input_4493898e89:indeterminate + .checkbox_7ca9db60af > .icon_2c2c96bd66 {\n  visibility: visible;\n}\n.input_4493898e89:checked:disabled + .checkbox_7ca9db60af:after,\n.input_4493898e89:indeterminate:disabled + .checkbox_7ca9db60af:after {\n  background-color: var(--disabled-background-color);\n}\n.input_4493898e89:disabled + .checkbox_7ca9db60af .icon_2c2c96bd66,\n.input_4493898e89:disabled + .checkbox_7ca9db60af:hover .icon_2c2c96bd66 {\n  color: var(--disabled-text-color);\n}\n.input_4493898e89:disabled + .checkbox_7ca9db60af,\n.input_4493898e89:disabled + .checkbox_7ca9db60af:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_4493898e89:disabled ~ .label_5bc64c5593 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_fa1fc2f6c0 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
//# sourceMappingURL=Checkbox.module.scss.js.map
