.sentiment {
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  vertical-align: middle;

  &:hover {
    transform: scale(1.3);
  }
}

.sentiment-active {
  transform: scale(1.3);

  svg {
    stroke-width: 2.3;
  }
}

.proposals {
  .sentiment {
    margin: 0 0 0 15px;
  }
}

.posts {
  .sentiment {
    margin: 5px 10px;
    height: 25px;
    width: 30px;
  }

  .min-sentiment {
    position: absolute;
  }
}

.sentiments-count {
  cursor: pointer;
  margin: 5px 0;

  .txt {
    padding: 1px 0 0 20px;
    display: block;
    font-family: $font-family4;
    font-size: $font-size-xxs;
  }
}

.multi-column-container {
  .sentiments-count {
    margin-top: 10px;
  }
}

.gauge {
  display: inline-block;
  text-align: center;
  margin: 0 2px;

  .gauge-count {
    display: inline-block;
    font-size: 15px;
    width: 15px;
  }
}

.sentiments-popover {
  .arrow {
    display: none;
  }

  padding: 10px 0 0;
}

@mixin color-tooltip($color) {
  .tooltip-inner {
    background-color: $color;
  }

  &.top > .tooltip-arrow {
    border-top-color: $color;
  }

  &.right > .tooltip-arrow {
    border-right-color: $color;
  }

  &.bottom > .tooltip-arrow {
    border-bottom-color: $color;
  }

  &.left > .tooltip-arrow {
    border-left-color: $color;
  }
}

#likeTooltip {
  @include color-tooltip(#46d081);
}

#disagreeTooltip {
  @include color-tooltip(#F2474D);
}

#dontUnderstandTooltip {
  @include color-tooltip(#FAC16F);
}

#moreInfoTooltip {
  @include color-tooltip(#9374ff);
}
