// discussion - thread layout
// ====================
// NOTE: thread = (post + (responses and comments))

// Table of Contents 
// * +general thread layout
// * +thread - wrapper styling
// * +thread - elements - shared styles
// * +post - individual element styling
// * +post - answered question - collapsed comment area

// +general thread layout
body.discussion, .discussion-module {

  // post layout
  .discussion-post {
    @include padding(($baseline*1.5), ($baseline*1.5), $baseline, ($baseline*1.5));
    @include border-radius(3px, 3px, 0, 0);
    background-color: $white;

    .wrapper-post-header {
      padding-bottom: 0;
      margin-bottom: ($baseline*0.75);
    }

    .post-header-content {
      display: inline-block;
      width: flex-grid(9,12); 
    }

    .post-header-actions {
      @include float(right);
      width: flex-grid(3,12);
    }
  }

  // response layout
  .discussion-response {
    min-height: ($baseline*5);

    .response-header-content {
      display: inline-block;
      vertical-align: top;
      width: flex-grid(11,12);
    }

    .response-header-actions {
      @include float(right);
      @include right($baseline);
      position: absolute;
      top: ($baseline);
    }
  }

  // comments layout
  .discussion-comment {

    .response-body {
      @extend %t-copy-sub2;
      display: inline-block;
      margin-bottom: ($baseline/2);
      width: flex-grid(10,12);

      p + p {
        margin-top: 12px;
      }
    }

    .comment-actions-list {
      @include float(right);
    }

    .posted-details {
      margin-top: 0;
    }
  }
}

// +thread - wrapper styling
.forum-thread-main-wrapper {
  @include border-radius(3px, 3px, 0, 0);
  border-bottom: 1px solid $white; // Prevent collapsing margins
  background-color: $white;
}

// +thread - elements - shared styles
body.discussion {

  .discussion-post, .discussion-response, .discussion-comment {
    @include clearfix();
    
    // thread - images
    .author-image {
      @include margin-right($baseline/2);
      display: inline-block;
      vertical-align: top; 

      // STATE: No profile image 
      &:empty {
        display: none;
      }

      // CASE: post image
      &.level-post {
        height: $post-image-dimension;
        width: $post-image-dimension;
      }

      // CASE: response image
      &.level-response {
        height: $response-image-dimension;
        width: $response-image-dimension;
      }

      // CASE: comment image
      &.level-comment {
        height: $comment-image-dimension;
        width: $comment-image-dimension;
      }

      img {
        border-radius: 3px;
      }
    }

    // thread - header content details
    .posted-details {
      @extend %t-copy-sub2;
      margin-top: ($baseline/5);
      color: $gray-l1;

      .username {
        @extend %t-strong;
        display: inline;
      }

      .timeago, .top-post-status {
        color: inherit;
      }
    }
  }

  .discussion-post .post-body, .discussion-response .response-body {
    @include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
  }
}

// +post - individual element styling
body.discussion .discussion-post, body.discussion .discussion-article {
  // NOTE: discussion-article is used for inline discussion modules.
  @include clearfix();

  .post-header-content {

    // post title
    .post-title {
      @extend %t-title4;
      @extend %t-ultrastrong;
      margin-bottom: ($baseline/4);
      letter-spacing: 0;
    }
  }

  // post body
  .post-body {
    @extend %t-copy-sub1;
    // clear: both; //TO-DO: confirm that removing this is ok for all cases of discussion posts.
  }

  // post context
  .post-context {
    @extend %t-copy-sub2;
    margin-top: $baseline;
    color: $gray-d1;
    padding: ($baseline*0.75);
    background-color: $gray-l6;
    border-radius: 3px;

    // CASE: no courseware context or cohort visiblity rules
    &:empty {
      display: none;
    }

    // post visibility - cohorts
    .group-visibility-label {
      margin-top: ($baseline/4);
    }
  }
}

// +post - answered question - collapsed comment area
body.discussion, .discussion-thread.expanded {
  .forum-thread-main-wrapper {
    box-shadow: 0 1px 3px $shadow;
  }
}

