.container
  .recipe-card
    .header
      button.edit
        i(aria-hidden='true').fa.fa-pencil
      button.delete
        i(aria-hidden='true').fa.fa-trash-o
    .body
      a(href="#").title Sushi Roll
      h3 Ingredients
      ul.ingredients
        li 
          i(aria-hidden='true').fa.fa-shopping-cart 
          | Sushi Rice
        li 
         i(aria-hidden='true').fa.fa-shopping-cart 
         | Heavy mayonnaise
        li 
         i(aria-hidden='true').fa.fa-shopping-cart 
         | Crab sticks
        li
         i(aria-hidden='true').fa.fa-shopping-cart 
         | Sesame seeds.
         

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');

$card-bg: #FFF;
$card-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$edit-bg: #1abc9c;
$edit-hover-bg: #16a085;
$edit-font-color: #FFF;
$delete-bg: transparent;
$delete-hover-bg: #e74c3c;
$delete-font-color: #fff;
$header-box-shadow: 0 -9px 0 rgba(26, 188, 156,1.0);
$font: 'Raleway', sans-serif;
$title-border: 1px solid #16a085;
$title-font-color: #16a085;
$ingredients-title-font-color: #27ae60;
$ingredient-font-color: #7f8c8d;
$ingredient-icon-color: #1abc9c;


html {
  font-size: 16px;
}

body {
  margin: 0;
  background: rgba(236, 240, 241,1.0);
}

.container {
  height: 500px;
  width: 500px;
  margin: 20px auto;
  position: relative;
}

.recipe-card {
  background: $card-bg;
  box-shadow: $card-box-shadow;
  position: absolute;
  left: 25%;
  top: 5%;
  width: 50%;
  
  .header {
    background: url(http://lorempixel.com/output/food-q-c-400-400-8.jpg) top center;
    background-size: cover;
    height: 200px;
    width: 100%;
    overflow: hidden;
    position: relative;
    
    .edit {
      height: 50px;
      width: 50px;
      position: absolute;
      bottom: 13%;
      left: 10%;
      border-radius: 50%;
      background: $edit-bg;
      border: 0;
      color: $edit-font-color;
      font-size: 1.5rem;
      transition: all .5s ease-in;
      cursor: pointer;
      z-index: 3;
      &:hover {
        background: $edit-hover-bg;
        // transform: rotate(360deg);
      }
      &:focus {
        outline: 0;
      }
    }
    .delete {
      height: 50px;
      width: 50px;
      position: absolute;
      top: 0%;
      right: 0%;
      border-radius: 0%;
      background: $delete-bg;
      border: 0;
      color: $delete-font-color;
      font-size: 1.5rem;
      transition: all .5s ease-in;
      cursor: pointer;
      z-index: 3;
      &:hover {
        background: $delete-hover-bg;
        // transform: rotate(360deg);
      }
      &:focus {
        outline: 0;
      }
    }
    &:after {
      height: 100%;
      width: 130%;
      background: #FFF;
      content: '';
      position: absolute;
      top: 85%;
      left: -15%;
      transform: rotate(10deg);
      box-shadow: $header-box-shadow;
    }
  }
  
  .body {
    padding: 15px 15px 25px 15px;
    .title {
      background: transparent;
      border-bottom: $title-border;
      color: $title-font-color;
      display: block;
      margin: 0;
      margin-bottom: 5px;
      font-family: $font;
      font-size: 1.5rem;
      font-weight: 300;
      padding: 0 0 5px 0;
      text-decoration: none;
    }  
    h3 {
      color: $ingredients-title-font-color;
      font-family: $font;
      font-weight: 300;
      margin: 0;
      margin-bottom: 15px;
      padding: 0;
      text-align: right;
    }
    
    ul.ingredients {
      margin: 0;
      padding: 0;
      list-style: none;
      
      li {
        color: $ingredient-font-color;
        font-size: 1rem;
        font-family: $font;
        .fa {
          color: $ingredient-icon-color;
          margin-right: .5rem;
          margin-bottom: .8rem;
        }
      }

    }
  }

}