@function toRGB($color) {
  @return 'rgb(' + red($color) + ', ' + green($color) + ', ' + blue($color) + ')';
}

@mixin nut-rate-bg($color) {
  $svgColor: toRGB($color);
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E %3Cpath fill='#{$svgColor}' d='M16 6.204l-5.528-0.803-2.472-5.009-2.472 5.009-5.528 0.803 4 3.899-0.944 5.505 4.944-2.599 4.944 2.599-0.944-5.505 4-3.899zM8 11.773l-3.492 1.836 0.667-3.888-2.825-2.753 3.904-0.567 1.746-3.537 1.746 3.537 3.904 0.567-2.825 2.753 0.667 3.888-3.492-1.836z'%3E%3C/path%3E %3C/svg%3E")
    center no-repeat;
}

@mixin nut-rate-active-bg($color) {
  $svgColor: toRGB($color);
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E %3Cpath fill='#{$svgColor}' d='M16 6.204l-5.528-0.803-2.472-5.009-2.472 5.009-5.528 0.803 4 3.899-0.944 5.505 4.944-2.599 4.944 2.599-0.944-5.505 4-3.899z'%3E%3C/path%3E %3C/svg%3E");
}

.nut-rate {
  .nut-rate-item {
    display: inline-block;
    vertical-align: bottom;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    @include nut-rate-bg($primary-color);
    background-size: cover;
    &:last-child {
      margin-right: 0;
    }
    &.nut-rate-active {
      @include nut-rate-active-bg($primary-color);
    }
  }
}