1/* Hide the default checkbox */
2.container input {
3  opacity: 0;
4  cursor: pointer;
5  width: 0;
6  height: 0;
7}
8
9.container {
10  display: block;
11  position: relative;
12  cursor: pointer;
13  font-size: 20px;
14  user-select: none;
15  width: 30px;
16  height: 30px;
17  border-radius: 3px;
18  background: rgba(216, 216, 216, 0.603);
19}
20
21.container:hover {
22  background: rgba(197, 197, 197, 0.527);
23}
24
25.line {
26  width: calc(100% - 8px);
27  height: 3px;
28  left: 4px;
29  background: rgb(58, 58, 58);
30  position: absolute;
31  top: 50%;
32  transform: translateY(-50%);
33  transition: .7s transform cubic-bezier(0,1,.33,1.2), background .4s;
34}
35
36.line-indicator {
37  transform: translateY(-50%) rotate(90deg);
38}
39
40.container input:checked ~ .line-indicator {
41  transform: translateY(-50%);
42}