$clouds: #ecf0f1;
$midnight: #2c3e50;
$wisteria: #8e44ad;

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: $wisteria;
    color: white;
    }
    h1 {
    margin: 0 0 1em;
    }
    .group {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
    }
    input[type="checkbox"],
    input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
    }
    label {
    position: relative;
    margin-right: 1em;
    padding-left: 2em;
    padding-right: 1em;
    line-height: 2;
    cursor: pointer;
    &:before {
        box-sizing: border-box;
        content: " ";
        position: absolute;
        top: 0.3em;
        left: 0;
        display: block;
        width: 1.4em;
        height: 1.4em;
        border: 2px solid white;
        border-radius: .25em;
        z-index: -1;
    }
    }
    input[type="radio"] + label::before {
    border-radius: 1em;
    }
    /* Checked */
    input[type="checkbox"]:checked + label,
    input[type="radio"]:checked + label {
    padding-left: 1em;
    color: $wisteria;
    &:before {
        top: 0;
        width: 100%;
        height: 2em;
        background: white;
    }
    }

    /* Transition */
    label,
    label::before {
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
    }