<section class="demo-container">
  <h1>CSS Kitty Toggle:</h1>

  <div class="kitty-switch">
    <input type="checkbox" id="toggle" tabindex="1">
    <div class="kitty"></div>
    <label for="toggle" class="well"></label>
    <span class="prompt">Was this a good use of my time?</span>

    <div class="visible">
        <p>Yes!</p>
        <p>Life is too short for boring checkboxes.</p>
        <p>Also, the kitty emoji toggle doesn't show up for you if you are a dog person or are using an older browser/machine. Do what you have to do to get some colorful emojis into your life!</p>
        <p class="muted">ps- see it in action on my color theory page! <a href="https://tallys.github.io/color-theory/" alt="color-theory">Practical Color Theory for People Who Code</a> and or tweet me and say hi! - <a href="https://twitter.com/natalyathree">@natalyathree</a></p>
    </div>
  </div>

</section>

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,700);

$primary:  darken(lightblue, 23%);
$muted: lighten(gray, 23%);
$background: lighten(#fde088, 2%);
$shadow: darken($background, 11%);
$white: lighten(mistyrose, 5%);

body {
  background-color: $background;
  font-family: "adonis-web",serif;
  font-style: normal;
  font-weight: 400;
  color: $primary;
}

section.demo-container {
  background-color: $white;
  display:block;
  margin: 60px auto;
  min-width: 300px;
  max-width: 500px;
  padding: 20px;
  -webkit-box-shadow: 1px 10px 20px 0px $shadow;
  -moz-box-shadow: 1px 10px 20px 0px $shadow;
  box-shadow: 1px 6px 10px 0px $shadow;
}

h1 {
  border-bottom: 1px solid lighten(lightblue, 11%);
  padding-bottom: 17px;
}

.muted {
  color: $muted;
  
  a {
    color: darken(mistyrose, 10%);
    text-decoration:none;
  }
}

.visible {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 30px;
}

.kitty-switch {
    width: auto;
    display: block;
    position: relative;
    margin: 30px 0px 20px 0px;
  
  .prompt {
    display: inline-block;
    margin-top: 10px;
  }

    .well {
        background: white;
        height: 20px;
        width: 65px;
        position: absolute;
        right: 50px; 
        top: 7px;
        border-radius: 10px;
        box-shadow: inset 0 2px 0 rgba(0,0,0,.1);
        border: 1px solid lighten($primary, 21%);
        cursor: pointer;
    }

    #toggle {
      opacity: 0;
      border: none;
      border-radius: 0;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        height: 29px;
        width: 140px;
        background: transparent;
        position: absolute;
        right: 0px;
        top: 3px;
        cursor: pointer;
        z-index: 100; 
        color: tranparent;

        &:after {
            content: '';
            background-color: transparent;
            height: 40px;
            width: 80px;
            position: absolute;
            left: 30px;
            top: -5px;
        }
      
      ~div.kitty:before {
          content: "\01F431";
          position: absolute;
          right: 80px;
          top: -10px;
          font-size: 45px;
          z-index: 1;
          color: $primary;
         
          -moz-transition: all 0.25s ease-out;
          -webkit-transition: all 0.25s ease-out;
          -o-transition: all 0.25s ease-out;
          transition: all 0.25s ease-out;
      }

        &:checked {
            right: 0px;

            &:after {
                left: -80px;
            }
          
          ~div.kitty:before {
            content: '\01F63A';
            top: -10px;
            right: 41px;
          }

            ~div.visible {
                opacity: 1;
                max-height: 900px;
                overflow: visible;
            }
        }

        ~label {
            &:before {
                content: "No";
                position: absolute;
                color: $primary;
                left: -30px;
                top: 0px;
                font-size: 16px;
            }

            &:after {
                content: "Yes";
                position: absolute;
                color: $muted;
                left: 83px;
                top: 0px;
                font-size: 16px;
            }
        }

        &:checked~label {
            &:before {
                color: $muted;
            }
            &:after {
                color: $primary;
            }
        }
    }
}