<div class="container">
  <section>
    <header>
      <h1>Envelope, a Pure <strong>CSS</strong> Icon</h1>
      <h2>Just <span class="action-click">click </span><span class="action-tap">tap </span>this envelope</h2>
    </header>
    <article>
      <input type="radio" name="switch" id="switch-on" class="switch-on">
      <div class="envelope">
        <label for="switch-on">
          <span class="triangle cap"></span>
          <div class="notification waiting">
            <span class="number">17</span>
          </div>
          <span class="triangle bag"></span>
          <span class="triangle tail"></span>
        </label>
      </div>
      <div class="title">
        <input type="radio" name="switch" id="switch-off" class="switch-off">
        <label for="switch-off">Close</label>
      </div>
      <div class="overlay"></div>
    </article>
  </section>
</div>

@import "compass/reset";
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
$maxScreen: 680px;
$lime: #ECED52;
$navy: #0A4069;
$cyan: #57CAF4;
$red: #EC008C;
$paper: #F8ECC2;
// $paper: white;
$paperInside: lighten($paper, 10);
$paperShadow: darken($paper, 60);
$slowSpeed: 0.8s;
$hoverSpeed: 0.6s;
$fastSpeed: 0.4s;
$aceleration: cubic-bezier(0.25, 0.1, 0.51, 1.3);
$aceleration2: cubic-bezier(0.25, 0.1, 0.49, 1.14);
$width: 18.75em;
$height: $width / 1.618;
$triangleShadowColor: rgba(0, 0, 0, 0.14);
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}
@mixin calc($property, $expression) {
    #{$property}: -webkit-calc(#{$expression});
    #{$property}: calc(# {$expression});
}
body,
html {
    height: 100%;
}
body {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    background: #d0d0d0;
    color: #444444;
}
h1 {
    font-size: 2.5em;

    margin: 2em 0 .5em;
}
h2 {
    margin-bottom: 3em;
}
p {
    margin-bottom: 1em;
}
strong {
    font-weight: 700;
}
div {
    position: relative;
}
input {
    display: none;
}
article {
    padding: 2em 0;
    max-width: 480px;
    text-align: center;
    position: relative;
    margin-bottom: 2em;
}
.container {
    height: 100%;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
}
.envelope {
    width: $width;
    height: $height;
    position: relative;
    display: inline-block;
    z-index: 2;
    background-color: darken($paperInside, 03);
    @include box-shadow(0 0.1em 1em rgba(0, 0, 0, 0.15));
    @include transition(all $slowSpeed cubic-bezier(0.61, -0.22, 0.38, 1.26));
    @include transform(scale(0.6) translateY(0em));
    font-size: 1em;
    label {
        width: 100%;
        height: 100%;
        position: relative; 
        display: inline-block;
        cursor: pointer;
    }
    .triangle {
        height: 100%;
        display: block;
        overflow: hidden;
        position: relative;
        margin-top: 1px;
        &:before {
            top: -4.8em;
            left: 3.865em;
            position: absolute;
            display: inline-block;
            content: "";
            width: 11em;
            height: 9.5em;
            border: 1px solid white;
            background-color: darken($paperInside, 04);
            @include transform(rotateZ(30deg) skew(-30deg));
            @include box-shadow(0 0 1em $triangleShadowColor);
        }
        &.cap {
            @include transition(all $hoverSpeed cubic-bezier(0.61, -0.22, 0.38, 1.26));
            @include transform-origin(50%, 0%);
            z-index: 3;
        }
        &.tail {
            @include transform-origin(50%, 0%);
            @include transform(rotateZ(180deg));
            z-index: 2;
            &:before {
                top: -8.45em;
                left: 2.46em;
                width: 14em;
                height: 14em;
                border-color: darken($paperInside, 10);
                @include transform(rotateZ(38deg) skew(-15deg));
                @include box-shadow(-0.1em -0.1em 1em $triangleShadowColor);
            }
        }
        &.bag {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            &:after,
            &:before {
                top: 0.4em;
                left: -7em;
                width: 13em;
                height: 10.5em;
                border: 1px solid darken($paperInside, 10);
                background-color: darken($paperInside, 04);
                @include transform(rotateZ(30deg) skew(-31deg));
                @include box-shadow(1em 0.1em 1em darken($triangleShadowColor, 30));
            }
            &:after {
                top: -2.15em;
                left: auto;
                right: -10.2em;
                width: 14em;
                height: 15em;

                position: absolute;
                display: inline-block;
                @include transform(rotateZ(33.1deg) skew(-26.7deg));
                @include box-shadow(0.1em 0em 1.2em darken($triangleShadowColor, 30));
                content: "";
            }
        }
    }
    .notification {
        top: -9em;
        right: -6em;
        width: $height;
        height: $height;
        line-height: $height;
        display: inline-block;
        position: absolute;
        background-color: $cyan;
        @include border-radius(50%);
        @include transition(all $hoverSpeed $aceleration2);
        @include transform-origin(50%, 100%);
        // @include transform-origin(50%, 50%);
        @include transform(rotateZ(0deg) translateY(0) scale(0.5));
        @include animation(waiting ($hoverSpeed * 2) $aceleration infinite);
        z-index: 3;
        .number {
            color: white;
            font-size: 4em;
            display: inline-block;
            @include transition(all $hoverSpeed $aceleration2);
        }
    }
    &:hover {
        cursor: pointer;
    }
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($navy,0.9);
    z-index: 1;
    @include transition(all $fastSpeed $aceleration2);
    @include transform-origin(50%, 50%);
    @include transform(scale(0));
    @include opacity(0);
}

