/**=====================
     28. Radio CSS Start
==========================**/
.animate-chk{
    label{
        line-height: 1.6;
        cursor: pointer;
        &:last-child{
            margin-bottom: 0;
        }
    }
}
.checkbox_animated {
    cursor: pointer;
    position: relative;
    margin: 0 1rem 0 0;
    &:before {
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transform: rotate(-45deg) scale(0, 0);
        content: "";
        position: absolute;
        left: 0.25rem;
        top: 0.225rem;
        z-index: 1;
        width: 0.75rem;
        height: 0.375rem;
        border: 2px solid $primary-color;
        border-top-style: none;
        border-right-style: none;
    }
    &:after {
        content: "";
        position: absolute;
        top: -0.125rem;
        left: 0;
        width: 1.3rem;
        height: 1.3rem;
        background: $white;
        border: 2px solid $light-gray;
        cursor: pointer;
    }
    &:checked:before {
        transform: rotate(-45deg) scale(1, 1);
    }
}
.radio_animated {
    position: relative;
    margin: 0 1rem 0 0;
    cursor: pointer;
    &:before {
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transform: scale(0, 0);
        content: "";
        position: absolute;
        top: 0;
        left: 0.125rem;
        z-index: 1;
        width: 0.75rem;
        height: 0.75rem;
        background: $primary-color;
        border-radius: 50%;
    }
    &:after {
        content: "";
        position: absolute;
        top: -0.25rem;
        left: -0.125rem;
        width: 1.25rem;
        height: 1.25rem;
        background: $white;
        border: 2px solid $light-gray;
        border-radius: 50%;
    }
    &:checked:before {
        transform: scale(1, 1);
    }
}

.checkbox{
    label {
        display: inline-block;
        position: relative;
        padding-left: 16px;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 10px;
        &::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 19px;
            height: 19px;
            left: 0;
            margin-left: -16px;
            border: 1px solid $light-gray;
            border-radius: 3px;
            background-color: $white;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }
        &::after{
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: $theme-font-color;
        }
    }
    input[type="checkbox"]{
        opacity: 0;
        &:focus{
            outline-offset: -2px;
            & + label{
                &::before{
                    outline-offset: -2px;
                }
            }
        }
    }
    input[type="checkbox"]{
        &:checked{
            & + label{
                &::before{
                    font-family: $font-themify;
                    content: "\e64c";
                    text-align: center;
                    line-height: 1.2;
                }
            }
        }
        &:disabled{
            & + label{
                opacity: 0.65;
                &::before{
                    background-color: $light-gray;
                    cursor: not-allowed;
                }
            }
        }
    }
    .checkbox-circle{
        label{
            &::before{
                border-radius: 50%;
            }
        }
    }
    .checkbox-inline{
        margin-top: 0;
    }
}
.m-squar{
    label {
        &::before {
            border-radius: 0;
        }
    }
    .checkbox-circle{
        label{
            &::before{
                border-radius: 50%;
            }
        }
    }
    .checkbox-inline{
        margin-top: 0;
    }
}
@each $btn-name, $btn-color in (primary, $primary-color),
        (secondary, $secondary-color) ,
        (success, $success-color),
        (danger, $danger-color),
        (info, $light-font),
        (light, $light-gray),
        (dark, $dark-color),
        (warning, $warning-color) {
    .checkbox-#{$btn-name}{
        input[type="checkbox"]
        {
            &:checked{
                & + label{
                    &::before{
                        // background-color: $btn-color;
                        border-color: $btn-color;
                        color: $btn-color;
                    }
                    &::after{
                        color: $white;
                    }
                }
            }
        }
    }
}
@each $btn-name, $btn-color in   (primary, $primary-color),
        (secondary, $secondary-color) ,
        (success, $success-color),
        (danger, $danger-color),
        (info, $light-font),
        (light, $light-gray),
        (dark, $dark-color),
        (warning, $warning-color) {
    .checkbox-solid-#{$btn-name}{
        label{
            &:before{
                background-color: $btn-color;
                border-color: $btn-color;
                color: $white;
            }
        }
        input[type="checkbox"]
        {
            &:checked{
                & + label{
                    &::before{
                        background-color: $btn-color;
                        border-color: $btn-color;
                        color: $white;
                    }
                    &::after{
                        color: $white;
                    }
                }
            }
        }
    }

}
@each $btn-name, $btn-color in (primary, $primary-color),
        (secondary, $secondary-color) ,
        (success, $success-color),
        (danger, $danger-color),
        (info, $light-font),
        (light, $light-gray),
        (dark, $dark-color),
        (warning, $warning-color) {
    .checkbox-#{$btn-name}{
        label{
            &::before{
                border-color:$btn-color;
            }
        }

    }
}
.m-checkbox-inline{
    .checkbox{
        display: inline-block;
    }
    .radio{
        display: inline-block;
    }
    label{
        margin-right:20px;
    }
}
.radio{
    label{
        display: inline-block;
        position: relative;
        padding-left: 5px;
        cursor: pointer;
        &::before{
            content: "";
            display: inline-block;
            position: absolute;
            width: 19px;
            height: 19px;
            left: 0;
            margin-left: -20px;
            border: 1px solid $light-gray;
            border-radius: 50%;
            background-color: $white;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }
        &::after{
            display: inline-block;
            position: absolute;
            content: " ";
            width: 9px;
            height: 9px;
            left: 5px;
            top: 5px;
            margin-left: -20px;
            border-radius: 50%;
            background-color: $dark-gray;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }
    }
    input[type="radio"]{
        opacity: 0;
        &:focus{
            & + label{
                &::before{
                    outline-offset: -2px;
                }

            }
        }
        &:checked{
            & + label{
                &::after{
                    -webkit-transform: scale(1, 1);
                    -ms-transform: scale(1, 1);
                    -o-transform: scale(1, 1);
                    transform: scale(1, 1);
                }

            }
        }
        &:disabled{
            & + label{
                opacity: 0.65;
                &::before{
                    cursor: not-allowed;
                }
            }
        }
    }
    .radio-inline{
        margin-top: 0;
    }
}

@each $btn-name, $btn-color in (primary, $primary-color),
        (secondary, $secondary-color) ,
        (success, $success-color),
        (danger, $danger-color),
        (info, $light-font),
        (light, $light-gray),
        (dark, $dark-color),
        (warning, $warning-color) {
    .radio-#{$btn-name}{
        input[type="radio"]
        {
            & + label{
                &::before{
                    border-color: $btn-color;
                }
                &::after{
                    background-color: $btn-color;
                }
            }
            &:checked{
                & + label{
                    &::before{
                        border-color: $btn-color;
                    }
                    &::after{
                        background-color: $btn-color;
                    }
                }
            }
        }
    }
}
/**=====================
     28. Radio CSS Ends
==========================**/