@define-mixin interaction-type $type {
  .interaction--$(type) {
    position: relative;
    color: var(--$(type)-color) !important;
    padding: 0 var(--padding-tiny);
    width: 1rem;

    &.active, &:hover {
      color: var(--text-color) !important;
      background-color: var(--$(type)-color);
    }
  }
}

@mixin interaction-type fave;
@mixin interaction-type upvote;
@mixin interaction-type downvote;
@mixin interaction-type comment;
@mixin interaction-type hide;

.comments_count {
  position: absolute;
  background: var(--background-color);
  border: var(--number-badge-border) solid var(--background-color);
  border-radius: 100%;
  padding: var(--number-badge-padding);
  line-height: var(--number-badge-size);
  min-width: var(--number-badge-size);
  top: var(--number-badge-lower-offset);
}

.interaction--comment:hover > .comments_count {
  visibility: hidden;
}