@import "../_colors";

body .ui-chkbox {
    display: inline-block;
    margin-right: 10px;
    margin-top: 1px;
    vertical-align: top;
}

body .ui-chkbox .ui-chkbox-box {
    align-items: center;
    background-color: $default-color;
    border: 1px solid $default-primary-color;
    border-radius: 4px;
    display: flex;
    height: 20px;
    justify-content: center;
    transition: background-color 400ms ease-out, border-color 400ms ease-out;
    width: 20px;

    &.ui-state-active {
        background-color: $primary-color;
        border-color: $primary-color;
        color: $primary-light-text-color;
    }
}

body .ui-chkbox .ui-chkbox-box:not(.ui-state-disabled):not(.ui-state-active):hover {
    background-color: highlight($default-primary-color);
}

body .ui-chkbox .ui-chkbox-box.ui-state-focus,
body .ui-chkbox .ui-chkbox-box:active {
    border: 1px solid highlight($primary-color);
}

body .ui-chkbox-label {
    max-width: calc(100% - 30px);
    display: inline-block;
    margin-bottom: 0;
}