ion-card {
    border-radius: 0;

    &.detail {
        ion-card-header {
            padding: var(--ion-padding-10);
            background: var(--ion-background-content-sant);
            border-top: 2px solid var(--ion-color-sant);
            border-bottom: 2px solid var(--ion-color-sant);
            align-items: start !important;

            app-avatar-percentage {
                margin-right: var(--ion-margin-10);
            }

            ion-card-title {
                width: calc(100% - 62px);
                font-size: var(--ion-font-size-14);
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);

                .post-title {
                    width: 100%;

                    p {
                        color: var(--ion-color-black);
                        font-weight: 600;
                        display: inline;
                        word-break: break-word;
                        border-radius: 10px;
                    }

                    span {
                        font-size: var(--ion-font-size-12);
                        color: var(--ion-content-color);
                        margin-top: 2px;
                        font-weight: 500;
                        display: block;
                    }
                }

                ion-icon {
                    background: none;
                    color: var(--ion-content-color);
                    width: 23px;
                    height: 23px;
                    padding: 3px 15px 3px 0px;
                    border-radius: var(--ion-border-radius-100);
                }
            }
        }

        ion-card-content {
            display: block;
            font-size: var(--ion-font-size-14);

            p {
                margin: var(--ion-margin-10);
                color: var(--ion-color-black);
                font-weight: 500;
            }
        }
    }
}