$b1: rgba( 102, 177, 245, 1 )
$b2: rgba( 77, 150, 245, 1 )
$b3: rgba( 60, 100, 203, 1 )
$b4: rgba( 39, 69, 176, 1 )
  
$background: rgba( 230, 231, 232, 1 )
$check: rgba( 255, 255, 255, 1 )
  
$s: 254

=default-transition( $duration )
  @include transition( all $duration cubic-bezier(.46,.01,.2,1.51))

html , body
  background-color: $background
  overflow: hidden
  position: absolute
  height: 100%
  width: 100%
  left: 0
  top: 0

.inbox
  @include backface-visibility( hidden )
  @include default-transition( 0.3s )
  @include transition-delay( 0.4s )
  @include translate( -50% , -50% )
  cursor: pointer
  position: absolute
  top: 50%
  left: 50%
  background-color: $b3
  width: #{$s}px
  height: #{$s/2}px
  
  &:before , &:after
    bottom: 0
    position: absolute
    display: inline-block
    content: ""
    
  &:before
    left: 0
    border-bottom: #{$s/2}px solid $b2
    border-left: 0 solid transparent
    border-right: #{$s}px solid transparent
    z-index: 3
    
  &:after
    right: 0
    border-bottom: #{$s/2}px solid $b1
    border-right: 0 solid transparent
    border-left: #{$s}px solid transparent
    z-index: 4
    
  .flap
    @include default-transition( 0.5s )
    @include transition-delay( 0.25s )
    @include transform-origin( top , center )
    @include rotateX( 00deg )
    position: absolute
    top: 0
    left: 0
    border-top: #{$s/4}px solid $b4
    border-right: #{$s/2}px solid transparent
    border-left: #{$s/2}px solid transparent
    z-index: 1
    
  .check
    @include default-transition( 0.35s )
    @include transition-delay( 0.1s )
    z-index: 2
    position: absolute
    margin-left: -#{$s/8}px
    @include translate( 0 , #{$s/8}px )
    top: 50%
    left: 50%
    
    &:before , &:after
      content: ""
      @include default-transition( 0.35s )
      @include transition-delay( 0.1s )
      position: absolute
      display: block
      height: 0
      width: 0
      padding: #{$s/24}px
      background-color: $check
      border-radius: #{$s/94}px
      top: 0
      left: 0
    
    &:before
      @include transform-origin( #{$s/24}px , center )
      @include rotate( -45deg )
        
    &:after
      @include transform-origin( #{$s/24}px , center )
      @include rotate( -135deg )
     
  &:hover
    @include translate( -50% , -30% )
    @include transition-delay( 0s )
      
    .flap
      @include rotateX( -180deg )
      border-top: #{$s/3}px solid $b4
        
    .check
      @include translate( 0 , -#{$s/5}px )
      @include transition-delay( 0.35s )
        
      &:before , &:after
        @include transition-delay( 0.35s )
        
      &:before
        width: #{$s/2}px
        
      &:after
        width: #{$s/5}px