/* Variables */
$comment-padding: 1rem;

$comment-vote-up-color: $success;
$comment-vote-down-color: $alert;

$comment-nested-bg: $light-gray;
$comment-nested-alt-bg: $white;

$comment-highlight-bg: rgba($secondary,.15);
$comment-pinned-bg: lighten($warning,45);

$comment-form-bg: $light-gray;

/* Comments */

.comments{
  padding-top: 3rem;
}

.comment-thread{
  @extend .card;
}

.comment-thread__title{
  font-weight: normal;
  font-size: 90%;
  text-transform: none;
  color: $muted;
}

.show-more--comment-thread{
  margin-top: -$card-margin-bottom / 2;
  margin-bottom: $card-margin-bottom;
}

.comment{
  &--highlight{
    background: $comment-highlight-bg !important;
  }
  &--pinned{
    background: $comment-pinned-bg !important;
  }
}

.comment__header{
  padding: $comment-padding;
}

.comment__content{
  padding: 0 $comment-padding;
  > :last-child{
    margin-bottom: 0;
  }
}

.comment__footer,
.comment__additionalreply{
  padding: $comment-padding;
  font-size: 90%;
  @include clearfix;
}

.comment--nested{
  background: $comment-nested-bg;
  margin: $comment-padding;
  padding-bottom: 1px;
  &.comment--nested--alt{
   background: $comment-nested-alt-bg;
  }
  &:first-of-type{
    margin-top: 0;
  }
}

.comment__reply{
  float: left;
  color: $muted;
}

.comment__votes{
  float: right;
}
.comment__votes--up{
  color: $muted;
  .icon{
    color: $comment-vote-up-color;
  }
  &:hover,
  &.is-vote-selected{
    color: darken($comment-vote-up-color,10);
    .icon{
      color: inherit;
    }
  }
  &.is-vote-notselected{
    color: $muted;
    opacity: .3;
    .icon{
      color: inherit;
    }
  }
}
.comment__votes--down{
  color: $muted;
  padding-left: .3rem;
  .icon{
    color: $comment-vote-down-color;
  }
  &:hover,
  &.is-vote-selected{
    color: darken($comment-vote-down-color,10);
    .icon{
      color: inherit;
    }
  }
  &.is-vote-notselected{
    color: $muted;
    opacity: .3;
    .icon{
      color: inherit;
    }
  }
}

/* Comment form */

.add-comment{
  background: $comment-form-bg;
  padding: $comment-padding;
  .button{
    margin-bottom: 0;
  }
}

.add-comment--reply{
  display: none;
  &.is-active{
    display: block;
  }
}