.checkbox {
    composes: reset from './../reset.css';
    position: relative;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}
.checkbox__input {
    composes: reset from './../reset.css';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: var(--zIndex-CheckboxInput-Context);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    cursor: pointer;
}
.checkbox__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: .2;
}
.checkbox__inputMirror {
    composes: reset from './../reset.css';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    vertical-align: text-bottom;
    background: var(--colors-ContrastDark);
    font-size: 20px;
    font-weight: bold;
}
.checkbox__inputMirror--active {
    background: var(--colors-PrimaryBlue);
}
.checkbox__checked {
    .checkbox__icon {
        opacity: 1;
    }
}
.checkbox__disabled {
    opacity: .65;
    cursor: not-allowed;

    .checkbox__input {
        cursor: not-allowed;
    }
}
