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

// Default
.prelements-blog-grid{
    .pre-blog-item {
        .blog-inner-wrap{
            background: #F7F7F7;
            margin-bottom: 25px;
            margin-left: 0;
		    margin-right: 0;
        }         
        .pre-image-wrap{
            position: relative;            
            .rs-cate{
                background: $primaryColor;
                color: $whiteColor;
                font-size: 15px;
                line-height: 28px;
                padding: 1px 16px;
                position: absolute;
                left: 30px;
                bottom: -14px;
                display: inline-block;
                border-radius: 2px;
            }
            .rs--thum{
                overflow: hidden;
                display: block;
                img{
                    transition: all .3s ease;
                }
            }

            img {
                width: 100%;
            }
        }  
        .pre-blog-content{
            padding: 38px 30px 25px 30px;
            .pre-content{
                margin: 0;
                padding: 4px 0 20px;
            }
            h3{
                font-size: 24px;
                line-height: 34px;
                font-weight: 700;
                margin: 0;
                a{
                    color: $titleColor;
                    transition: all .5s ease;
                    text-decoration: none;
                    display: inline;
                    background-image: linear-gradient(to bottom, $titleColor 0%, $titleColor 100%);
                    background-size: 0 2px;
                    background-repeat: no-repeat;
                    background-position: left 100%;
                    transition: all 0.7s;
                    &:hover{
                        background-size: 100% 2px;
                    }
                }
            }
            .pre-blog-meta{
                margin: 0;
                padding: 14px 0 14px;
                list-style: none;
                display: flex;
                font-size: 16px;
                li{
                    position: relative;
                    &:last-child{
                        padding-left: 20px;
                        margin-left: 15px;
                        &::before{
                            content: "";
                            position: absolute;
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            left: 0;
                            top: 12px;
                            background: $bodyColor;
                        }
                    }
                    span{
                        text-transform: capitalize;
                        font-weight: 700;
                    }
                }
            }
            .blog-btn-part{
                margin: 14px 0 0;
                padding: 20px 0 0;
                list-style: none;
                display: flex;
                justify-content: space-between;
                border-top: 1px solid #0000001f;
                align-items: center;
                li{                    
                    i{
                        width: 40px;
                        height: 40px;
                        display: inline-block;
                        background: #fff;
                        text-align: center;
                        line-height: 40px;
                        font-size: 20px;
                        cursor: pointer;
                        transition: all .5s ease;
                        border-radius: 2px;
                        &:hover{
                            background: $primaryColor;
                            color: $whiteColor;
                        }
                    }
                }
            }
        }   
        &:hover{
            .pre-blog-content{
                .blog-btn-part{
                    li{                    
                        i{                            
                            background: $primaryColor;
                            color: $whiteColor;                            
                        }
                    }
                }
            }
            .pre-image-wrap{
                .rs--thum{
                    img{
                        transform: scale(1.1);
                    }
                }
            }  
        }
    }
    .blog_style_style2{
        .pre-blog-item .pre-blog-content{
            padding: 15px 24px 15px 14px;
        }
        .pre-blog-item .pre-blog-content .pre-blog-meta{
            padding: 0 0 8px;
        }
        .pre-blog-item .pre-blog-content .blog-btn-part {
            margin: 50px 0 0;
            padding: 14px 0 0;
        }
        .pre-blog-item .pre-image-wrap .rs-cate {
            left: 25px;
            top: 25px;
            bottom: auto;
        }
        .pre-blog-item .pre-blog-content .pre-content {
            margin: 0;
            padding: 15px 0 0;
        }
    }
    .blog_style_style3{
        .pre-blog-item .pre-blog-content{
            padding: 15px 15px 15px 22px;
            .rs-cate{
                background: $primaryColor;
                color: $whiteColor;
                font-size: 15px;
                line-height: 28px;
                padding: 1px 16px;
                display: inline-block;
                border-radius: 2px;
                margin-top: 20px;
            }
        }
        .pre-blog-item .pre-blog-content .pre-blog-meta{
            padding: 0 0 8px;
        }
        .pre-blog-item .pre-blog-content .blog-btn-part {
            margin: 50px 0 0;
            padding: 14px 0 0;
        }
        .pre-blog-item .pre-image-wrap .rs-cate {
            left: 25px;
            top: 25px;
            bottom: auto;
        }
        .pre-blog-item .pre-blog-content .pre-content {
            margin: 0;
            padding: 15px 0 6px;
        }
        .pre-blog-item.pre-blog-item-list3 .blog-inner-wrap .rs-list-image {
            padding-right: 0;
            order: 2;
        }
        .pre-blog-item .blog-inner-wrap{
            clip-path: polygon(0% 0%, 94% 0, 100% 15%, 100% 100%, 0% 100%) !important;
        }
    }
    .blog_style_style4{
        .blog-inner-wraps{
            .pre-image-wrap{
                position: relative;
                clip-path: polygon(0% 0%, 92% 0, 100% 11%, 100% 100%, 0% 100%) !important;
                .pre-blog-content{
                    padding: 0;
                    position: absolute;
                    left: 45px;
                    bottom: 44px;
                    right: 50px;
                    z-index: 1;
                } 
                &::before{
                    opacity: .9;
                    background: transparent;
                    background: linear-gradient(transparent, #000000), linear-gradient(transparent, #000000);
                    background: -moz-linear-gradient(transparent, #000000), -moz-linear-gradient(transparent, #000000);
                    background: -o-linear-gradient(transparent, #000000), -o-linear-gradient(transparent, #000000);
                    content: "";
                    height: 100%;
                    bottom: -2px;
                    left: 0;
                    right: 0;
                    position: absolute;
                    width: 100%;
                    z-index: 1;
                    transition: all 0.7s ease 0s;
                } 
                img{
                    width: 100%;
                }              
            }
            .pre-blog-content .pre-content,
            .pre-blog-content h3 a,
            .pre-blog-content .pre-blog-meta{
                color: $whiteColor;
            }
            .pre-blog-content .pre-blog-meta{
                padding: 0 0 5px;
            }            
            .pre-blog-content .pre-blog-meta li:last-child::before{
                background: $whiteColor;
            }
            .pre-image-wrap .rs-cate{
                position: unset;
            }
        }
    }
}