1.radio-input {
2  display: flex;
3  flex-direction: row;
4  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
5  font-size: 16px;
6  font-weight: 600;
7}
8
9.radio-input input[type="radio"] {
10  display: none;
11}
12
13.radio-input label {
14  display: flex;
15  align-items: center;
16  padding: 10px;
17  border: 1px solid #ccc;
18  background-color: #212121;
19  border-radius: 5px;
20  margin-right: 12px;
21  cursor: pointer;
22  position: relative;
23  transition: all 0.3s ease-in-out;
24}
25
26.radio-input label:before {
27  content: "";
28  display: block;
29  position: absolute;
30  top: 50%;
31  left: 0;
32  transform: translate(-50%, -50%);
33  width: 10px;
34  height: 10px;
35  border-radius: 50%;
36  background-color: #fff;
37  border: 2px solid #ccc;
38  transition: all 0.3s ease-in-out;
39}
40
41.radio-input input[type="radio"]:checked + label:before {
42  background-color: green;
43  top: 0;
44}
45
46.radio-input input[type="radio"]:checked + label {
47  background-color: royalblue;
48  color: #fff;
49  border-color: rgb(129, 235, 129);
50  animation: radio-translate 0.5s ease-in-out;
51}
52
53@keyframes radio-translate {
54  0% {
55    transform: translateX(0);
56  }
57
58  50% {
59    transform: translateY(-10px);
60  }
61
62  100% {
63    transform: translateX(0);
64  }
65}
66