/*Blog-Sedebar Starts Here*/
.widget {
    @include border-radius(10px);
    background-color: $white-color;
    padding: 30px;
    margin: 0 auto 30px;
    @media screen and (max-width:350px) {
        padding: 30px 15px;
    }
    &:last-child {
        margin-bottom: 0;
    }
    .title {
        margin-top: 0;
        margin-bottom: 25px;
        font-size: 24px;
        text-transform: capitalize;
        font-weight: 600;
    }
    &-tags {
        ul {
            @extend %flex;
            margin: -5px;
            li {
                padding: 5px;
                a {
                    font-size: 14px;
                    text-transform: capitalize;
                    color: $body-color;
                    padding: 6px 30px;
                    font-weight: 600;
                    text-transform: uppercase;
                    @include border-radius(20px);
                    border: 1px solid $border-color;
                    &:hover, &.active {
                        color: $white-color;
                        border-color: transparent;
                        background: -moz-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                        background: -webkit-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                        background: -ms-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);                               
                    }
                    @media screen and (max-width: 380px) {
                        padding: 2px 20px;
                    }
                }
            }
        }
    }
    &-categories {
        ul {
            margin-top: -9px;
            li {
                padding: 0;
                border-bottom: 2px dotted $border-color;
                a {
                    @extend %flex;
                    justify-content: space-between;
                    color: $body-color;
                    padding: 7px 0;
                    &:hover {
                        color: $theme-color ;
                    }
                }
                &:first-child {
                    a {
                        padding-top: 0;
                    }
                }
            }
        }
    }
    &-follow {
        ul {
            margin: -5px;
            justify-content: flex-start;
            li {
                padding: 5px;
                a {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    border-color: $border-color;
                    color: rgba($color:$body-color, $alpha:.8);
                    &.active, &:hover {
                        border: none;
                        color: $white-color;
                        background: -moz-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                        background: -webkit-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                        background: -ms-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);                                   
                    }
                }
            }
        }
    }
    &-search {
        .search-form {
            margin-top: -20px;
        }
        input {
            font-size: 14px;
            @include border-radius(0);
            padding-left: 0;
            &::placeholder {
                color: rgb(76, 88, 143);
            }
            border: none;
            border-bottom: 1px solid $border-color;
            background: transparent;
            margin-bottom: 30px;
        }
        button {
            width: auto;
            min-width: 150px;
            outline: none;
            color: $white-color;
            height: 40px;
            @include border-radius(20px);
            background-image: -moz-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
            background-image: -webkit-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
            background-image: -ms-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
            box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);                           
            border: none;
            i {
                margin-right: 5px;
            }
        }
    }
    &-post {
        position: relative;
        .widget-slider {
            .item {
                .thumb {
                    @include border-radius(12px);
                    overflow: hidden;
                    margin-bottom: 25px;
                    a {
                        display: block;
                    }
                    img {
                        width: 100%;
                    }
                }
                .content {
                    .p-title {
                        margin-bottom: 7px;
                        font-size: 22px;
                        a {
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            display: -webkit-box;
                            text-overflow: ellipsis;
                        }
                    }
                    .meta-post {
                        @extend %flex;
                        font-size: 14px;
                        a {
                            color: $body-color;
                            i {
                                color: $theme-color;
                                font-size: 14px;
                                margin-right: 5px;
                                text-shadow: 0.624px 2.934px 2px rgba(232, 58, 153, 0.3);                                  
                            }
                        }
                    }
                }
            }
        }
        .slider-nav {
            position: absolute;
            right: 30px;
            top: 30px;
            width: 50px;
            @extend %flex;
            justify-content: space-between;
            span {
                display: block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                cursor: pointer;
                font-size: 10px;
                // background-color: $bg-two;
                box-shadow: 0px 2px 5px 0px rgba(0, 18, 50, 0.2);
                color: $body-color;
                @include border-radius(50%);
                @include transition($transition);
                &:hover, &.active {
                    color: $white-color;
                    background: -moz-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                    background: -webkit-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                    background: -ms-linear-gradient( -30deg, rgb(193,101,221) 0%, rgb(92,39,254) 100%);
                    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);                      
                }
            }
        }
    }
}