@import "symbols";

.panel-topic-list .panel-body{
  min-height: 260px;
  
  .no-topics-notice{
    margin: 10px;
    color: $gray;
  }
  
  .topic-item {
    height: 50px;
    font-size: 1.2em;
    padding: 10px 10px;
    border-bottom: 1px solid $gray-inner-border;

    &:hover{
      background: $gray-content-hover;
    }

    .topic-author-avatar{
      width: 30px;
      height: 30px;
      float: left;
      border-radius: 2px;
    }

    .topic-meta-primary{
      width: 40px;
      margin-top:5px;
      text-align: right;

      .counts{
        font-size:13px;
      }
      .topic-type{
        background: $gray-lighter;
        color: $text-muted;
        padding: 3px;
        border-radius: 4px;
        font-size: .8em;
        position: relative;
        top: -2px;
      }
    }

    &.featured .topic-meta-primary {
      .topic-type {
        background: $brand-primary;
        color: white;
      }
    }

    .topic-title{
      color: $text-color;
      padding: 0 10px;
      margin-top:5px;
      width: calc(100% - 165px);
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover{
        color:$text-color
      }
      &:visited{
        color:$text-muted
      }
    }

    @media (max-width: 767px) {
      .topic-title {
        width: calc(100% - 80px);
      }
    }
    
    .topic-meta-secondary {
     
      .last-replied-user-avatar{
        width:18px;
        height:18px;
        border-radius: 2px;
      }
      
      .last-replied-at{
        display:inline-block;
        margin-left: 5px;
        width:60px;
        text-align: right;
        font-size: 13px;
        padding-top: 5px;
        color: #777777;
      }
    }
  }
}

