//--
    TODO: create mixin with params
    TODO: test with database
    TODO: add remaning data... rating

mixin recipe
  article.recipe-card(itemscope itemtype="http://schema.org/Recipe")
    .recipe-card__cover(style="background-image: url('http://lh3.googleusercontent.com/v8eIT6RXj1bPB6QIw3P9WuExt-3bNQRbBQ4I_j351Qdzd3o5jk-6praORXvrzWY6uZjNdgO3OgqyXHS1uVUn=s480-c-e365')")
      a.recipe-card__overlay(href="#")
        .recipe-card__overlay-info
          h1.recipe-card__title(itemprop="name")
            | Greek Salmon Souvlaki Gyros with Tzatziki
          .recipe-card__details
            time.recipe-card__time(datetime="PT30M" itemprop="prepTime")
              .recipe-card__time-icon
                i.fa.fa-clock-o
              | 30''
            .recipe-card__ingredients
              = "4 Ingredients"
      img.recipe-card__image(itemprop="image" src="http://www.placehold.it/350x350" alt="Greek Salmon Souvlaki Gyros with Tzatziki")
    //.recipe-card__body
    .recipe-card__footer
      .recipe-card__rating
        .recipe-card__rating-label Rating 3.5/5
        .recipe-card__rating-bar
          .recipe-card__rating-value(style="width: 60%;")
      .recipe-card__cta
        a.recipe-card__button(href="#")
          = "Cook it"
    .recipe-card__site
      = "from "
      a.recipe-card__site-link(href="#") allrecipes.com
.recipe-grid
  .recipe-grid__item
    +recipe
  .recipe-grid__item
    //+recipe
  .recipe-grid__item
    //+recipe
  .recipe-grid__item
    //+recipe

//- TODO: add transitions

//-- Font Face

@font-face {
    font-family: font-light;
    src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/CircularSpotifyText-Light.otf);
}
@font-face {
    font-family: font-bold;
    src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/CircularSpotifyText-Bold.otf);
}
//

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

$color-green: #b3f5ad;
$color-red: #D0606C;
$color-orange: #EC8550;
$color-black: #212121;
$color-brown-light: #FCF0E0;

* {
  box-sizing: border-box;
}

body {
  padding: 50px;
  background-color: #eee;
}

//-- Recipe Grid

.recipe-grid {
  @extend %clearfix;
  $gutter: 30px;
  $columns: 4;

  margin-left: -($gutter / 2);
  margin-right: -($gutter / 2);
  
  & > &__item {
    padding-left: ($gutter / 2);
    padding-right: ($gutter / 2);
    float: left;
    width: 100% / $columns;
    
    &:nth-of-type(#{$columns}n + 1) {
      clear: none;
    }
  }
}

//-- Recipe Card

.recipe-card {
  $box-shadow-color: #ddd;
  overflow: hidden;
  font-family: font-light;
  border-radius: 5px;  
  background-color: $color-black;
  // box-shadow: 1px 1px 4px 2px $box-shadow-color;
  // border: 1px solid $border-color; 
  
  &__cover {
    position: relative;
    padding-top: 80%;
    background-color: #ccc;
    text-shadow: 0px 0px 2px rgba($color-black, 1);
     background-position: center center;
     bakground-repeat: no-repeat;
     background-size: cover;
  }
  
  &__title {
    margin: 0;
    font-size: 22px;
    color: white;
    line-height: 1.2;
    padding: 0 20px 10px;
  }
  
  &__details {
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px solid rgba($color-black,1);
    color: #ddd;
    padding: 8px 10px 8px 20px;
    background-color: rgba($color-black,.4);
    font-size: 14px;
  }
  
  &__image {
    // TODO: hide by js
    display: none;
  }
  
  &__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
    background: linear-gradient(top, rgba($color-black, 0.2 ) 0%, rgba($color-black, 0.9 ) 100% );
    
    &-info {
      position: absolute;
      bottom: 0;
      // padding: 20px;
      z-index: 1;
    }
  }
  
  &__time,
  &__ingredients {
    display: inline-block;
    line-height: 1;
    margin-right: 10px;
  }
  
  &__time {
    &-icon {
      display: inline-block;
      margin-right: 3px;
    }
  }
  
  &__ingredients {

  }
  
  &__footer {
    @extend %clearfix;
    padding: 10px 15px;
  }
  
  &__rating,
  &__cta {
    width: 50%;
    padding: 0 5px;
    float: left;
  }
  
  &__rating {
    
    &-label {
      color: #ccc;
      font-size: 10px;
      text-transform: uppercase;
      margin: 4px 0;
    }
    
    &-bar {
      position: relative;
      background: #424242;
      height: 6px;
      border-radius: 6px;
      overflow: hidden;
    }
    
    &-value {
      background-color: $color-red;
      position: absolute;
      border-radius: 6px;
      top: 0;
      bottom: 0;
      left: 0;
    }
  }
  
  &__button {
    color: #fff;
    background-color: $color-red;
    padding: 6px 10px;
    border-radius: 3px;
    display: block;
    text-align: center;
    font-size: 16px;
    // font-family: font-bold;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
  }
  
  &__site {
    color: #fff;
    font-size: 12px;
    padding: 0 20px 15px;
    line-height: 1;
    font-style: italic;
    
    &-link {
      color: $color-green;
      text-decoration: none;
    }
  }
}