59 lines
956 B
SCSS
59 lines
956 B
SCSS
.option {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
box-shadow:
|
|
0px 4px 6px 0px #0000001a,
|
|
0px 2px 4px 0px #0000001a;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
border: 3px solid transparent;
|
|
padding: 24px 14px 8px;
|
|
min-width: 100px;
|
|
width: fit-content;
|
|
|
|
&.selected {
|
|
border-color: #3b82f6;
|
|
}
|
|
}
|
|
|
|
.popularBadge {
|
|
padding: 4px 12px;
|
|
background-color: #3b82f6;
|
|
border-radius: 16px;
|
|
position: absolute;
|
|
top: -14px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.checkIcon {
|
|
border: 2px solid #b8babf;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
&.selected {
|
|
border-color: #3b82f6;
|
|
background-color: #3b82f6;
|
|
}
|
|
}
|
|
|
|
.credits {
|
|
font-size: 20px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.bonus {
|
|
background-color: #22c55e;
|
|
padding: 2px 17px;
|
|
border-radius: 999px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.price {
|
|
color: #111827;
|
|
margin-top: 16px;
|
|
}
|