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