.woocommerce {
  // Read-Only Stars
  .star-rating {
    @include nova_icon('\ea03\ea03\ea03\ea03\ea03');
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: rem-calc(16);
    width: 5em;
    margin-right: rem-calc(1);
    color: v(site-border-color);

    &:before {
      content: "\ea03\ea03\ea03\ea03\ea03";
      position: absolute;
      top: 0;
      left: 0;
    }

    span {
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 1.5em;
      color: $active-star-color;

      &:before {
        content: "\ea03\ea03\ea03\ea03\ea03";
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  // Clickable Stars
  p.stars {
    display: inline-block;
    font-size: rem-calc(30);
    margin-bottom: 0;

    span {
      display: block;
      line-height: 1;
    }

    a {
      position: relative;
      height: 1em;
      width: 1em;
      text-indent: -999em;
      display: inline-block;
      text-decoration: none;
      transition: none;
      border-bottom: none;

      &:before {
        @include nova_icon('\ea03');
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1em;
        height: 1em;
        line-height: 1;
        text-indent: 0;
        transition: all 0.3s ease;
        color: v(site-border-color);
      }

      &:hover {
        ~ a:before {
          content: "\ea03" !important;
        }
      }
    }

    &:hover {
      a {
        &:before {
          content: "\ea03" !important;
          color: $active-star-color;
        }
      }
    }

    &.selected {
      a.active {
        &:before {
          content: "\ea03";
          color: $active-star-color;
        }

        ~ a:before {
          content: "\ea03";
        }
      }

      a:not(.active) {
        &:before {
          content: "\ea03";
          color: $active-star-color;
        }
      }
    }
  }
}
