Radio by escannord

1.radio-input input {
2  display: none;
3}
4
5.radio-input label {
6  --border-color: #a1b0d8;
7
8  border: 1px solid var(--border-color);
9  border-radius: 6px;
10  min-width: 5rem;
11  margin: 1rem;
12  padding: 1rem;
13  display: flex;
14  justify-content: space-between;
15  position: relative;
16  align-items: center;
17}
18
19.radio-input input:checked + label {
20  --border-color: #2f64d8;
21  border-color: var(--border-color);
22  border-width: 2px;
23}
24.radio-input label:hover {
25  --border-color: #2f64d8;
26  border-color: var(--border-color);
27}
28
29.radio-input {
30  display: flex;
31  justify-content: space-between;
32  align-items: center;
33  flex-direction: column;
34}
35
36.circle {
37  display: inline-block;
38  width: 20px;
39  height: 20px;
40  border-radius: 50%;
41  background-color: rgb(189, 187, 207);
42  margin-right: 0.5rem;
43  position: relative;
44}
45
46.radio-input input:checked + label span.circle::before {
47  content: "";
48  display: inline;
49  position: absolute;
50  top: 50%;
51  left: 50%;
52  transform: translate(-50%, -50%);
53  background-color: #2f64d8;
54  width: 15px;
55  height: 15px;
56  border-radius: 50%;
57}
58.text {
59  display: flex;
60  align-items: center;
61}
62
63.price {
64  display: flex;
65  flex-direction: column;
66  text-align: right;
67  font-weight: bold;
68}
69
70.small {
71  font-size: 10px;
72  color: rgb(136, 138, 139);
73  font-weight: 100;
74}
75
76.info {
77  position: absolute;
78  display: inline-block;
79  font-size: 11px;
80  background-color: rgb(31, 236, 123);
81  border-radius: 20px;
82  padding: 1px 9px;
83  top: 0;
84  transform: translateY(-50%);
85  right: 5px;
86}
87