app-friends-suggestions-view-all {
    ion-card {
        margin: var(--ion-margin-0);
        box-shadow: none;
        border-radius: 0 8px;

        ion-card-header {
            padding: var(--ion-padding-0);

            h3 {
                p {
                    color: var(--ion-color);
                    text-transform: uppercase;
                }
            }

            ion-card-title {
                font-size: var(--ion-font-size-14);
                display: flex;
                justify-content: space-between;
                margin: var(--ion-margin-0);
                align-items: center;
                padding: var(--ion-padding-10);
                border-bottom: 1px solid #efefef;

                .left-data {
                    display: flex;
                    align-items: center;
                    width: calc(100% - 30px);

                    .icons {
                        color: var(--ion-color);
                        margin-right: var(--ion-margin-10);
                        position: relative;

                        span {
                            overflow: hidden;
                            width: 50px;
                            height: 50px;
                            background: var(--ion-background-content);
                            border-radius: var(--ion-border-radius-100);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        ion-icon {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            background: var(--ion-color-white);
                            padding: 3px;
                            border-radius: var(--ion-border-radius-100);
                            color: var(--ion-color);
                            box-shadow: 0px 0px 2px #000;

                            &.heart {
                                color: #f00;
                            }
                        }

                        div {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            background: var(--ion-color-white);
                            padding: 3px;
                            border-radius: var(--ion-border-radius-100);
                            width: 20px;
                            height: 20px;
                            box-shadow: 0px 0px 2px #000;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            img {
                                width: auto;
                                height: 100%;
                            }
                        }
                    }

                    .content {
                        width: calc(100% - 60px);

                        ion-button {
                            height: 25px;
                            margin: var(--ion-margin-10) 4% 0 0;
                            width: 48%;

                            &:last-child {
                                margin-right: 0;
                            }

                            &::part(native) {
                                text-transform: capitalize;
                            }
                        }

                        p {
                            padding: var(--ion-padding-0);
                            margin: var(--ion-margin-0);
                            font-size: var(--ion-font-size-14);
                            color: #000;
                            line-height: 14px;
                            font-weight: 600;

                            span {
                                color: #585858;
                                font-size: var(--ion-font-size-12);
                            }
                        }
                    }
                }

                &.unread {
                    background: var(--ion-background-content);
                }

                ion-button {
                    height: auto;
                    margin: 0;

                    &::part(native) {
                        padding-top: 5px;
                        padding-bottom: 5px;
                    }
                }
            }
        }
    }
}