1.radio-input {
2  scale: 2;
3}
4
5.radio-input input[type="radio"] {
6  position: absolute;
7  opacity: 0;
8  width: 0;
9  height: 0;
10}
11
12.radio-input label {
13  position: relative;
14  display: inline-block;
15  margin: 5px;
16  cursor: pointer;
17}
18
19.radio-input label::before {
20  content: "";
21  display: inline-block;
22  box-sizing: border-box;
23  width: 20px;
24  height: 20px;
25  margin-right: 10px;
26  border-radius: 50%;
27  border: 1px solid #f35;
28  box-shadow: 0px 0px 5px -1px rgb(255, 51, 85) inset,0px 0px 5px -1px rgb(255, 51, 85);
29}
30
31.radio-input input[type="radio"]:checked + label::before {
32  background-color: #f35;
33}
34
35.radio-input ::after {
36  content: "";
37  display: inline-block;
38  position: absolute;
39  top: 60%;
40  left: 60%;
41  transform: translate(-50%, -50%) scale(0);
42  width: 10px;
43  height: 10px;
44  border-radius: 50%;
45  background-image: radial-gradient(
46    farthest-corner at 40px 40px,
47    rgb(134, 14, 34) 80%,
48    rgb(20, 11, 116) 100%);
49  box-shadow: 0px 0px 5px -1px #f35 inset,0px 0px 5px -1px #f35;
50  scale: 1.2;
51  transition: transform 0.25s ease-in-out;
52}
53
54.radio-input label:hover::before {
55  background-image: radial-gradient(
56    farthest-corner at 40px 40px,
57    #f35 50%,
58    #43e 100%);
59  border: 0px;
60  box-shadow: 0px 0px 5px -1px #43e inset,0px 0px 5px -1px #43e;
61}
62
63.radio-input label:hover::after {
64  transform: translate(-50%, -50%) scale(1.5);
65}
66
67
68
69