Item-radio-checked странное и медленное поведение при использовании â € “ion-item-background - решено

Question

Я хотел добиться такого дизайна:

Я добился этого, используя приведенный ниже код. И это работает, но проблема в том, что при проверке элемента в первом CSS он имеет эффект затухания или медленнее, чем другой, и имеет странное поведение + плюс квадратные границы.

Моя проблема в том, что я могу добавить фон к проверенному вводу, только если я добавлю: .item-radio-checked { background-color: var(--ion-color-secondary); } А ТАКЖЕ &.item-radio-checked { --ion-item-background: var(--ion-color-secondary); --ion-item-color: var(--ion-color-light); } Внутри .question-option.

Эффект, о котором я упоминал выше: сначала, когда я нажимаю кнопку на секунду, появляется этот оттенок или он просто медленный, а затем становится полностью черным:

это мой 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>

Это мой 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%;
}