1.radio-inputs {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  max-width: 350px;
6  -webkit-user-select: none;
7  -moz-user-select: none;
8  -ms-user-select: none;
9  user-select: none;
10}
11
12.radio-inputs > * {
13  margin: 6px;
14}
15
16.radio-input:checked + .radio-tile {
17  border-color: #2260ff;
18  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
19  color: #2260ff;
20}
21
22.radio-input:checked + .radio-tile:before {
23  transform: scale(1);
24  opacity: 1;
25  background-color: #2260ff;
26  border-color: #2260ff;
27}
28
29.radio-input:checked + .radio-tile .radio-icon svg {
30  fill: #2260ff;
31}
32
33.radio-input:checked + .radio-tile .radio-label {
34  color: #2260ff;
35}
36
37.radio-input:focus + .radio-tile {
38  border-color: #2260ff;
39  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
40}
41
42.radio-input:focus + .radio-tile:before {
43  transform: scale(1);
44  opacity: 1;
45}
46
47.radio-tile {
48  display: flex;
49  flex-direction: column;
50  align-items: center;
51  justify-content: center;
52  width: 80px;
53  min-height: 80px;
54  border-radius: 0.5rem;
55  border: 2px solid #b5bfd9;
56  background-color: #fff;
57  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
58  transition: 0.15s ease;
59  cursor: pointer;
60  position: relative;
61}
62
63.radio-tile:before {
64  content: "";
65  position: absolute;
66  display: block;
67  width: 0.75rem;
68  height: 0.75rem;
69  border: 2px solid #b5bfd9;
70  background-color: #fff;
71  border-radius: 50%;
72  top: 0.25rem;
73  left: 0.25rem;
74  opacity: 0;
75  transform: scale(0);
76  transition: 0.25s ease;
77}
78
79.radio-tile:hover {
80  border-color: #2260ff;
81}
82
83.radio-tile:hover:before {
84  transform: scale(1);
85  opacity: 1;
86}
87
88.radio-icon svg {
89  width: 2rem;
90  height: 2rem;
91  fill: #494949;
92}
93
94.radio-label {
95  color: #707070;
96  transition: 0.375s ease;
97  text-align: center;
98  font-size: 13px;
99}
100
101.radio-input {
102  clip: rect(0 0 0 0);
103  -webkit-clip-path: inset(100%);
104  clip-path: inset(100%);
105  height: 1px;
106  overflow: hidden;
107  position: absolute;
108  white-space: nowrap;
109  width: 1px;
110}