Radio by andrew-demchenk0

1.wrapper {
2  position: relative;
3  display: flex;
4  flex-direction: row;
5  gap: 10px;
6}
7
8.card {
9  position: relative;
10  width: 150px;
11  height: 100px;
12  background: #fff;
13  border-radius: 10px;
14  transition: all 0.3s;
15}
16
17.card:hover {
18  transform: scale(1.05);
19}
20
21.input {
22  position: relative;
23  top: 0;
24  left: 0;
25  height: 100%;
26  width: 100%;
27  cursor: pointer;
28  appearance: none;
29  border: 1px solid #e5e5e5;
30  border-radius: 10px;
31  z-index: 10;
32  box-shadow: 1px 1px 10px #aaaaaa,
33              -1px -1px 10px #ffffff;
34}
35
36.input + .check::before {
37  content: "";
38  position: absolute;
39  top: 15px;
40  right: 15px;
41  width: 16px;
42  height: 16px;
43  border: 2px solid #d0d0d0;
44  border-radius: 50%;
45  background-color: #E8E8E8;
46}
47
48.input:checked + .check::after {
49  content: '';
50  position: absolute;
51  top: 19px;
52  right: 19px;
53  width: 12px;
54  height: 12px;
55  background-color: rgba(255,0,0,0.7);
56  border-radius: 50%;
57}
58
59.input[value="standart"]:checked + .check::after {
60  background-color: rgba(255,165,0,0.7);
61}
62
63.input[value="premium"]:checked + .check::after {
64  background-color: rgba(0,128,0,0.7);
65}
66
67.input[value="basic"]:checked {
68  border: 1.5px solid rgba(255,0,0,0.7);
69}
70
71.input[value="standart"]:checked {
72  border: 1.5px solid rgba(255,165,0,0.7);
73}
74
75.input[value="premium"]:checked {
76  border: 1.5px solid rgba(0,128,0,0.7);
77}
78
79.label {
80  color: #323232;
81  position: absolute;
82  top: 0;
83  left: 0;
84  z-index: 0;
85}
86
87.label .title {
88  margin: 15px 0 0 15px;
89  font-weight: 900;
90  font-size: 15px;
91  letter-spacing: 1.5px;
92}
93
94.label .price {
95  margin: 20px 0 0 15px;
96  font-size: 20px;
97  font-weight: 900;
98}
99
100.label .span {
101  color: gray;
102  font-weight: 700;
103  font-size: 15px;
104}
105