1.radio {
2  background: #454857;
3  padding: 4px;
4  border-radius: 3px;
5  box-shadow: inset 0 0 0 3px rgba(35, 33, 45, 0.3),
6		0 0 0 3px rgba(185, 185, 185, 0.3);
7  position: relative;
8}
9
10.radio input {
11  width: auto;
12  height: 100%;
13  -webkit-appearance: none;
14  -moz-appearance: none;
15  appearance: none;
16  outline: none;
17  cursor: pointer;
18  border-radius: 2px;
19  padding: 4px 8px;
20  background: #454857;
21  color: #bdbdbdbd;
22  font-size: 14px;
23  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
24		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
25		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
26  transition: all 100ms linear;
27}
28
29.radio input:checked {
30  background-image: linear-gradient(180deg, #95d891, #74bbad);
31  color: #fff;
32  box-shadow: 0 1px 1px #0000002e;
33  text-shadow: 0 1px 0px #79485f7a;
34}
35
36.radio input:before {
37  content: attr(label);
38  display: inline-block;
39  text-align: center;
40  width: 100%;
41}
42