* 
* 
* 

@import "compass/css3";

$background:   #200639;
$purple:       transparentize(#9557AD,0.5);
$green:        transparentize(#4DB7C7,0.5);
$blue:         transparentize(#0F90AE,0.5);


body {
  font-size:20px;
  background:$background;
}

ul {
  position:relative;
  width:10em;
  height:6em;
  cursor:pointer;
  
  &:hover li {
    border-width:5em !important;
    top:-4em !important;
    left:0 !important;
    @include transform(rotate(0) skew(0) !important);
    @include transition(all 1s);
  }
  &:hover li:after { 
    border-width:1em 5em !important;
    @include transform(rotate(0) skew(0) !important);
    top:5em !important;
    left:-5em !important;
    
    
  }
  
  li {
    width: 0;
    height: 0;
    border-style:solid;
    position:absolute;
    top: 0;
    left: 0;
    @include transition(all 1s);
    &:after {
      width:0;
      height:0;
      border-style:solid;
      position:absolute;
      content:"";
      @include transition(all 1s);
    }
  }
  li:nth-child(1) {
    border-width: 0 8em 6em 0;
    border-color: transparent transparent $purple;
    @include transform(skew(15deg));
    z-index:5;
    &:after {
      top:1.8em;
      left:-0.87em;
      border-width: 0 5.75em 2.4em 0;
      border-color:  transparent transparentize(white,0.8) transparent transparent;
      @include transform(rotate(37deg) skew(22deg));
      z-index:4;
    }
  }
  
  li:nth-child(2) {
    border-width: 6em 4em;
    border-color: transparent transparent $green;
    top: -6em;
    left: 0.75em;
    z-index:0;
    &:after {
      border-width:0 0 6em 4em;
      border-color: transparent transparent transparentize(white,0.9) transparent;
      right:0;
    }
  }
  
  li:nth-child(3) {
    border-width: 0 0 6em 8em;
    border-color: transparent transparent $blue;
    @include transform(skew(-15deg));
    left:1.5em;
    z-index:3;
    &:after {
      top:1.75em;
      left:-4.85em;
      border-width: 0 0 2.4em 5.75em;
      border-color: transparent transparent transparent transparentize(white,0.8);
      @include transform(rotate(-37deg) skew(-22deg));
      z-index:5;
    }
  }
}

// Design from Dribbble: http://dribbble.com/shots/1183733-Posh-wordpress-theme-logo-design