.title {
    z-index: 5;
    @include opacity(0);
    margin: 0;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: absolute;
    top: 14em;
    left: 0;
    @include transition(all $fastSpeed $aceleration2);
    h2 {
        color: white;
        display: block;
        font-size: 4em;
        font-weight: 700;
        margin: 0 auto 0.8em;
    }
    label {
        cursor: pointer;
        text-transform: uppercase;
        padding: 1.4em;
        display: block;
        color: white;
        border: 1px solid white;
        @include border-radius(0.2em);
        @include box-shadow(inset 0 0 0 $red);
        @include transition(all ($fastSpeed / 2) ease-out);
        &:hover {
            color: white;
            border-color: $red;
            background-color: $red;
        }
    }
}

input.switch-on[type="radio"]:checked ~ .title {
    @include opacity(1);
    height: auto;
}
input.switch-on[type="radio"]:checked ~ .title,
input.switch-on[type="radio"]:checked ~ .overlay {
    display: block;
    @include opacity(1);
    @include transform(scale(1));
}
input.switch-on[type="radio"]:checked + .envelope {
    @include transform(scale(0.8) translateY(-3em));
    @include box-shadow(0 4em 4em rgba(0, 0, 0, 0.14));
    background-color: darken($paperInside, 0);
    label {
        cursor: default;
    }
    .cap {
        @include transform(rotateX(180deg));
        &:before {
            // @include box-shadow(-0.4em -0.4em 1em rgba(0, 0, 0, 0.14));
        }
    }
    .bag {
        @include animation(setBagZindex ($hoverSpeed * 2) $aceleration forwards);
    }
    .tail {
        @include animation(setTailZindex ($hoverSpeed * 2) $aceleration forwards);
    }
    .notification {
        top: -6em;
        background-color: $lime;
        @include transform-origin(50%, 100%);
        @include transform(rotateZ(-430deg) translateY(-5.55em) scale(0.8));
        @include animation(none);
        @include box-shadow( -0.3em 0.1em 1em rgba(0, 0, 0, 0.4) );
        .number {
            color: $navy;
            @include transform(rotateZ(430deg));
        }
    }
}

@-webkit-keyframes setTailZindex {
    0% {
        z-index: 1;
    }
    19.9% {
        z-index: 1;
    }
    20% {
        z-index: 5;
    }
    100% {
        z-index: 5;
    }
}
@keyframes setTailZindex {
    0% {
        z-index: 1;
    }
    19.9% {
        z-index: 1;
    }
    20% {
        z-index: 5;
    }
    100% {
        z-index: 5;
    }
}
@-webkit-keyframes setBagZindex {
    0% {
        z-index: 1;
    }
    19.9% {
        z-index: 1;
    }
    20% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}
@keyframes setBagZindex {
    0% {
        z-index: 1;
    }
    19.9% {
        z-index: 1;
    }
    20% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}
@-webkit-keyframes waiting {
    0% {
        margin-top: 0;
        @include animation-timing-function(cubic-bezier(0, 0, 0.37, 1.01));
    }
    25% {
        margin-top: -3.85em;
    }
    30% {
        margin-top: -4em;
        @include animation-timing-function(cubic-bezier(0.91, 0.01, 1, 1));
    }
    35% {
        margin-top: -3.85em;
    }
    55% {
        margin-top: 0;
        @include animation-timing-function(cubic-bezier(0, 0, 0.37, 1.01));
    }
    59% {
        margin-top: -0.3em;
        @include animation-timing-function(cubic-bezier(0.91, 0.01, 1, 1));
    }
    63% {
        margin-top: 0;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes waiting {
    0% {
        margin-top: 0;
        @include animation-timing-function(cubic-bezier(0, 0, 0.37, 1.01));
    }
    25% {
        margin-top: -3.85em;
    }
    30% {
        margin-top: -4em;
        @include animation-timing-function(cubic-bezier(0.91, 0.01, 1, 1));
    }
    35% {
        margin-top: -3.85em;
    }
    55% {
        margin-top: 0;
        @include animation-timing-function(cubic-bezier(0, 0, 0.37, 1.01));
    }
    59% {
        margin-top: -0.3em;
        @include animation-timing-function(cubic-bezier(0.91, 0.01, 1, 1));
    }
    63% {
        margin-top: 0;
    }
    100% {
        margin-top: 0;
    }
}
@-webkit-keyframes shaking {
    0% {
        right: -6em;
        @include animation-timing-function(ease-out);
    }
    25% {
        right: -5.7em;
    }
    25.1% {
        @include animation-timing-function(ease-in);
    }
    50% {
        right: -6em;
    }
    50.1% {
        @include animation-timing-function(ease-out);
    }
    75% {
        right: -6.3em;
    }
    75.1% {
        @include animation-timing-function(ease-in);
    }
    100% {
        right: -6em;
    }
}
@keyframes shaking {
    0% {
        right: -6em;
        @include animation-timing-function(ease-out);
    }
    25% {
        right: -5.7em;
    }
    25.1% {
        @include animation-timing-function(ease-in);
    }
    50% {
        right: -6em;
    }
    50.1% {
        @include animation-timing-function(ease-out);
    }
    75% {
        right: -6.3em;
    }
    75.1% {
        @include animation-timing-function(ease-in);
    }
    100% {
        right: -6em;
    }
}

.action-tap { display: none; }
@media (max-width: $maxScreen) {
    h1 {
        padding: 0 1em;
    }
    article {
        max-width: 240px;
        margin: 0 auto 2em;
    }
    .action-click { display: none; }
    .action-tap { display: inline; }
    .envelope {
        left: -1.9em;
    }
    .title {
        margin: 2em 0 0;
    }
    h2 {
        display: none;
    }
    input.switch-on[type="radio"]:checked ~ .overlay {
        display: none;
    }
}