.styled-checkbox,.styled-radio {
    position: absolute;
    opacity: 0;

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

        &:before {
            background: #fff;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            border: 1px solid #ccc;
            margin-right: 5px;
            content: "";
        }
    }

    &:hover {
        &+label:before {
            border: 1px solid $primary
        }
    }

    &:focus {
        &+label:before {
            border: 1px solid #80bdff;
            box-shadow: 0 0 0 .2rem rgba(0,123,255,.25)
        }
    }

    &:checked {
        &+label {
            &:before {
                background: $primary;
                border: 1px solid $primary;
            }

            &:after {
                content: "";
                position: absolute;
                left: 4px;
                top: 8px;
                background: #fff;
                width: 2px;
                height: 2px;
                box-shadow: 2px 0 0 #fff,4px 0 0 #fff,4px -2px 0 #fff,4px -4px 0 #fff,4px -6px 0 #fff,4px -8px 0 #fff;
                transform: rotate(45deg)
            }
        }
    }

    &:disabled {
        &+label {
            color: #b8b8b8;
            cursor: auto;

            &:before {
                box-shadow: none;
                background: #ddd;
                border-color: #c2bebe
            }
        }
    }
}

.styled-radio+label:before {
    border-radius: 50px
}