@import url(https://fonts.googleapis.com/css?family=Francois+One);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);

@font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}

.switch {
    display: inline-block;
    text-align: center;
    user-select: none;
    padding-top: 1rem;

    input[type=checkbox] {
        display: none !important;
    }

    label, label:before, label:after,
    input[type=checkbox], input[type=checkbox]:before, input[type=checkbox]:after,
    .feature, .feature:before, .feature:after {
        transition: all 250ms ease-in;
    }

    label:before, label:after,
    input[type=checkbox]:before, input[type=checkbox]:after,
    .feature:before, .feature:after {
        content: '';
        display: block;
    }

    label {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: $switch-bg-1;
        border-radius: 50%;
        box-shadow: $switch-shadow-1;
        display: block;
        margin: 0 auto;
        font-size: 1.4em;
        transition: all 350ms ease-in;

        &:before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 22.7272727273px;
            height: 22.7272727273px;
            border-radius: 50%;
            background-color: $switch-bg-2;
            box-shadow: $switch-shadow-2;
        }

        &:after {
            position: absolute;
            left: 50%;
            top: 35%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 12px;
            background-color: $switch-bg-3;
            box-shadow: $switch-shadow-3;
        }

        &:before, &:after {
            transition-duration: 150ms;
        }

        &:hover {
            cursor: pointer;
            &:before { box-shadow: $switch-shadow-hover; }
            &:after { background-color: $switch-bg-hover; }
        }
    }

    input[type=checkbox]:checked + label {
        box-shadow: $switch-shadow-checked-1;
        &:before { box-shadow: $switch-shadow-checked-2; }
        &:after { background-color: $switch-bg-checked; }
    }

    &.glow {
        label {
            background-color: $switch-bg-glow-2;
            box-shadow: $switch-shadow-glow-1;

            &:before { box-shadow: $switch-shadow-glow-2; }
            &:after {
                background-color: $switch-bg-glow-3;
            }

            label:hover {
                &:before { box-shadow: $switch-shadow-glow-hover; }
                &:after { background-color: $switch-bg-glow-hover; }
            }
        }

        input[type=checkbox]:checked + label {
            box-shadow: $switch-shadow-glow-checked-1;
            &:before { box-shadow: $switch-shadow-glow-checked-2; }
            &:after { background-color: $switch-bg-glow-checked; }
        }
    }
}