// _widgets.scss
$distance_widget_title_from_border: 10px;
$distance_widget_title_from_content: 20px;
$distance_between_big_list_items: 13px;
$padding_small_list_item: 5px 16px;
$labels_font_size: 14px;
$labels_font_weight: 500;

$aside_list_item_color: #323639;
$aside_list_item_size: 12px;
$aside_list_item_transform: uppercase;
$aside_list_item_weight: 500;


%list_item_typography{
    aside &{
        color:$aside_list_item_color;
        font-size:$aside_list_item_size;
        text-transform:$aside_list_item_transform;
        font-weight:$aside_list_item_weight;
    }
}

%widget_title_border {
    aside &{
        margin-bottom:0 !important;
        padding-bottom: $distance_widget_title_from_border;
        border-bottom-width:1px;
        border-bottom-style:solid;
    }

    .cl-sidenav &{
        margin-bottom:0 !important;
        padding-bottom: $distance_widget_title_from_border;
        border-bottom-width:1px;
        border-bottom-style:solid;
    }
}

%list_custom_widget_style{
    .widget-title{
        @extend %widget_title_border;
    }
    ul{
        padding-top:$distance_between_big_list_items;

        li{
            position:relative;

            aside &{
                padding:$padding_small_list_item;
            }

            footer &{
                //padding: 0 0px;
                padding-top:3px;
                padding-bottom:3px;
                a{
                    padding-left:12px;
                }
            }

            a{
                @extend %list_item_typography;
            }

            &:before{
                content: "\2022";
                color: #c7cad0;
                position: absolute;
                left: 0;
                font-size: 24px;
                line-height:26px;
            }
        }
    }
}

.widget{
    p{
        margin-top:0;

        &:last-child{
            margin-bottom:0;
        }
    }
    &:first-child{
        padding-top:0 !important;
    }
    &:last-child{
        padding-bottom:0 !important;
    }

    ul{
        @extend %list_default;

        &.children{
            li{
                &:last-child{
                    padding-bottom:0
                }
            }
        } 

        li{
            &:last-child{
                padding-bottom:0 !important;
            }
        }
    }

    .widget-title{
        margin-bottom:$distance_widget_title_from_content;
    }
}

// Most Popular
.widget_most_popular{
    .widget-title{
        @extend %widget_title_border;
    }
    ul{
        padding-top:$distance_between_big_list_items;

        li{
            display:flex;
            flex-wrap:wrap;
            padding:$distance_between_big_list_items 0;
            align-items:center;
    
            .media{
                width:64px;
                border-radius:50%;
                overflow:hidden;
                height:64px;
                margin-right:24px;
    
                img{
                    max-width:100%;
                    width:64px;
                    height:64px;
                }
            }
    
            .content{
                flex:1;
                width:auto;
    
                a{
                    display:block;
                    line-height:1.4
                }

                .data{
                    font-size:$labels_font_size;
                    font-weight:$labels_font_weight;

                    .author{
                    }
                }
    
            }
        }
    }
    
    footer &{
        .author{ 
            display:none;
        }
        .divider{
            display:none;
        }
        ul{
            li{
                padding:8px 0;
                align-items:flex-start;
                .media{
                    width:50px;
                    height:50px;
                    margin-right:13px;
                    img{
                        width:50px;
                        height:50px;
                    }
                }
            }
        }
        
    }
}


// Categories
.widget_categories{
    @extend %list_custom_widget_style;

    label{
        display:none;
    }

    select{
        margin-top:$distance_widget_title_from_content;
        width:100%
    }

    footer &{
        ul{
            li{
                a{
                    text-transform: uppercase;
                    font-size:12px;
                    font-weight:500;
                    padding-left:12px;
                }
                &:before{

                }
                padding-top:3px;
                padding-bottom:3px;
            }
        }
    }

    .children{
        padding-left:10px;
        padding-top:0 !important;
    }
}

