/*===========================
    21.Blog Sidebar css 
===========================*/


.blog-sidebar{}

.sidebar-widget{
    border: 2px solid $border-color;
    padding: 40px 30px;
    
    @media #{$lg}{
        padding: 30px 20px;
    }
    
    & .sidebar-title{
        font-size: 16px;
        font-weight: 500;
        color: #000;
        position: relative;
        padding-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 3px;
        
        &::before{
            position: absolute;
            content: '';
            background-color: $theme-color;
            width: 50px;
            height: 1px;
            bottom: 0;
            left: 0;
        }
    }
    
    & .blog-sidebar-search{
        position: relative;
        margin-top: 40px;
        
        & input{
            width: 100%;
            height: 50px;
            padding: 15px;
            font-size: 16px;
            border: 1px solid $black;
        }
        & button{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 0;
            right: 0;
            font-size: 20px;
            border: 0;
            background: none;
        }
    }
    
    & .blog-sidebar-categories{
        & .categories-list{
            margin-top: 30px;
            
            & li{
                & a{
                    font-weight: 400;
                    color: $body-color;
                    display: block;
                    font-size: 16px;
                    text-transform: capitalize;
                    line-height: 35px;
                    position: relative;
                    @include transition(0.3s);

                    @media #{$lg}{
                        font-size: 14px;
                    }
                    
                    &:hover{
                        color: $theme-color;
                    }
                }
            }
        }
    }
    
    & .blog-sidebar-post{
        padding-top: 10px;
        
        & .single-mini-post{
            margin-top: 30px;
            
            & .post-thumb{
                & img{
                    width: 90px;
                    height: 90px;
                    object-fit: cover;
                    object-position: center;
                    
                    @media #{$lg}{
                        width: 50px;
                        height: 50px;
                    }
                    @media #{$xs}{
                        width: 70px;
                        height: 70px;
                    }
                    @media #{$sm}{
                        width: 90px;
                        height: 90px;
                    }
                }
            }
            & .post-content{
                padding-left: 20px;
                
                & .post-title{
                    & a{
                        text-transform: capitalize;
                        font-size: 14px;
                        color: $black;
                        font-weight: 500;
                        @include transition(0.3s);
                        
                        &:hover{
                            color: $theme-color;
                        }
                    }
                }
                & .date{
                    font-size: 13px;
                    color: $body-color;
                    text-transform: capitalize;
                }
            }
        }
    }
    
    & .blog-sidebar-tags{
        padding-top: 30px;
        
        & .tag-list{
            margin-left: -4px;
            margin-right: -4px;
            
            & li{
                display: inline-block;
                padding: 10px 4px 0;
                
                & a{
                    height: 35px;
                    line-height: 35px;
                    font-size: 14px;
                    color: $black;
                    border: 1px solid $border-color;
                    padding: 0 14px;
                    @include transition(0.3s);
                    
                    &:hover{
                        background-color: $black;
                        color: $white;
                        border-color: $black;
                    }
                }
            }
        }
    }
}