Item-radio-checked strange and slow behaviour when using --ion-item-background. Please, please help!

Hi! If someone has any clue regarding me issue please, please, please help as I am struggling with this apparently basic thing for 2 days. I am going crazy.

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. If anyone has any clue from what that is that would be amazing. Thanks a lot!

**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); } the second one is inside of .question-option.

The effect I mentioned above:
first when I press the button for a second 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 the 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%;
}

Solved: the problem was the --transition property. i’ve set it to the primary colour of the button and now it works fine