// Archives
.widget_archive{
    @extend %list_custom_widget_style;

    label{
        display:none;
    }

    select{
        margin-top:$distance_widget_title_from_content;
        width:100%;
    }
}

// Pages
.widget_pages{
    @extend %list_custom_widget_style;

    label{
        display:none;
    }

    select{
        margin-top:20px;
        width:100%
    }

    .children{
        padding-left:10px;
        padding-top:0;
    }
}


.widget_meta{
    @extend %list_custom_widget_style;

    label{
        display:none;
    }

    select{
        margin-top:20px;
        width:100%
    }
}


// Recent Comments
.widget_recent_comments{
    .widget-title{
        @extend %widget_title_border;
    }
    ul{
        padding-top:17px;
    }
    li{
        padding:5px 0;
        font-size:12px;
        line-height:20px;

        .comment-author-link{
            display:block;
            font-size:16px;
            font-weight:400
        }
    }
    
}

// Recent Entries
.widget_recent_entries{
    .widget-title{
        @extend %widget_title_border;
    }
    
    ul{
        padding-top:17px;

        li{
            padding:5px 0;
        }
    }
    a{
        font-weight:bold;
        font-size:16px;
        display:block;
        line-height:20px;
    }

    span{
        font-size:12px;
        line-height:20px;
    }
}


// Calendar
.widget_calendar{
    #wp-calendar{
        width:100%
    }

    td{
        text-align:center;
    }
}


// Mailchimp
.widget_mc4wp_form_widget{

    .mc4wp-form-fields{
        display:flex;

        input[type="email"]{
            width: 100%;
        }
        input[type="submit"]{
            color: #fff;
            padding: 0 20px;
            font-size: 14px;
            line-height: 44px;
            cursor:pointer;
        }
    }

    footer &{
        input[type="submit"]{
            padding:0 10px !important;
        }
    }

}

// Tags
.widget_tag_cloud{
    .tagcloud{
        display:flex;
        flex-wrap:wrap;
    }
    .tag-cloud-link{
        background: #f9f9f9;
        font-size: 12px !important;
        padding: 1px 11px;
        margin: 4px;
        border:1px solid #f9f9f9;

        &:hover{
            background:#fff;
        }
    }
}

//Instagram
.widget_instagram{
    .cl-instafeed{
        display:flex;
        flex-wrap:wrap;
        margin-left:-13px;
        margin-right:-13px;
        margin-top:-13px;

        a{
            width: 33.3333%;
            padding:13px;
        }
    }
}


// Widget RSS
.widget_rss{
    .widget-title{
        @extend %widget_title_border;
    }

    > ul{
        padding-top:$distance_between_big_list_items;
        li{
            padding:5px 0;
            .rsswidget{
                display: block;
                font-size: 18px;
                line-height: 26px;
                font-weight: bold;
            }
            .rssSummary{
                display:block;
            }
        }
    }
}


// Widget Search
.widget_search{

    form{
        position:relative;
    }

    label{
        display:none;
    }

    input[type="search"]{
        width:100%;
        padding-left: 50px;

        
    }

    i{
        position: absolute;
        left: 14px;
        line-height: 44px;
        top: 0;
        font-size: 22px;
    }

    input[type="submit"]{
        position:absolute;
        text-indent: -999px;
        width:16px;
        height:45px;
        top:0;
        right:14px;
        background:transparent;
        cursor:pointer;

        footer &{
            display:none;
        }
    }
}

