:root {
    --radiobutton-color: var(--button-background);
    --radiobutton-color-focus: var(--button-background-hover);
    --radiobutton-color-disabled: var(--main-low-visibility-color);
    --radiobutton-label-color: var(--button-background);
}
:root.high-contrast {
    --radiobutton-color: var(--main-background);
    --radiobutton-color-focus: var(--main-color-hover);
    --radiobutton-color-disabled: var(--main-color-hover);
    --radiobutton-label-color: var(--main-color);
}
.sm-radiobutton {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.sm-radiobutton label {
    display: block;
    padding: 0;
}
/* Hide default HTML checkbox */
.sm-radiobutton input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
/* Create a custom checkbox */
.sm-radiobutton .checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 500;
    flex-direction: column;
    color: var(--radiobutton-color);
}
.sm-radiobutton input:hover ~ .checkmark,
.sm-radiobutton input:focus ~ .checkmark {
    color: var(--radiobutton-color-focus);
}
.sm-radiobutton input:disabled + .checkmark {
    color: var(--radiobutton-color-disabled);
    cursor: default;
}
.sm-radiobutton label.radiobutton-label {
    margin-left: 0.5em;
    color: var(--radiobutton-label-color);
}
.sm-radiobutton label.radiobutton-label.disabled {
    color: var(--radiobutton-color-disabled);
}
.sm-radiobutton label.radiobutton-label:empty {
    display: none;
}