// discussion - mixins and extends
// ====================

@mixin discussion-button() {
  display: block;
  border: 1px solid;
  border-radius: $forum-border-radius;
  height: 35px;
  color: $white;
  line-height: 35px;
  font-size: $forum-base-font-size;
  white-space: nowrap;  // Prevent word-break in Arabic in Google Chrome
  text-shadow: none;
  padding: 0 ($baseline*0.75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
}

@mixin white-button {
  @include discussion-button();
  border-color: #aaa;
  background-color: $white;
  color: $dark-gray;

  &:hover, &:focus {
    background-color: $white;
  }
}

@mixin discussion-wmd-input {
  box-sizing: border-box;
  margin-top: 0;
  border: 1px solid $forum-color-border;
  border-radius: $forum-border-radius $forum-border-radius 0 0;
  padding: ($baseline/2);
  width: 100%;
  height: 125px;
  background: $forum-color-background;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  font-size: $forum-base-font-size;
  font-family: $sans-serif;
  line-height: 1.6;
}

@mixin discussion-wmd-preview-container {
  box-sizing: border-box;
  @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
  border: 1px solid $gray-l1;
  border-top: none;
  width: 100%;
  background: $gray-l4;
  box-shadow: 0 1px 3px $shadow-l1 inset;
}

@mixin discussion-new-post-wmd-preview-container {
  @include discussion-wmd-preview-container;
  border-color: $gray-d3;
  box-shadow: 0 1px 3px $shadow-d1 inset;
}

@mixin discussion-wmd-preview-label {
  @include padding-left($baseline/4);
  padding-top: 3px;
  width: 100%;
  color: $gray-l2;
  font-size: $forum-small-font-size;
}

@mixin discussion-wmd-preview {
  padding: ($baseline/2) $baseline;
  width: auto;
  color: $gray-d3;

  ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
    @include padding-left($baseline*2);
    @include padding-right(0);
  }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

// extends - content - text overflow by ellipsis
%cont-truncated {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin forum-user-label($color) {
  @include margin-left($baseline/4);
  @extend %t-weight5;
  font-size: $forum-small-font-size;
  vertical-align: middle;
  border-radius: $forum-border-radius;
  padding: 0 ($baseline/5);
  background: $color;
  font-style: normal;
  color: white;
}
