/* Define variables */

:root {
    --jex-checkboxbutton-background-color: var(--jex-common-button-background-color);
    --jex-checkboxbutton-background-color-hover: var(--jex-common-button-background-color-hover);
    --jex-checkboxbutton-background-color-active: var(--jex-common-button-background-color-active);
    --jex-checkboxbutton-background-color-selected: var(--jex-common-button-background-color-selected);
    --jex-checkboxbutton-border-color: var(--jex-common-button-border-color);
    --jex-checkboxbutton-border-color-hover: var(--jex-common-button-border-color-hover);
    --jex-checkboxbutton-text-color: var(--jex-common-text-normal-known-color);
}

/* Define styles */

.jex-checkboxbutton-unselected,
.jex-checkboxbutton-selected {
    float: left;
    height: 1.5em;
    padding: 0em 1em 0em 1em;
    margin: 0px;
    border-width: 0px;
    border-style: solid;
    border-radius: 0px;
    border-color: var(--jex-checkboxbutton-border-color);
    color: var(--jex-checkboxbutton-text-color);
}

.jex-checkboxbutton-unselected {
    background-color: transparent;
}

.jex-checkboxbutton-selected {
    background-color: var(--jex-checkboxbutton-background-color-selected);
}

    .jex-checkboxbutton-unselected:hover,
    .jex-checkboxbutton-selected:hover {
        background-color: var(--jex-checkboxbutton-background-color-hover);
    }

    .jex-checkboxbutton-unselected:active,
    .jex-checkboxbutton-selected:active {
        background-color: var(--jex-checkboxbutton-background-color-active);
    }