// note that ckeckboxes share considerable number of styles but in different ways

.kc.checkbox {
    width: 100%;
    //min-width: 0; // Fix for Firefox
    height: var(--kc-button-height);
    overflow: hidden;

    margin: 0 0 1rem 0;
    //padding: 0 1rem;
    padding: 0;

    border: var(--kc-border-width) var(--kc-border-style) var(--kc-border-color);

    background-color: var(--kc-base-color);
    color: var(--kc-key-color);

    > input[type="checkbox"] {
        display: none;
    }
    > label {
        user-select: none;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 1rem;
        line-height: calc(~"var(--kc-button-height) - var(--kc-border-width) * 2");
        cursor: pointer;
        //text-align: center;
        > i {
            user-select: none;
            margin-right: .25rem;
        }
    }
    > input[type="checkbox"]:checked + label {
        background-color: var(--kc-key-color);
        color: var(--kc-base-color);
    }
}
.kc.checkbox:last-child {
    margin-bottom: unset;
}

.kc.form > .field.inline > .kc.checkbox {
    //background-color: blue;
    width: auto;
    margin-right: 1rem;
}
.kc.form > .field.inline > .kc.checkbox:last-child {
    margin-right: unset;
}