:root {
 --choice-img-input-size: 100px;
 --choice-img-input-icon-size: 26px
}
.choice-option {
 position:relative;
 overflow:hidden;
 transition:.3s
}
.choice-option:hover {
 cursor:pointer;
}
.choice-option:active {
 -webkit-transform:translateY(2px);
 transform:translateY(2px)
}
.choice-option[aria-checked=true] {
 transition:-webkit-transform .3s;
 transition:transform .3s;
 transition:transform .3s,-webkit-transform .3s;
}
.checkmark {
 position:absolute;
 top:0;
 right:0;
 -webkit-transform:translate(1px,-1px);
 transform:translate(1px,-1px);
 width:var(--choice-img-input-size);
 height:var(--choice-img-input-size);
 -webkit-clip-path:polygon(15% 0%,100% 0%,100% 85%);
 clip-path:polygon(15% 0%,100% 0%,100% 85%);
 pointer-events:none;
 opacity:0;
 background: #48c774;
 color: #FFF;
}
.checkmark .icon {
 position:absolute;
 top:calc(var(--choice-img-input-size)/4 - var(--choice-img-input-icon-size)/2);
 right:calc(var(--choice-img-input-size)/4 - var(--choice-img-input-icon-size)/2);
 font-size:var(--choice-img-input-icon-size);
}
.checkmark .icon>* {
 transition:stroke-dashoffset .3s;
 stroke-dasharray:18;
 stroke-dashoffset:18
}
.choice-option[aria-checked=true] .checkmark {
 opacity:1
}
.choice-option[aria-checked=true] .checkmark .icon>* {
 stroke-dashoffset:0
}