.outcome-alignment-rating {
  &.colorful {
    @base-color: hsl(219, 74%, 83%);

    // This function generates colors for 0..<n
    .generate-colors(5);
    .generate-colors(@n, @i: 1) when (@i <= @n) {
      @color: darken(@base-color, @i * 10%);
      .rating-static-tooltip .badge.rating-@{i}, .compact-rating.rating-@{i} {
        background-color: @color !important;
        color: white;
        border-radius: 2em;
        font-size: 2em;
        text-align: center;
        width: 55%;
        cursor: pointer;
      }
      .rating-area {
        i:nth-of-type(@{i}) { color:  @color; }
      }
      .generate-colors(@n, (@i + 1));
    }

  }
  .rating-area {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    display: inline-block;
    &:focus {
      outline: none;
    }
    i {
      cursor: pointer;
      padding: 0 10px;
    }
  }
}

.outcome-alignment-rating {
  &.colorful {
    @base-color: hsl(219, 74%, 83%);

    // This function generates colors for 0..<n
    .generate-colors(5);
    .generate-colors(@n, @i: 1) when (@i <= @n) {
      @color: darken(@base-color, @i * 10%);
      .rating-static-tooltip .badge.rating-@{i}, .compact-rating.rating-@{i} {
        background-color: @color !important;
        color: white;
      }
      .rating-area {
        i:nth-of-type(@{i}) { color:  @color; }
      }
      .generate-colors(@n, (@i + 1));
    }

  }
  .compact-rating {
    border-radius: 2em;
    font-size: 2em;
    text-align: center;
    width: 55%;
    cursor: pointer;
  }
  .rating-area {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    display: inline-block;
    &:focus {
      outline: none;
    }
    i {
      cursor: pointer;
      padding: 0 10px;
    }
  }
}

Fix compact-style rating being shown in label for non-compact
LOOKS: Fix compact-style rating being shown in label for non-compact
