update src/components/Checkbox/index.js and src/components/Checkbox/index.scss

src/components/Checkbox/index.js

@@ -16,16 +16,20 @@ export default function Checkbox(props) {
       </svg>
 
       <div
-        className="checkbox-container flex flex-wrap justify-center items-center border-box"
+        className="checkbox-container flex flex-wrap justify-center items-center hover:bg-inherit border-box"
         style={{ color: "#000", height: "30px" }}
       >
         <input
-          className="checkbox-input"
+          className="checkbox-input absolute hidden"
           id="apples"
           type="checkbox"
           checked={props.checked}
         />
-        <label className="checkbox" htmlFor="apples">
+        <label
+          className="checkbox flex rounded-sm transition-all duration-100 cursor-pointer select-none overflow-hidden"
+          style={{ padding: "6px 8px" }}
+          htmlFor="apples"
+        >
           <span>
             <svg width="12px" height="10px">
               <use xlinkHref="#check"></use>

src/components/Checkbox/index.scss

@@ -2,29 +2,10 @@
   box-sizing: border-box;
 }
 
-.checkbox-input {
-  position: absolute;
-  visibility: hidden;
-}
-
-.checkbox {
-  user-select: none;
-  cursor: pointer;
-  padding: 6px 8px;
-  border-radius: 6px;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  display: flex;
-}
-
 .checkbox:not(:last-child) {
   margin-right: 6px;
 }
 
-.checkbox:hover {
-  background: inherit;
-}
-
 .checkbox span {
   vertical-align: middle;
   transform: translate3d(0, 0, 0);