連動式ラジオボタン

• • _
  選択肢1選択肢2

• • _
  選択肢1選択肢2

.radio-buttons {
    margin: 1em 0;
    position: relative;
 
    .colmod-block li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.2lh;
    }
    .colmod-block 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 {
    :root:not(:has(& .folded)), :root:not(:has(& .unfolded)) & a:nth-of-type(1)::before,
    :root:has(& .folded):has(& .unfolded) & a:nth-of-type(2)::before {
        background-color: #04f;
        border-color: #04f;
    }
    :root:has(& .folded):has(& .unfolded) & li::before {
        top: 1.2lh;
    }
}