@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

@property --color-latest-post-title {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-latest-post-title-hover {syntax: "<color>";inherits: true;initial-value: #3a96e0;}
@property --color-latest-post-description {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-latest-post-published {syntax: "<color>";inherits: true;initial-value: #7F8C8D;}

.rdg-blocks .rdg-latest-post {
    width: 100%;
    .preview-thumbs {
        background-image: url('../images/rdg-latest-post-template-preview.jpg');
    }

    @include title;

    .posts {
        @media (max-width: $breakpoint-xl) {
            & {
                padding: 0;
                width: 100%;
            }
        }

        .item {
            display: flex;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-top: var(--width-separator-latest-post) solid var(--color-separator-latest-post);

            @media (max-width: 350px) {
                & {
                    flex-direction: column-reverse;
                }
            }

            &:first-of-type {
                padding-top: 0;
                border-top: none;

                &.first-item-line {
                    padding-top: 1rem;
                    border-top: var(--width-separator-latest-post) solid var(--color-separator-latest-post);
                }
            }

            .content {
                width: 90%;
                display: flex;
                margin-right: .6rem;
                flex-direction: column;

                @media (max-width: $breakpoint-lg) {
                    & {
                        width: 88%;
                    }
                }

                @media (max-width: $breakpoint-md) {
                    & {
                        width: 85%;
                    }
                }

                @media (max-width: $breakpoint-sm) {
                    & {
                        width: 80%;
                    }
                }

                @media (max-width: 350px) {
                    & {
                        width: 100%;
                        margin-right: 0;
                        margin-top: .5rem;
                    }
                }

                .title {
                    display: flex;
                    min-height: 2.1rem;
                    align-items: self-start;
                    color: var(--color-latest-post-title);
                    text-align: inherit;

                    a {
                        color: var(--color-latest-post-title);
                        transition: all 0.3s ease-in-out;
                        
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &:hover {
                            color: var(--color-latest-post-title-hover);
                        }
                    }
                }

                .description {
                    margin-top: .2rem;
                    color: var(--color-latest-post-description);

                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    @media (max-width: $breakpoint-md) {
                        & {
                            -webkit-line-clamp: 3;
                        }
                    }

                    @media (max-width: 350px) {
                        & {
                            -webkit-line-clamp: 4;
                        }
                    }
                }

                .published {
                    span {
                        color: var(--color-latest-post-published);
                    }
                }
            }

            .image {
                width: 10%;
                display: flex;
                border-radius: .5rem;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center top;
                min-height: 5rem;

                @media (max-width: $breakpoint-lg) {
                    & {
                        width: 12%;
                    }
                }

                @media (max-width: $breakpoint-md) {
                    & {
                        width: 15%;
                    }
                }

                @media (max-width: $breakpoint-sm) {
                    & {
                        width: 20%;
                    }
                }

                @media (max-width: 350px) {
                    & {
                        width: 100%;
                        height: 15rem;
                    }
                }
            }

            &.small {
                .content {
                    width: 78% !important;

                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 100% !important;
                            margin-right: 0 !important;
                        }
                    }
    
                    @media (max-width: $breakpoint-md) {
                        & {
                            margin-right: .6rem !important;
                        }
                    }
    
                    @media (max-width: $breakpoint-sm) {
                        & {
                            width: 75% !important;
                        }
                    }

                    @media (max-width: 350px) {
                        & {
                            width: 100% !important;
                            margin-right: 0 !important;
                            margin-top: .5rem !important;
                        }
                    }
                }

                .image {
                    width: 22% !important;

                    @media (max-width: $breakpoint-lg) {
                        & {
                            display: none;
                        }
                    }
    
                    @media (max-width: $breakpoint-md) {
                        & {
                            display: inherit !important;
                        }
                    }
    
                    @media (max-width: $breakpoint-sm) {
                        & {
                            width: 25% !important;
                        }
                    }

                    @media (max-width: 350px) {
                        & {
                            width: 100% !important;
                            height: 15rem !important;
                        }
                    }
                }
            }
        }
    }

    @include message;
}

.acf-block-preview {
    .rdg-latest-post {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
