@import "common";
@import "foundation/components/grid";
@import "../compass/css3/inline-block";

.listing {
  list-style-type: none;
  margin: rem-calc(0 0 20 0);

  li {
    margin-bottom: rem-calc(20);

    .header {
      @include grid-row();
      background-color: white;
      border-top: 1px solid $cookbook_border;
      border-right: 1px solid $cookbook_border;
      border-left: 1px solid $cookbook_border;
    }

    .header-content {
      @include grid-column($columns: 12, $collapse: true);
      background-color: white;
      min-height: rem-calc(62);
      padding: rem-calc(15 30);

      .owner {
        float: right;

        h5 {
          display: inline;
          margin-bottom: 0;
        }

        .gravatar {
          @include box-sizing(content-box);
          width: rem-calc(24);
        }

        @media #{$small-down} {
          .gravatar {
            width: rem-calc(20);
          }
        }
      }

      .title {
        @include dark-links;
        font-size: rem-calc(17);
        line-height: rem-calc(17);
        color: $primary_blue;
        float: left;
        margin: rem-calc(10 0 0);

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

        small {
          @include inline-block;
          color: $secondary_gray;
          font: {
            size: rem-calc(12);
            weight: $normal;
          }
        }
      }

      .meta {
        color: $concrete;
        font: $normal rem-calc(12) $accent_font;
        line-height: rem-calc(16);
        float: left;
        margin: rem-calc(10 0 0);
        text-align: right;

        .has-tip {
          border-bottom: none;
          color: $concrete;
          font: $normal rem-calc(12) $accent_font;
        }

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

        small {
          color: lighten($silver, 5%);
          font: {
            size: rem-calc(10);
            weight: $normal;
          }
        }
      }

      @media #{$small-down} {
        .meta {
          display: none;
        }
      }
    }

    @media #{$mobile-only} {
      .header-content {
        padding: rem-calc(15 10 10 20);
      }
    }

    @media #{$small-only} {
      .header-content {
        padding: rem-calc(15 10 10 20);
      }
    }

    .body {
      @include grid-row();
      background-color: $cookbook_partial_sidebar;
      border-top: 1px solid $cookbook_border;
      border-right: 1px solid $cookbook_border;
      border-left: 1px solid $cookbook_border;
    }

    .body-content {
      @include grid-column($columns: 12, $collapse: true);
      background-color: white;
      border-bottom: 1px solid $cookbook_border;
      padding: rem-calc(20 30 30);

      p {
        color: $concrete;
        font-size: rem-calc(16);
        margin: 0;
      }

      code.install {
        display: block;
        font-weight: normal;
        margin-top: rem-calc(20);
        padding: rem-calc(8 16 8 16);
      }
    }

    .bottom {
      @include grid-row();
      background-color: $cookbook_partial_sidebar_footer;
      border-right: 1px solid $cookbook_border;
      border-bottom: 1px solid $cookbook_border;
      border-left: 1px solid $cookbook_border;
    }

    .bottom-content {
      background-color: $cookbook_footer;
      @include grid-column($columns: 12, $collapse: true);
      min-height: rem-calc(62);
      padding: rem-calc(15 30);

      h5 {
        color: $concrete;
        font: {
          size: rem-calc(10);
          weight: $normal;
        }
        text-transform: uppercase;
        margin: rem-calc(0 0 4);
      }

      .cookbook_platforms_content {
        float: left;
      }

      .cookbook_badges_content {
        float: left;
        margin-left: 1em;
      }
    }
  }
}
