Подсветка меток Star Rating System на основе флажка

Question

У меня есть система оценки по звездам, которая построена с помощью флажков (скрыто).

Система оценки имеет N / A в качестве первого варианта выбора.

Теперь я могу показатьN / A или Нет парковочного знака красного цвета при выборе метки.

Но я не могу изменить цвет этой N / A при выборе других звездочек.потому что, когда я оцениваю одну звезду или 3,5 звезды, красный также подсвечивается, что было частью предыдущего механизма CSS, который я только что изменил с 1-й звезды на N / A.

Как я могу сохранить красныйВыбор цвета, если я выбираю N / A, также, когда я выбираю какие-либо звезды, я должен показывать N / A другим цветом или серым цветом (не выбран), потому что это не часть рейтинга звезд, а просто N / A.

.rate {
        display: inline-block;
    }
    .rate>input {
        display: none;
    }
    .rate>label {
        float: right;
        color: #b4b3b3;
    }
    .rate>label:before {
        display: inline-block;
        font-size: 3em;
        padding: .3rem .2rem;
        margin: 0 5px;
        cursor: pointer;
        font-family: FontAwesome;
        content: "\f005 ";
    }
    .rate>label:last-child:before {
        content: "\f05e";
        //color: #cc5858;
        margin-right: 10px;
        padding-right: 20px;
        border-right: .08em solid #4a90e2;
    }
    .rate .half:before {
        content: "\f089 ";
        position: absolute;
        padding-right: 0;
    }
    input:checked~label,
    label:hover,
    label:hover~label {
        color: #ffcd00;
    }
    input:checked+label:hover,
    input:checked~label:hover,
    input:checked~label:hover~label,
    label:hover~input:checked~label {
        color: rgb(255, 224, 85);
    }
    input:checked~label:last-child:before {
        color: #cc5858;
    }
    input:checked+input:last-child:not(:checked)~label:last-child {
        color: #14ff4e !important;
    }

Угловой код ниже

<fieldset class="rate" id="rate-{{controlIndex}}" [class.readonly]="readonly">
    <ng-container *ngFor="let star of ratings; let i = index">
        <input type="radio" id="rating-{{ratings.length-i-1}}-{{controlIndex}}" name="rating-{{controlIndex}}" [checked]="(star.id == rating)" />
        <label [class.half]="(i%2)==1" for="rating-{{ratings.length-i-1}}-{{controlIndex}}" (click)="updateRating(star.id)"></label>
    </ng-container> </fieldset>

• Изображение только для иллюстрации