.voting_group {
  white-space: nowrap;

  @include rem(margin-bottom, 25px);

  .btn--circle {
    color: #fff;
    min-width: 0;
    position: relative;
    letter-spacing: 0.05em;

    span {
      width: 0;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      margin-left: 0;

      @include transition(all .3s ease);
    }

    + .btn--circle {
      @include rem(margin-left, 10px);
    }

    &.active {
      color: #fff;
      z-index:2;

      @include rem(padding-left, 30px);
      @include rem(padding-right, 30px);

      span {
        @include rem(margin-left, 12px);
        @include rem(width, 35px);
      }

      + .btn--circle {
        margin-right: 0;

        @include rem(margin-left, -67px);
      }

      &:before {
        content: attr(data-hover);
        text-transform: none;
        color: #fff;
        letter-spacing: normal;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        background: $primary !important;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        z-index:3;
        text-align: center;

        @include rem(padding, 13px 16px);
        @include transition(all .3s ease);
      }

      &:hover {
        background: $primary !important;

        &:before {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    &.invisible {
      opacity: 0;
      visibility: hidden;

      + .btn--circle {
        @include rem(margin-left, -56px);
        @include rem(margin-right, -11px);
      }
    }
  }

  &__value, &__status {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: $fw-semi;

    @include rem(margin-left, 20px);
  }

  &__status {
    font-weight: normal;
    text-transform: none;
    display: none;

    @include rem(font-size, 16px);
  }

  &__count {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;

    @include rem(margin-left, 6px);

    span {
      font-weight: $fw-semi;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -1px;

      @include rem(width, 28px);
    }
  }

  &__group {
    white-space: nowrap;
  }

  &.voted {
    .voting_group__value {
      display: none;
    }
    .voting_group__status {
      display: inline-block;
    }
  }
}


.status_bar {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background: rgba($secondary, .15);

  @include rem(width, 65px);
  @include rem(height, 4px);
  @include rem(border-radius, 10px);

  &__line {
    position: absolute;
    width: 0;
    height: 100%;

    @include rem(border-radius, 10px);
    @include transition(all .3s ease .1s);

    &--green {
      background: #13B72A;
    }

    &--red {
      background: #FF3E2E;
    }
  }
}