Radio Buttons 3

• • _
  選択肢1

• • _
  選択肢2

• • _
  選択肢1

• • _
  選択肢2

.radio-buttons .colmod-block {
    margin: 1em 0;
    position: relative;
 
    a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5em;
        color: inherit;
        text-decoration: none;
 
        &::before {
            content: "";
            box-sizing: border-box;
            width: 1em;
            height: 1em;
            border: solid 0.125em #999;
            border-radius: 50%;
            outline: solid 0.125em #fff;
            outline-offset: -0.25em;
        }
        &:hover::before {
            border-color: currentColor;
        }
    }
}
 
.radio-buttons.id {
    &:is(:not(:has(.folded)), :not(:has(.unfolded))) .colmod-block:nth-child(1) a::before,
    &:has(.folded):has(.unfolded) .colmod-block:nth-child(2) a::before {
        border-color: #04f;
        background-color: #04f;
    }
    :is(&,* &):has(.folded):has(.unfolded):has(~:is(&,* &)):is(:not(:has(~:is(&,* &) .folded)),:not(:has(~:is(&,* &) .unfolded))),
    :is(&,* &):is(:not(:has(.folded)),:not(:has(.unfolded))):has(~:is(&,* &)):has(.folded):has(.unfolded),
    :is(&,* &):has(.folded):has(.unfolded) ~ :is(&,* &):is(:not(:has(.folded)),:not(:has(.unfolded))),
    :is(&,* &):is(:not(:has(.folded)),:not(:has(.unfolded))) ~ :is(&,* &):has(.folded):has(.unfolded) {
        property: "test";
 
        ~ .box { background: red; }
    }
}