<ion-content>

    <div class="ar-header ion-text-center">
        <h6 class="M0" *ngIf="recoveryEmail?.length || recoveryPhone?.length">{{'UPDATE_RECOVERY_ID' | translate}}</h6>
        <h6 class="M0" *ngIf="!recoveryEmail?.length && !recoveryPhone?.length">{{'ADD_RECOVERY_ID' | translate}}</h6>
    </div>

    <ion-list lines="none">
        <ion-radio-group [(ngModel)]="recoveryIdType">

            <ion-list-header class="recovery-desc">
                <ion-label>{{'RECOVERY_ID_DESCRIPTION' | translate}}</ion-label>
            </ion-list-header>

            <ion-item>
                <ion-label>{{'EMAIL_ID_PLACEHOLDER' | translate}}</ion-label>
                <ion-radio slot="start" value="{{RecoveryType.EMAIL}}"></ion-radio>
            </ion-item>

            <ion-item>
                <ion-label>{{'PHONE_PLACEHOLDER' | translate}}</ion-label>
                <ion-radio slot="start" value="{{RecoveryType.PHONE}}"></ion-radio>
            </ion-item>

        </ion-radio-group>
    </ion-list>

    <div>
        <div *ngIf="recoveryIdType === RecoveryType.EMAIL">
            <form [formGroup]="recoveryEmailForm">
                <div class="M16">
                    <div class="W100 merged-input-container MT10">
                        <ion-input type="text" placeholder="{{'EMAIL_PLACEHOLDER' | translate}}"
                            class="form-control custom" formControlName="email" (input)="removeSameRecoveryIdErr(RecoveryType.EMAIL)">
                        </ion-input>
                    </div>
                    <ion-label class="error"
                        *ngIf="recoveryEmailForm.controls.email.dirty && recoveryEmailForm.controls.email.invalid">
                        {{'ERROR_EMAIL_INVALID' | translate}}
                    </ion-label>
                    <ion-label class="error" *ngIf="sameEmailErr">
                        {{'ERROR_SAME_EMAIL_UPDATED' | translate}}
                    </ion-label>
                </div>
            </form>
        </div>

        <div *ngIf="recoveryIdType === RecoveryType.PHONE">
            <form [formGroup]="recoveryPhoneForm">
                <div class="M16">
                    <div class="W100 merged-input-container MT10" style="text-align:start">
                        <ion-input type="tel" placeholder="+91 -" class="form-control decorator " value="+91 -"
                            disabled>
                        </ion-input>
                        <ion-input type="tel" placeholder="{{'ENTER_PHONE_POPUP_TITLE' | translate}}" maxlength="10"
                            minlength="10" required class="form-control custom" formControlName="phone"
                            (input)="removeSameRecoveryIdErr(RecoveryType.PHONE)">
                        </ion-input>
                    </div>
                    <ion-label class="error"
                        *ngIf="recoveryPhoneForm.controls.phone.dirty && recoveryPhoneForm.controls.phone.invalid">
                        {{'ERROR_RECOVERY_ID_PHONE_INVALID' | translate}}
                    </ion-label>
                    <ion-label class="error" *ngIf="samePhoneErr">
                        {{'ERROR_SAME_PHONE_UPDATED' | translate}}
                    </ion-label>
                </div>
            </form>
        </div>
        <ion-row class="custom-shadow">
            <ion-col class="ion-padding">
                <ion-button expand="block" fill="outline" (click)="cancel()">{{ 'CANCEL' | translate }} </ion-button>
            </ion-col>
            <ion-col class="ion-padding">
                <ion-button expand="block" type="submit" *ngIf="recoveryIdType === RecoveryType.EMAIL"
                    (click)="submitRecoveryId(RecoveryType.EMAIL)" [disabled]="!recoveryEmailForm.valid">
                    {{ 'BTN_SUBMIT' | translate }}</ion-button>

                <ion-button expand="block" type="submit" *ngIf="recoveryIdType === RecoveryType.PHONE"
                    (click)="submitRecoveryId(RecoveryType.PHONE)" [disabled]="!recoveryPhoneForm.valid">
                    {{ 'BTN_SUBMIT' | translate }}</ion-button>
            </ion-col>
        </ion-row>
    </div>

</ion-content>

./account-recovery-id-popup.component.scss

@import "src/assets/styles/variables";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";

.merged-input-container {
    border: 1px solid $form-input-border-active-color;
    display: flex;
    flex: 1 1 auto;
    border-radius: 4px;
    .decorator {
        display: inline-block;
        max-width: 3.125rem;
    }
    .custom {
        display: inline-block;
    }
}

.ar-submit-btn {
    padding: 12px 15%;
}

.ar-btn-dissable-color {
    background-color: map-get($colors, dark_gray);
    color: map-get($colors, white);
}

.ar-btn-enable-color {
    background-color: map-get($colors, primary);
    color: map-get($colors, white);
}

.ar-header {
    background-color: #{$blue};
    color: map-get($colors, white);
    padding: 16px 0;
}

.recovery-desc{
    @include padding(null, 16px, null, null);
    font-size: 1rem;
}

.custom-shadow {
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.2);
}

ion-button{
    --background: #{$blue} !important;
    color: map-get($colors, white);
    --background-hover: #{$blue} !important;
    --background-activated: #{$blue} !important;
}

ion-button[fill="outline"]{
    --background: map-get($colors, white) !important;
    color: #{$blue};
    --border-color: #{$blue};
}