1.checkbox {
2  --border-default: #bbbbc1;
3  --border-hover: #9898a3;
4  --active: #6E7BF2;
5  --active-tick: #ffffff;
6  display: block;
7  width: 18px;
8  height: 18px;
9  cursor: pointer;
10  position: relative;
11  -webkit-tap-highlight-color: transparent;
12}
13
14.checkbox svg {
15  display: block;
16  position: absolute;
17}
18
19.checkbox input {
20  display: block;
21  outline: none;
22  border: none;
23  padding: 0;
24  margin: 0;
25  -webkit-appearance: none;
26  width: 18px;
27  height: 18px;
28  border-radius: 36%/36%;
29  box-shadow: inset 0 0 0 1.5px var(--border, var(--border-default));
30  background: var(--background, transparent);
31  transition: background 0.25s linear, box-shadow 0.25s linear;
32}
33
34.checkbox input + svg {
35  width: 21px;
36  height: 18px;
37  left: 0;
38  top: 0;
39  color: var(--active);
40}
41
42.checkbox input + svg .tick {
43  stroke-dasharray: 20;
44  stroke-dashoffset: var(--stroke-dashoffset, 20);
45  transition: stroke-dashoffset 0.2s;
46}
47
48.checkbox input + svg .tick.mask {
49  stroke: var(--active-tick);
50}
51
52.checkbox input + svg + svg {
53  width: 11px;
54  height: 11px;
55  fill: none;
56  stroke: var(--active);
57  stroke-width: 1.25;
58  stroke-linecap: round;
59  top: -6px;
60  right: -10px;
61  stroke-dasharray: 4.5px;
62  stroke-dashoffset: 13.5px;
63  pointer-events: none;
64  -webkit-animation: var(--animation, none) 0.2s ease 0.175s;
65  animation: var(--animation, none) 0.2s ease 0.175s;
66}
67
68.checkbox input:checked {
69  --background: var(--active);
70  --border: var(--active);
71}
72
73.checkbox input:checked + svg {
74  --stroke-dashoffset: 0;
75}
76
77.checkbox input:checked + svg + svg {
78  --animation: check95;
79}
80
81.checkbox:hover input:not(:checked) {
82  --border: var(--border-hover);
83}
84
85@keyframes check95 {
86  100% {
87    stroke-dashoffset: 4.5px;
88  }
89}