@import "common";
@import "../../compass/css3/box-sizing";

// Styles for the various cookbook platform icons

.cookbook_platforms {
  @include box-sizing(border-box);
  @include clearfix;
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
}

li.cookbook_platform_icon {
  float: left;
  height: rem-calc(16);
  line-height: rem-calc(18);
  margin: rem-calc(0 10 0 0);
  width: rem-calc(16);

  &:last-child {
    margin-bottom: rem-calc(0);
  }

  &[data-icon]:before {
    color: $primary_gray;
    content: attr(data-icon);
  }

  &.has-tip { border: none; }

  span { display: none; }

  .cookbook_show_sidebar & {
    font-size: rem-calc(20);

    &[data-icon]:before {
      color: adjust-lightness($primary_gray, 20%);
    }
  }
}

li.cookbook_no_platform_icon {
  float: left;
  height: rem-calc(16);
  line-height: rem-calc(18);
  margin: rem-calc(0 10 0 0);
  width: rem-calc(16);
  color: $primary_gray;

  &:hover {
    color: $primary_gray;
  }

  &:last-child {
    margin-bottom: rem-calc(0);
  }

  &.has-tip { border: none; }

  .cookbook_show_sidebar & {
    font-size: rem-calc(20);

    &[data-icon]:before {
      color: adjust-lightness($primary_gray, 20%);
    }
  }
}
