.selector {
display
: flex;
flex-
direction
: column;
}
.choice {
margin
:
10px
0
10px
0
;
display
: flex;
align-items:
center
;
}
.choice>div {
position
:
relative
;
width
:
41px
;
height
:
41px
;
margin-right
:
15px
;
}
.choice-
circle
{
appearance:
none
;
height
:
100%
;
width
:
100%
;
border-radius:
100%
;
border-width
:
9px
;
border-style
:
solid
;
border-color
: rgba(
245
,
245
,
245
,
0.45
);
cursor
:
pointer
;
}
.ball {
z-index
:
1
;
position
:
absolute
;
inset:
0px
;
transform: translate(
6px
,
3px
);
box-shadow: rgba(
0
,
0
,
0
,
0.17
)
0px
-10px
10px
0px
inset
,
rgba(
247
,
14
,
14
,
0.09
)
0px
4px
2px
,
rgba(
0
,
0
,
0
,
0.09
)
0px
8px
4px
,
rgba(
10
,
142
,
160
,
0.09
)
0px
16px
8px
,
rgba(
17
,
107
,
167
,
0.09
)
0px
32px
16px
,
0px
-1px
15px
-8px
rgba(
13
,
106
,
228
,
0.09
);
border-radius:
100%
;
transition: transform
800
ms cubic-bezier(
1
,
-0.4
,
0
,
1.4
);
background-color
:
rgb
(
250
,
245
,
245
);
}
.choice-circle:checked+.ball {
transform: translateX(
0px
);
background-color
:
aqua
;
transform: translate(
6px
,
3px
);
z-index
:
1
;
}
.choice-name {
color
:
rgb
(
105
,
31
,
224
);
font-size
:
35px
;
font-weight
:
900
;
font-family
:
monospace
;
cursor
:
pointer
;
}