連動式ラジオボタン改

選択肢1

• • _
  選択肢2選択肢1

選択肢2

選択肢1

• • _
  選択肢2選択肢1

選択肢2

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