@import "common";
@import "foundation/components/grid";
@import "../../compass/css3/border-radius";
@import "../../compass/css3/box-shadow";
@import "../../compass/css3/inline-block";

.cookbook_stats {
  list-style: none;
  float: right;
  margin: 0;

  li {
    color: $primary_gray;
    font-size: rem-calc(10);
    display: inline;
    margin: rem-calc(0 16 0 0);
    text-align: center;

    &:last-child {
      margin: 0;
    }

    .fa {
      @include inline-block;
      font-size: rem-calc(16);
      margin: rem-calc(-2 8 0 10);
    }

    @media #{$mobile-only} {
      .fa {
        margin: rem-calc(-2 4 0 0);
      }
    }

    h5 {
      color: $primary_gray;
      font: {
        size: rem-calc(10);
        weight: $normal;
      }
      text-transform: none;
      display: inline;
      margin: 0;
    }
  }

  @media #{$mobile-only} {
    li {
      margin: rem-calc(0 8 0 0);
    }
  }

  @media #{$mobile-only} {
    .follow {
      font-size: rem-calc(2);
      padding: rem-calc(6);
    }
  }
}

// Cookbook row element
.cookbook_body {
  @include grid-row();
}

// Cookbooks sidebar column
.cookbook_sidebar {
  @include grid-column($columns: 3, $collapse: true);

  ul {
    border-bottom: rem-calc(2) solid lighten($secondary_gray, 35%);
    @include box-sizing(border-box);
    list-style: none;
    margin: rem-calc(0 30 20 0);
    padding: rem-calc(0 0 20 0);

    li {
      line-height: rem-calc(30);

      &:before {
        content: "\00b7";
        display: block;
        float: left;
        font-size: rem-calc(52);
        line-height: rem-calc(15);
        margin: rem-calc(5 7 0 0);
      }

      a {
        color: $secondary_gray;
        font-size: rem-calc(12);
        display: block;
        line-height: rem-calc(30);
        padding-left: rem-calc(20);
        @include single-transition($speed: 100ms);

        &:hover {
          background-color: $clouds;
          @include border-radius(rem-calc(3));
          color: darken($secondary_gray, 20%);
        }

        em {
          font: normal $bold rem-calc(12) $accent_font;
          @include inline-block;
          min-width: rem-calc(28);
        }

        &.active {
          background-color: lighten($clouds, 2%);
          @include border-radius(rem-calc(3));
          color: darken($secondary_gray, 20%);
          font-weight: $bold;
        }
      }

      .fa {
        color: darken($secondary_gray, 20%);
        font-size: rem-calc(12);
        margin: rem-calc(10 5 0 0);
      }

      @media #{$mobile-only} {
        .fa {
          margin: rem-calc(25 20 0 0);
        }
      }

      @media #{$small-only} {
        .fa {
          margin: rem-calc(25 20 0 0);
        }
      }

    }
  }
}

@media #{$mobile-only} {
  .cookbook_sidebar {
    @include grid-row();

    ul {
      @include clearfix;
      @include grid-column($columns: 12, $collapse: true, $float: none);
      margin: rem-calc(0 -20 40);
      padding: 0;
      width: auto;

      li {
        border-left: rem-calc(5) solid;
        float: left;
        line-height: rem-calc(64);
        width: 50%;

        &:before {
          display: none;
          font-size: rem-calc(64);
          line-height: rem-calc(50);
          margin-left: rem-calc(8);
        }

        &:nth-child(2n+2) a {
          border-right: none;
        }

        a {
          border-top: rem-calc(2) solid lighten($secondary_gray, 35%);
          border-right: rem-calc(2) solid lighten($secondary_gray, 35%);
          font-size: rem-calc(15);
          line-height: rem-calc(64);
          padding-left: rem-calc(15);

          em {
            font-size: rem-calc(14);
            margin-top: rem-calc(-5);
          }
        }
      }
    }
  }
}

@media #{$small-only} {
  .cookbook_sidebar {
    @include grid-row();

    ul {
      @include clearfix;
      @include grid-column($columns: 12, $collapse: true, $float: none);
      margin: rem-calc(0 0 40);
      padding: 0;
      width: auto;

      li {
        border-left: rem-calc(5) solid;
        float: left;
        line-height: rem-calc(64);
        width: 50%;

        &:before {
          display: none;
          font-size: rem-calc(64);
          line-height: rem-calc(50);
          margin-left: rem-calc(8);
        }

        a {
          border-top: rem-calc(2) solid lighten($secondary_gray, 35%);
          border-right: rem-calc(2) solid lighten($secondary_gray, 35%);
          font-size: rem-calc(15);
          line-height: rem-calc(64);
          padding-left: rem-calc(15);

          em {
            font-size: rem-calc(14);
            margin-top: rem-calc(-5);
          }
        }
      }
    }
  }
}

.cookbook_sidebar_heading {
  border-bottom: rem-calc(2) solid lighten($secondary_gray, 35%);
  color: $concrete;
  font: {
    size: rem-calc(12);
    weight: $normal;
  }
  margin: rem-calc(13 30 20 0);
  padding-bottom: rem-calc(19);
  text-transform: uppercase;
}

@media #{$mobile-only} {
  .cookbook_sidebar_heading {
    display: none;
  }
}

@media #{$small-only} {
  .cookbook_sidebar_heading {
    display: none;
  }
}

.versions_count {
  color: darken($primary_gray, 10%);
  font: {
    size: rem-calc(12);
    weight: $bold;
  }
  @include inline-block;
  margin: rem-calc(0 20 0 0);
}
