.checkbox,
.radio {
    position: relative;
    display: inline-block;

    label {
        padding-left: 33px;

        &:before {
            z-index: 8;
            border: 2PX solid $black;
            content: "";
        }

        &:after {
            position: absolute;
            top: 6px;
            left: 12px;
            z-index: 9;
            display: none;
            width: 8px;
            height: 16px;
            border: 2PX solid $white;
            border-top: 0;
            border-left: 0;
            content: "";
            transform: rotate(45deg);
        }
    }

    label:before,
    input {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
    }

    input {
        z-index: 10;
        opacity: 0;
    }

    /* when checked */
    input:checked {
        ~ label:before {
            background: $black;
        }

        ~ label:after {
            display: block;
        }
    }

    /* when disabled */
    input:disabled {
        ~ label {
            color: #ccc;
        }

        ~ label:before {
            border-color: #e4e4e4;
        }

        &:checked {
            ~ label:before {
                background-color: #e4e4e4;
            }
        }
    }
}

.radio {
    label:before {
        border-radius: 50%;
    }
}

.switch {
    display: inline-block;

    input {
        display: none;

        &:checked ~ label {
            border: 2px solid #4bd865;
            box-shadow: inset 0 0 0 calc(56px / 2) #4bd865;
        }

        &:checked ~ label:after {
            left: calc(100px - 56px);
            box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px #4bd865;
        }

        &:disabled ~ label {
            opacity: 0.6;
        }

        &:disabled:checked ~ label {
            opacity: 0.6;
        }
    }

    label {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 60px;
        border: 2px solid #ddd;
        border-radius: 99999px;
        background-color: $white;
        transition: 0.3s;

        &:after {
            position: absolute;
            left: 0;
            width: 56px;
            height: 56px;
            border: none;
            border-radius: 50%;
            background-color: $white;
            box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px #ddd;
            content: "";
            transition: 0.4s;
        }
    }
}