.op3-element[data-op3-element-type="checkbox"] {
    width: 100%;
    min-width: 68px;
    margin: 0;
    padding: 0;

    label {
        display: block;
        margin: 0;
        padding: 0;
    }

    // Do not hide input (so it can be properly serialized
    // by our submit script). Make this element virtaully
    // hidden. Label click will handle checked/unchecked
    // state. On frontend render php will make sure that
    // the element has tabindex="-1" and this element
    // will be, by the user's perspective, hidden...
    input {
        position: absolute;
        display: inline-block;
        opacity: 0;
        z-index: -1;
        pointer-events: none;
    }

    // Background unchecked and checked
    [data-op3-background="unchecked"]                                   { display: block; }
    [data-op3-background="checked"]                                     { display: none; }
    input:checked ~ [data-op3-border] [data-op3-background="unchecked"] { display: none;  }
    input:checked ~ [data-op3-border] [data-op3-background="checked"]   { display: block; }

    // Content
    .op3-element-checkbox-content {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0.375em 0;
        line-height: 1.5;
    }

    // Checkmark
    .op3-element-checkbox-checkmark {
        position: relative;
        display: flex;
        width: 1em;
        height: 1em;
        font-size: 25px;
        outline: none;
        order: 1;

        .checked,
        .unchecked {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 0 none gray;
        }

        .unchecked {
            display: block;
            background: #eee;
        }

        .checked {
            display: none;
            background: #2196f3;
            color: #fff;

            &::after {
                content: "";
                position: absolute;
                display: block;
                top: 50%;
                left: 50%;
                width: 30%;
                height: 60%;
                border: solid currentColor;
                border-width: 0 0.125em 0.125em 0;
                transform: translate(-50%, -62.5%) rotate(45deg);
            }
        }
    }

    // @todo
    &:hover .op3-element-checkbox-checkmark {
        .unchecked {
            background-color: #ccc;
        }

        //.checked {
        //    background-color: #2196f3;
        //    color: #fff;
        //}
    }

    input:checked ~ .op3-element-checkbox-content .op3-element-checkbox-checkmark .unchecked { display: none;  }
    input:checked ~ .op3-element-checkbox-content .op3-element-checkbox-checkmark .checked   { display: block; }

    // Icon
    .op3-element-checkbox-icon-spacing {
        display: none;
        order: 2;
        width: 8px;
    }

    .op3-element-checkbox-icon {
        display: none;
        order: 3;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
    }

    // Label
    .op3-element-checkbox-label-spacing {
        display: block;
        order: 4;
        width: 8px;
    }

    .op3-element-checkbox-label {
        display: block;
        flex: 1;
        order: 5;
    }

    // Icon reposition
    label[data-op-checkbox-position="right"] {
        .op3-element-checkbox-icon          { order: 1; }
        .op3-element-checkbox-icon-spacing  { order: 2; }
        .op3-element-checkbox-label         { order: 3; }
        .op3-element-checkbox-label-spacing { order: 4; }
        .op3-element-checkbox-checkmark     { order: 5; }
    }
}