// Widget Nav Menu
.widget_nav_menu{
    .widget-title{
        @extend %widget_title_border;
    }

    .cl-header__menu-container{
        >ul{
            padding-top:$distance_between_big_list_items;
        }

        #copyright & ul{
            li{
                display:inline-block;
            }
        }
        .cl-header__element & ul{
            li{
                display:inline-block;
            }
        }
    }

    ul{
        
        background-color:transparent !important;

        li{
            position:relative;
            display:block;

            aside &{
                padding:5px 10px;
                min-height:30px;
            }

            footer &{
                padding: 0 0px;
            }

            a{
                @extend %list_item_typography;
                line-height:28px !important;
            }

            &:before{
                content: "\2022";
                color: #c7cad0;
                position: absolute;
                left: 0;
                font-size: 24px;
            }
        }
    }

    .cl-header__menu__megamenu{
        background-color:transparent !important;

        > ul > li{
            &:before{
                display:none;
            }
        }

        h6{
            color:$dark_color !important;
        }
    }

    footer &{
        ul{
            padding-top:0 !important;

            li{
                //padding-left:0 !important;
                padding-right:0 !important;
    
                &:before{
                    display:none !important;
                }
    
                &:first-child{
                    padding-left:0 !important;
                }
            }
        }

        .sub-menu{
            padding-left:10px;
        }
    }

    .cl-footer__copyright &{
        ul{
            li{
                display:inline-block;
                padding-left:10px !important;
                padding-right:10px !important;

                &:last-child{
                    padding-right:0 !important;
                }
            }
        }
    }

    .cl-sidenav &{
        ul{
            padding-top:0px;
            li{
                padding-left:0 !important;
                padding-right:0 !important;
                padding-top:8px !important;
                padding-bottom:8px;
                

                &:before{
                    display:none !important;
                }
    
                &:first-child{
                    padding-left:0 !important;
                    padding-top:0 !important;
                }

                a{

                    &:hover{
                        color:$dark_color;
                    }
                }
            }
        }
    }
}


//Widget Divider
.widget_divider{
    border-bottom-width:1px;
    border-bottom-style:solid;
    padding-top: 13px !important;
    padding-bottom: 0px !important;
    margin-bottom: 13px;

}


// Widget Socials
.widget_socials ul{
    display:flex;
    flex-wrap:wrap;

    li{
        padding:0 10px;
        
        i{
            font-size:20px;
        }
    }
}

.widget_media_image{
    img{
        width:auto;
    }
}



// Custom Styles for Sidebar




footer{
    .widget-title{
        border-bottom-width:0 !important;
        margin-bottom:15px !important;
    }

    .widget{

        > ul{
            padding-top:0 !important;

            li{
                
            }
        }
    }
}

.widget_headlines{
    article{
        &:first-child{
            padding-top:0 !important;
        }
        border-bottom-width:1px;
        border-bottom-style:solid;
        border-color:inherit;
        &:last-child{
            border-bottom-width:0;
        }
    }
    .cl-entry__wrapper{
        padding:10px 0 !important;
    }

    .cl-entry__title{
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}


.cl-aside{
    &--widget-title-with_bg{
        .cl-widget-title-wrapper{
            position:relative;
            margin-bottom:20px;
            &:before{
                content:"";
                background:#222;
                width:100%;
                bottom:0px;
                left:0;
                position:absolute;
                height:2px;
            }

            .widget-title{
                background: #222;
                color: #fff;
                padding: 5px 12px !important;
                display:inline-block;
                font-size:16px;
                margin-bottom:0
            }
        }

        .widget{
            > ul{
                padding-top:0;
            }
        }
        
    } 
}


.widget_aboutme{
    aside &{
        .image{
            border-radius:50%;
            width:160px;
            height:160px;
            margin:0 auto;
            text-align:center;
            display:block;
        }
        .wrapper{
            padding:35px 28px;
            border-width:1px;
            border-style:solid;
        }

        .text{
            margin-top:25px;
            margin-bottom:15px;
        }
    }

    footer &{
        .wrapper{
            display:flex;
            align-items:center;
            .image{
                flex:1;
                max-height:100px;
                width:100px;
                max-width:100px;
            }
            .text{
                flex:2;
                padding-left:20px;
            }
        }
    }
}


.widget_contactinfo{
    .info{
        padding-top:7px;
        &:first-child{
            padding-top:0;
        }
        display:flex;
        align-items:flex-start;
        i{
            padding-right:8px;
        }
    }
}