1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7.radio-tile-group {
8  display: flex;
9  flex-wrap: wrap;
10  justify-content: center;
11}
12
13.radio-tile-group .input-container {
14  position: relative;
15  height: 80px;
16  width: 80px;
17  margin: 0.5rem;
18}
19
20.radio-tile-group .input-container .radio-button {
21  opacity: 0;
22  position: absolute;
23  top: 0;
24  left: 0;
25  height: 100%;
26  width: 100%;
27  margin: 0;
28  cursor: pointer;
29}
30
31.radio-tile-group .input-container .radio-tile {
32  display: flex;
33  flex-direction: column;
34  align-items: center;
35  justify-content: center;
36  width: 100%;
37  height: 100%;
38  border: 2px solid #079ad9;
39  border-radius: 5px;
40  padding: 1rem;
41  transition: transform 300ms ease;
42}
43
44.radio-tile-group .input-container .icon svg {
45  fill: #079ad9;
46  width: 2rem;
47  height: 2rem;
48}
49
50.radio-tile-group .input-container .radio-tile-label {
51  text-align: center;
52  font-size: 0.75rem;
53  font-weight: 600;
54  text-transform: uppercase;
55  letter-spacing: 1px;
56  color: #079ad9;
57}
58
59.radio-tile-group .input-container .radio-button:checked + .radio-tile {
60  background-color: #079ad9;
61  border: 2px solid #079ad9;
62  color: white;
63  transform: scale(1.1, 1.1);
64}
65
66.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
67  fill: white;
68  background-color: #079ad9;
69}
70
71.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
72  color: white;
73  background-color: #079ad9;
74}
75