RG
{
width:100%;
overflow:hidden;
}

RG BUTTON
{
width: 48%;
padding: 8px;
font-weight: 700;
color: var(--fg-black);
border: 2px outset #0000001c;
vertical-align: middle;
font-size: 14px;
float: left;
margin-right: 1.2%;
border-radius: 10px;
margin-top: 1.2%;
line-height: 0.6;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 4%);
touch-action: manipulation;
text-align:left;
}

RG BUTTON::after
{
pointer-events:none;
content: "\25CB";
color: #241c1947;
font-size: 32px;
}

RG BUTTON[selected]
{
border:2px outset var(--fg-black);
}

RG BUTTON[selected]::after
{
content: "\25CF";
color:var(--fg-black);
}

CG
{
width:100%;
overflow:hidden;
}

CG BUTTON
{
width: 48%;
padding: 8px;
font-weight: 700;
color: var(--fg-black);
border: 2px outset #0000001c;
vertical-align: middle;
font-size: 14px;
float: left;
margin-right: 1.2%;
border-radius: 10px;
margin-top: 1.2%;
line-height: 0.8;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 4%);
touch-action: manipulation;
text-align:left;
}

CG BUTTON::after
{
pointer-events: none;
content: "\25FB";
color: #241c1938;
font-size: 19px;
}

CG BUTTON[selected]
{
border:2px outset var(--fg-black);
}

CG BUTTON[selected]::after
{
content: "\25FC";
color:var(--fg-black);
}

RG.full-line-height BUTTON,
CG.full-line-height BUTTON
{
line-height:1.2;
}

@media (hover: hover) and (pointer: fine) {
    RG BUTTON:hover,
    CG BUTTON:hover {
        border: 2px outset #241c1952;
    }
}