@import "_variables";

#{$root} {
  .anycomment-rating {
    display: flex;
    flex-direction: row;
    margin-bottom: 16px;

    &__stars {
      margin-right: 10px;
      display: inline-flex;
      flex-direction: row-reverse;

      &-item {
        svg {
          color: #ddd;
          width: 22px;
          height: 22px;
          cursor: pointer;
        }
      }

      &-item-active {
        svg {
          color: #EEBA64;
          /* make hover effect work properly in IE */
          pointer-events: none;
        }
      }

      &-item:hover svg,
      &-item:hover ~ span svg,
      &-item-active:hover > span svg,
      &-item-active:hover ~ span:hover ~ label svg {
        color: #EEBA64;
      }
    }

    &__count {
      line-height: 2;
      font-size: $font-size - 2;
      margin-left: 12px;
      color: $semi-hidden-color;

      &-value,
      &-count {
        color: $semi-hidden-color;
      }
    }
  }
}