.custom-checkbox {
    @include display-flex(flex);
    @include justify-content-start;
    @include align-items-center;
    position: relative;
    margin-bottom: .6125rem;

    // &::before {
    //     z-index: 1;
    //     position: absolute;
    //     border-radius: 50%;
    //     opacity: 0;
    //     pointer-events: none;
    //     content: "";
    //     width:30px;
    //     height: 30px;
    //     background-color:$blue-light;
    //     left:-6px;
    //     top:-5px;
    //     bottom:-5px;
    //     @include transition(all .5s linear);
    //     visibility: hidden;
    // }
    label{
        margin:0;
        font-weight: 500;
        font-size: .775rem;
    }

    input {
        position: absolute; // take it out of document flow
        opacity: 0; // hide it
        z-index: 9;

        &+label {
            position: relative;
            cursor: pointer;
            padding: 0;
        }

        // Box.
        &+label:before {
            content: '';
            margin-right: 10px;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            background: $white-color;
            border: 1.5px solid $border-dark;
            @include radius(4px);
        }

        // Box hover
        // &:hover + label:before {
        //     background: $blue-color;
        // }

        // Box focus
        &:focus+label:before {
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
        }

        // Box checked
        &:checked+label:before {
            background: $secondary-color;
        }

        // Disabled state label.
        &:disabled+label {
            color: #b8b8b8;
            cursor: auto;
        }

        // Disabled box.
        &:disabled+label:before {
            box-shadow: none;
            background: #ddd;
        }

        // Checkmark. Could be replaced with an image
        &:checked+label:after {
            content: '';
            position: absolute;
            left: 4px;
            top: 12px;
            background: $white-color;
            width: 2px;
            height: 2px;
            box-shadow:
                2px 0 0 $white-color,
                4px 0 0 $white-color,
                4px -2px 0 $white-color,
                4px -4px 0 $white-color,
                4px -6px 0 $white-color,
                4px -8px 0 $white-color;
            transform: rotate(45deg);
        }

        &:checked+label:before {
            border-color: $secondary-color;
        }
        &:checked+label{
            color: $secondary-color;
        }
    }
    // &:hover{
    //     &::before{
    //         opacity: 1;
    //         visibility: visible;
    //     }
    // }
}
.custom-radio {
    @include display-flex(flex);
    @include justify-content-start;
    @include align-items-center;
    position: relative;
    margin-bottom: .6125rem;

    // &::before {
    //     z-index: 1;
    //     position: absolute;
    //     border-radius: 50%;
    //     opacity: 0;
    //     pointer-events: none;
    //     content: "";
    //     width:30px;
    //     height: 30px;
    //     background-color:$blue-light;
    //     left:-6px;
    //     top:-5px;
    //     bottom:-5px;
    //     @include transition(all .5s linear);
    //     visibility: hidden;
    // }
    label{
        margin:0;
        font-weight: 500;
        font-size: .775rem;
    }

    input {
        position: absolute; // take it out of document flow
        opacity: 0; // hide it
        z-index: 9;

        &+label {
            position: relative;
            cursor: pointer;
            padding: 0;
        }

        // Box.
        &+label:before {
            content: '';
            margin-right: 10px;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            @include radius(50%);
            background: $white-color;
            border: 1.5px solid $border-dark;
        }

        // Box hover
        // &:hover + label:before {
        //     background: $blue-color;
        // }

        // Box focus
        &:focus+label:before {
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
        }

        // Box checked
        &:checked+label:before {
            background: $white-color;
        }

        // Disabled state label.
        &:disabled+label {
            color: #b8b8b8;
            cursor: auto;
        }

        // Disabled box.
        &:disabled+label:before {
            box-shadow: none;
            background: #ddd;
        }

        // Checkmark. Could be replaced with an image
        &:checked+label:after {
            content: '';
            position: absolute;
            left: 5px;
            top: 7px;
            background: $secondary-color;
            width: 8px;
            height: 8px;
            @include radius(50%);
        }

        &:checked+label:before {
            border-color: $secondary-color;
        }
        &:checked+label{
            color: $secondary-color;
        }
    }
    // &:hover{
    //     &::before{
    //         opacity: 1;
    //         visibility: visible;
    //     }
    // }
}
.inline-group{
    @include display-flex(flex);
    @include justify-content-start;
    @include align-items-center;
    @include flex-wrap(wrap);
    .custom-radio,.custom-checkbox{
        &:not(:last-child){
            margin-right: 1rem;
        }
    }
}