//==============================================================================
// widget_popular_posts
//==============================================================================

&.widget_chained-popular-posts
{
    counter-reset:counter;
     
    ol
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        
        .popular-posts_item
        {
            margin-bottom: 12px;
            padding-left: 32px;
            position: relative;
            
            &:before
            {
                counter-increment: counter;
                content: counter(counter) ". ";
                background: $black;
                font-weight: bold;
                color: $white;
                padding: 3px;
                position: absolute;
                left: 0;
                top: 5px;
                font-size: 16px;
            }

            &:last-child
            {
                margin-bottom: 0;
            }

            &.large-thumbnail
            {
                padding-left: 0;
                
                &:before
                {
                    position: absolute;
                    top: 0;
                }

                .content
                {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 0);
                    max-width: 80%;
                    width: 100%;
                    z-index: 1;
                    
                    .categories-list
                    {
                        .category-links
                        {
                            display: flex;
                            
                            a
                            {
                                color: $black;
                                background: $white;
                                padding: 3px 5px;
                                text-transform: uppercase;
                                font-weight: bold;
                                letter-spacing: 1px;
                                font-size: 10px;
                                margin-bottom: 12px;
                                text-align: center;
                                -webkit-justify-content: center;
                                        justify-content: center;
                                
                                &:hover,
                                &:focus
                                {
                                    color: $white;
                                    background: $accent_color;
                                }
                            }
                        }
                    }

                    .title
                    {
                        a
                        {
                            color: $white;
                            
                            &:hover,
                            &:focus
                            {
                                color: $accent_color;
                            }
                        }
                    }
                }
            }

            a
            {
                display: flex;
                
                &.image
                {
                    margin-bottom: 12px;
                    
                    &:hover,
                    &:focus
                    {
                        &:after
                        {
                            opacity: 1;
                            z-index: 1;
                            visibility: visible;
                            height: 100%;
                        } 
                    }
                    
                    &:after
                    {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                        width: 100%;
                        height: 0;
                        background: rgba($black, .4);
                        opacity: 0;
                        visibility: hidden;
                        z-index: -1;
                        transition: all .25s;
                    }
                }
            }

            .categories-list
            {
                display: flex;
                justify-content: center;
                font-size: 12px;
                
                .category-links
                {
                    display: inline;
                    
                    a
                    {
                        color: rgba($black, .6);
                        margin-right: 4px;
                        
                        &:hover,
                        &:focus
                        {
                            color: $accent_color;
                        }
                    }
                }
            }

            h5
            {
                &.title
                {
                    display: flex;
                    -webkit-justify-content: center;
                            justify-content: center;
                    text-align: center;
                    margin-top: 0;
                    font-size: 18px;
                    line-height: 24px;
                }
            }

            h6
            {
                &.title
                {
                    display: inline;
                    font-size: 18px;
                }
            }

            &:not(.large-thumbnail)
            {
                margin-bottom: 12px;
                
               .categories-list
               {
                   display: inline;
               }
            }
        }
    }
}