@let isFavorite = isFavorite$ | async;
@if (appearance() === 'icon') {
    <app-detail-icon-button
        [label]="
            (isFavorite
                ? 'PORTALS.REMOVE_FROM_FAVORITES'
                : 'PORTALS.ADD_TO_FAVORITES'
            ) | translate
        "
        [icon]="isFavorite ? 'favorite' : 'favorite_border'"
        tone="favorite"
        [active]="isFavorite === true"
        [pressedState]="isFavorite === true"
        testId="series-favorite-toggle"
        (pressed)="isFavorite ? removeFromFavorites() : addToFavorites()"
    />
} @else if (isFavorite === false) {
    <button class="favorite-btn" (click)="addToFavorites()">
        <mat-icon>add</mat-icon>
        {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
    </button>
} @else {
    <button class="favorite-btn favorite-btn--active" (click)="removeFromFavorites()">
        <mat-icon>check</mat-icon>
        {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
    </button>
}