<div id="coffee">
  <div id="handle"></div>
  <div id="cup"></div>
  <div id="liquid"></div>
  <div id="shadow"></div>
</div>

@import "compass/css3";

$red: #e74b3d;
$coffee: #d15304;
$radius: 150px; /* try changing this */

@mixin size-down($difference){
    $resize: $radius - $difference;    
    width: $resize * 2;
    height: $resize * 2;
    border-radius: $resize;
    top: $difference;
    left: $difference; 
}

body { 
  background-color: $red;
  padding-top: 50px;
}

#coffee{
  width: $radius * 2;
  margin: 0 auto;
  position: relative;
}

#cup {
  position: relative;
  width: $radius * 2;
  height: $radius * 2;
  border-radius: $radius;
  background: #fff;
  border: 1px solid #ddd;
  
  &:after{
    display:block;
    position: relative;
    background: #ddd;
    content: "";
    
    $difference: 12px;
    @include size-down($difference);
    border: 1px solid #d9d9d9;  
    
    box-shadow: inset 20px 0px 10px rgba(0, 0, 0, 0.1);
  }
}

#handle{
  position: absolute;
  background: #fff;
  top: $radius - 30px;
  left: -90px;
  width: 120px;
  height: 60px;
  border-radius: 16px/30px;
  
  &:before{
    content: "";
    display:block;
    position: relative;
    background: #fff;
    top: -3px;
    left: 6px;
    width: 120px;
    height: 40px;
    border-radius: 16px/30px;
    z-index:-1;
    
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg); 
    -ms-transform:rotate(-3deg);    
    transform:rotate(-3deg);
  }
  
  &:after{ 
    content: "";
    display:block;
    position: relative;
    background: #fff;
    top: -17px;
    left: 6px;
    width: 120px;
    height: 40px;
    border-radius: 16px/30px;
    z-index:-1;
    
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);    
    transform:rotate(3deg);
  }
}

#liquid{
  position: absolute;
  $difference: 30px;
  $resize: $radius - $difference;
  @include size-down($difference);

  background: $coffee;
  overflow: hidden;
  
  &:before{
    content: "";
    display:block;
    position: relative;
    background: lighten($coffee, 14%);
    width: $resize * 2.2;
    height: $resize * 2.2;
    border-radius: ($resize * 2.2) / 2;    
    top:-10px;
    left: $radius / 3;
    
  }
}

#shadow{
  position: absolute;
  top: 0;
  left: $radius;
  background-color: darken($red, 4%);
  height: ($radius * 2) + 2px;
  width: $radius * 2;
  border-radius: 0 $radius $radius 0;
  z-index: -10;
}