Item-radio-checked strange and slow behaviour when using –ion-item-background - solved

Question

This is the design I wanted to achieve:

I achieved this using the code below. And it works but the problem is that inspecting the element the first CSS it has a fade effect or it’s slower than the other one and it has a strange behaviour + plus square borders.

My problem is that I can add a background to the checked input only if I add : .item-radio-checked { background-color: var(--ion-color-secondary); } AND &.item-radio-checked { --ion-item-background: var(--ion-color-secondary); --ion-item-color: var(--ion-color-light); } inside of .question-option.

The effect I mentioned above: first when I press the button for a second appears that shade or it's just being slow and after becomes entirely black:

this is my HTML

  <ion-content class="ion-padding">
  <form [formGroup]="spqForm">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div class="quiz-header">
            <ion-text class="small">QUESTION 1 OUT OF 10</ion-text>
            <h2>
              What is your primary concern?
            </h2>
          </div>

          <div class="quiz-choices">
            <ion-list lines="none">
              <ion-radio-group formControlName="spq">
                <ion-item class="question-option">
                  <ion-label class="choices-label">N</ion-label>
                  <ion-radio slot="end" value="n"></ion-radio>
                </ion-item>
           </ion-radio-group>
            </ion-list>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

This is my CSS

ion-item {
  border: 1px solid #eeeff0;
  border-radius: 16px;
  height: 64px;
  text-indent: 20px;
  --background-activated: transparent;
  --ripple-color: transparent;
}

ion-label {
  font-size: 10.72 px;
  font-weight: 500;
  color: var(--ion-color-secondary);
  margin-top: 20px;
  margin-bottom: 5px;
}

.quiz-header {
  text-align: center;
  margin-top: 20%;
  h2 {
    font-weight: 700;
  }
}

.quiz-choices {
  margin-top: 15%;
}

.item-radio-checked {
  background-color: var(--ion-color-secondary);
}

.question-option {
  --padding-start: 0px;
  --ion-item-color: var(--ion-color-secondary);
  --inner-border-width: 0px;
  --inner-padding-end: 0px;

  text-align: left;

  &:not(:last-child) {
    margin-bottom: 2.5%;
  }

  &.item-radio-checked {
    --ion-item-background: var(--ion-color-secondary);
    --ion-item-color: var(--ion-color-light);
  }

  ion-radio {
    --color-checked: var(--ion-color-light);
    margin-bottom: 0px;
    margin-right: 20px;
  }
}

.back-button {
  width: 64px;
  height: 64px;
  --background: var(--ion-color-medium);
  --color: var(--ion-color-secondary);
  position: fixed;
  bottom: 25px;
}

.next-button {
  width: 156px;
  height: 64px;
  color: var(--ion-color-light);
  position: fixed;
  bottom: 25px;
  right: 7.1%;
}