@import "./colors.scss";
/* Reference: ant-table checkbox */

.nw-checkbox-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    list-style: none;
    display: inline-block;
    line-height: unset;
    cursor: pointer;
    position: relative;
    color: #777;

    .nw-checkbox {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 14px;
        list-style: none;
        position: relative;
        top: -0.09em;
        display: inline-block;
        white-space: nowrap;
        vertical-align: middle;
        outline: none;
        cursor: pointer;
    }

    .nw-checkbox-input /*<input type="checkbox">*/ {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
    }
    /*|-----------------------
      | Create Checked Symbol
      |----------------------- */
    .nw-checkbox-inner {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        background-color: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        // border-collapse: separate;
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .nw-checkbox-inner::after {
        position: absolute;
        top: 40%;
        left: 25%;
        width: 5px;
        height: 9px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate(45deg) scale(0) translate(-50%, -50%);
        -ms-transform: rotate(45deg) scale(0) translate(-50%, -50%);
        transform: rotate(45deg) scale(0) translate(-50%, -50%);
        opacity: 0;
        -webkit-transition: all .1s cubic-bezier(.71, -0.46, .88, .6),opacity .1s;
        transition: all .1s cubic-bezier(.71, -0.46, .88, .6),opacity .1s;
        content: '';
    }
    .nw-checkbox-inner.-checked::after {
        position: absolute;
        display: table;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate(45deg) scale(0.8) translate(-50%, -50%);
        -ms-transform: rotate(45deg) scale(0.8) translate(-50%, -50%);
        transform: rotate(45deg) scale(0.8) translate(-50%, -50%);
        opacity: 1;
        -webkit-transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
        transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
        content: '';
    }
    /*|-----------------------
      | Color Types
      |----------------------- */
    .primary .nw-checkbox-inner.-checked {
        background-color: $primary-color;
        border-color: $primary-color;
    }
    .warning .nw-checkbox-inner.-checked {
        background-color: $warning-color;
        border-color: $warning-color;
    }
    .success .nw-checkbox-inner.-checked {
        background-color: $success-color;
        border-color: $success-color;
    }
    .danger .nw-checkbox-inner.-checked {
        background-color: $danger-color;
        border-color: $danger-color;
    }
    .nw-checkbox+span {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.nw-checkbox-wrapper:hover,
.nw-checkbox-wrapper:active,
.nw-checkbox-wrapper:visited,
.nw-checkbox-wrapper:focus {
    .primary .nw-checkbox-inner {
        border: 1px solid $primary-color;
    }
    .warning .nw-checkbox-inner {
        border: 1px solid $warning-color;
    }
    .success .nw-checkbox-inner {
        border: 1px solid $success-color;
    }
    .danger .nw-checkbox-inner {
        border: 1px solid $danger-color;
    }
}

.nw-checkbox-wrapper.-disabled,
.nw-checkbox-wrapper.-disabled:hover {
    color: #dcdcdc;
    cursor: not-allowed;
    .primary .nw-checkbox-inner,
    .warning .nw-checkbox-inner,
    .success .nw-checkbox-inner,
    .danger  .nw-checkbox-inner {
        border: 1px solid #efefef;
        cursor: not-allowed;
    }
    input[type='checkbox'] {
        cursor: not-allowed;
    }
}