.wox-checkbox {

}

.wox-checkbox input {
    display: none;
}

.wox-checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 0;
    line-height: 18px;
    user-select: none;
}

.wox-checkbox label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: var(--space-4);
    border: 1px solid var(--gray-monochromatic-100);
}

/*.wox-checkbox input:not(:checked):not([indeterminate='true'])~label::before {*/
/*    background-color: #E2E8F0;*/
/*}*/

.wox-checkbox input:not(:checked):not([indeterminate='true'])~label:hover::before {
    border: 1px solid var(--gray-monochromatic-200);
}

.wox-checkbox input:not(:checked):not([indeterminate='true']):active~label::before {
    border: 1px solid var(--gray-monochromatic-100);
}

/*.wox-checkbox input:disabled~label::before {*/
/*    background-color: #F1F4F7 !important;*/
/*}*/

/*.wox-checkbox input:disabled:hover~label::before {*/
/*    background-color: #F4F7F9 !important;*/
/*}*/

.wox-checkbox input[indeterminate='true']~label::before,
.wox-checkbox input:checked~label::before {
    background: var(--primary-600);
    border: none;
}

.wox-checkbox input[indeterminate='true']~label::before,
.wox-checkbox input:checked~label::before {
    background: var(--gray-neutral-900);
    border: none;
}

.wox-checkbox input[indeterminate='true']~label:hover::before,
.wox-checkbox input:checked~label:hover::before {
    outline: 2px solid var(--gray-monochromatic-100);
}

.wox-checkbox input[indeterminate='true']~label:active::before,
.wox-checkbox input:checked~label:active::before {
    outline: 4px solid var(--gray-monochromatic-100);
}

/*.wox-checkbox input[indeterminate='true']:disabled~label::before,*/
/*.wox-checkbox input:checked:disabled~label::before {*/
/*    background-color: #64748B29;*/
/*}*/

/*.wox-checkbox input:disabled~label::before {*/
/*    outline: none !important;*/
/*}*/

/*.wox-checkbox input[indeterminate='true']:disabled~label::before,*/
/*.wox-checkbox input:checked:disabled~label::before {*/
/*    background-color: #64748B14;*/
/*}*/


.wox-checkbox input:checked~label:after {
    content: url("icons/check-solid.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translate(0, -50%);
}

.wox-checkbox input[indeterminate='true']~label:after {
    content: url("icons/minus.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translate(0, -50%);
}