1.cyberpunk-checkbox {
2  appearance: none;
3  width: 20px;
4  height: 20px;
5  border: 2px solid #30cfd0;
6  border-radius: 5px;
7  background-color: transparent;
8  display: inline-block;
9  position: relative;
10  margin-right: 10px;
11  cursor: pointer;
12}
13
14.cyberpunk-checkbox:before {
15  content: "";
16  background-color: #30cfd0;
17  display: block;
18  position: absolute;
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%, -50%) scale(0);
22  width: 10px;
23  height: 10px;
24  border-radius: 3px;
25  transition: all 0.3s ease-in-out;
26}
27
28.cyberpunk-checkbox:checked:before {
29  transform: translate(-50%, -50%) scale(1);
30}
31
32.cyberpunk-checkbox-label {
33  font-size: 18px;
34  color: #fff;
35  cursor: pointer;
36  user-select: none;
37  display: flex;
38  align-items: center;
39}