@import "woople-theme/variables.css.less";

.content-item-header {
  margin-left:0;
  margin-top:@contentPadding * -1;
  padding-top:@contentPadding * 0.5;
  padding-left:@contentPadding;
  padding-bottom:@contentPadding * 0.5;
  font-weight:bold;
  border-bottom:solid 1px @insetContentBorder;

  a {
    color:@secondaryTextColour;
  }

  .span1:first-child {
    margin-left:0;
  }

  .icon-chevron-up {
    display:none;
    background-image:url(/assets/woople-theme/icons/sortASC.png);
    background-position:0 0;
  }

  .icon-chevron-down {
    display:none;
    background-image:url(/assets/woople-theme/icons/sortDESC.png);
    background-position:0 0;
  }

  .sortAsc {
    .icon-chevron-up { display:inline-block; }
  }

  .sortDesc {
    .icon-chevron-down { display:inline-block; }
  }
}

.touch .content-item:active {
  .box-shadow(inset 0 0 5px rgba(0,0,0,0.25));
  padding-bottom:@contentPadding * 1.5 - 1;
  padding-top:@contentPadding + 1;
}

.content-item {
  position:relative;
  margin-left:0;
  padding-left:@contentPadding;
  border-bottom:solid 1px @insetContentBorder;
  padding-top:@contentPadding;
  padding-bottom:@contentPadding * 1.5;

  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -o-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  tap-highlight-color: transparent;

  > * { 
    position:relative;
    z-index:2;
  }

  .content-item-image {
    margin-left:0;

    .loadingAction {
      width:70px;
      height:70px;
    }

    img {
      .course-image();
    }

  }

  .content-item-content {
    h2 {
      .content-title();

      a {
        color:@primaryTextColour;
      }
    }

    .content-item-metadata  {
      color:@secondaryTextColour;

      .badge {
        background:@highlight;
        cursor:initial;
      }

      .icon-star {
        width:15px;
        height:15px;
        margin-top:-1px;
        background-image:url(/assets/woople-theme/star-icon.png);
        background-position:0 0;
      }

      em {
        color:@primaryTextColour;
        font-style:normal;
      }
    }
  }

  .content-item-progress-bar {
    height:2px;
    position:absolute;
    z-index:1;
    left:0;
    bottom:0;
    background:fade(@highlight, 100%);
  }
}

.content-item.completed {
  background-image:url(/assets/woople-theme/completed-triangle.png);
  background-position:top right;
  background-repeat:no-repeat;
}

@media (max-width: 767px) {
  .content-item-header {
    display:none;
  }

  .content-item {
    padding-left:@phoneMargin;

    .content-item-image {
      width:@phoneImageSize;
      height:@phoneImageSize;
      float:left;
      margin-right:@phoneMargin;

      .loadingAction {
        width:@phoneImageSize;
        height:@phoneImageSize;
      }
    }

    .content-item-content {
      h2 {
        margin-left:@phoneOffset;
        margin-right:@phoneMargin;
        font-size:14px;
      }
    }

    .content-item-metadata {
      margin-left: @phoneOffset;

      > div {
        float:left;
        margin-right:@phoneMargin;
      }
    }
  }
}