1.container {
2  --input-focus: #2d8cf0;
3  --input-out-of-focus: #ccc;
4  --bg-color: #fff;
5  --bg-color-alt: #666;
6  --main-color: #323232;
7  position: relative;
8  cursor: pointer;
9}
10
11.container input {
12  position: absolute;
13  opacity: 0;
14}
15
16.checkmark {
17  width: 30px;
18  height: 30px;
19  position: relative;
20  top: 0;
21  left: 0;
22  border: 2px solid var(--main-color);
23  border-radius: 5px;
24  box-shadow: 1px var(--main-color);
25  background-color: var(--input-out-of-focus);
26  transition: all 0.3s;
27}
28
29.container input:checked ~ .checkmark {
30  background-color: var(--input-focus);
31}
32
33.checkmark:after {
34  content: "";
35  width: 7px;
36  height: 15px;
37  position: absolute;
38  top: 2px;
39  left: 9px;
40  display: none;
41  border: solid var(--bg-color);
42  border-width: 0 2.5px 2.5px 0;
43  transform: rotate(45deg);
44}
45
46.container input:checked ~ .checkmark:after {
47  display: block;
48}
49