@import '../../common';



// Default
.prelements-blog-slider{
    position: relative;

    .pre-blog-item {
        .blog-inner-wrap {
            position: relative;
            &:hover{
                .pre-image-wrap{
                    .rs--thum{
                        img{
                            transform: scale(1.05);
                        }
                    }
                }
            }
        }
        .pre-image-wrap{
            position: relative;
            overflow: hidden;
            .rs-cate{
                background: $primaryColor;
                color: $whiteColor;
                font-size: 15px;
                line-height: 28px;
                padding: 1px 16px;
                position: absolute;
                right: 20px;
                top: 20px;
                display: inline-block;
                border-radius: 2px;
            }
            .rs--thum{
                display: block;
                overflow: hidden;
                img{
                    width: 100%;
                    height: auto;
                    transition: all linear 0.3s;
                }
            }
        }  
        .pre-blog-content{
            padding: 38px 30px 25px 30px;
            background: #fff;
            transition: $transition;
            .pre-post-title{
                margin-bottom: 10px;
                a{
                    color: $titleColor;
                    transition: $transition;
                    &:hover{
                        color: $primaryColor;
                    }
                }
            }
            .top_meta_wrapper {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: 20px;
                &.separator_yes {
                    > * {
                        padding-right: 30px;
                        margin-right: 30px;
                        position: relative;
                        &:after {
                            position: absolute;
                            content: '';
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 1px;
                            height: 40px;
                            background: #d6d8dc;
                        }
                        &:last-child {
                            padding-right: 0 !important;
                            margin-right: 0 !important;
                            &:after {
                                display: none !important;
                            }
                        }
                    }
                }
            }
            .author_meta,
            .comment_meta,
            .date_meta {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .author_meta {
                .author_image {
                    flex-shrink: 0;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: auto;
                        border-radius: inherit;
                    }
                }
                .author_text {
                    span {
                        display: block;
                        text-transform: capitalize;
                    }
                }
            }
            .blog-btn-part{
                margin: 14px 0 0;
                a {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 2px;
                    gap: 5px;
                    color: #fff;
                    position: relative;
                    background: $primaryColor;
                    padding: 8px 20px;
                    > * {
                        position: relative;
                        z-index: 1;
                    }
                    i{
                        font-size: 15px;
                    }
                    svg {
                        width: 15px;
                        height: 15px;
                        path {
                            transition: $transition;
                            fill: #fff;
                        }
                    }
                    &:hover {
                        color: #fff;
                        background: $secondaryColor;
                    }
                }
                &.gradient {
                    a {
                        background: transparent;
                        overflow: hidden;
                        &:after {
                            position: absolute;
                            content: '';
                            left: 0;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            background: linear-gradient(90deg, $primaryColor 0%, $secondaryColor 100%);
                        }
                    }
                }
            }
        }
        .btn_author_with {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            flex-wrap: wrap;
        }
        .date_p_absolute {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: $transition;
            span {
                display: inline-block;
                text-align: center;
            }
        }
        &:hover{
            .pre-blog-content{
                .blog-btn-part{
                    li{                    
                        i{                            
                            background: $primaryColor;
                            color: $whiteColor;                            
                        }
                    }
                }
            }
        }
    }
    
    // Slider Style 1
    .blog_style_style2 {
        .pre-blog-item {
            .blog-inner-wrap {
                display: flex;
                flex-wrap: wrap;
            }
            .pre-image-wrap {
                flex-shrink: 0;
                width: 43%;
                .rs--thum{
                    display: inline;
                    height: 100%;
                    img{
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }
            }
            .pre-blog-content{
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 57%;
                padding: 45px 30px;
            }
        }
    }
}


.prelements-addon-slider.clip-path-enable .pre-blog-item .pre-blog-content .top_meta_wrapper{
    clip-path: polygon(100% 0, 96% 50%, 100% 100%, 0% 100%, 4% 50%, 0% 0%);  

}