.viewdo-toc(@primary: #2d5174, @secondary: #6d5f8c, @theme: default){

    body #state-player>*:first-child.toc{
        width: 100%;
        max-width: 58.75rem;
        box-sizing: border-box;
        padding: 0 1rem;
        display: block;
    }

    div[class^="viewdo-toc-grid-"]{

        display: flex;
        flex-flow: wrap;
        justify-content: center;
        width: 100%;

        .viewdo-toc-thumb{
            margin: 1%;
            width: 48%;

            >div{
                padding-top: 64%;
                position: relative;
                overflow: hidden;
                cursor: pointer;
                box-shadow: inset 0 0 0 .25rem @contrast;

                .label{
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;  
                    transform: translateY(-50%);
                    background: fadeout(@contrast, 10%);
                    color: @contrastInverted;
                    padding: .5rem 0;
                    text-transform: uppercase;
                    font-size: .75rem;
                    font-weight: bold;
                    z-index: 1;                             
                }

                .background{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    transition: all 0.5s ease;
                    top: 0;
                }

                &:before{
                    content: '';
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    box-shadow: inset 0px 0px 0px 4px @contrast;                    
                }

                &:hover{
                    .background{
                        transform: scale3d(1.2, 1.2, 1);
                    }
                }
            }            
        }

        &.viewdo-toc-circle{

            .viewdo-toc-thumb{

                >div{
                    padding-top: 100%;
                    border-radius: 50%;
                    .label {
                        top: 70%
                    }
                    .background {
                    overflow: hidden;
                    }
                    &:hover .background {
                    overflow: hidden;
                    }
                }

            }

        }

    }


    .responsive(desktop,{

        div[class^="viewdo-toc-grid-"]{
    
            .viewdo-toc-thumb{
                margin: 1%;
                width: 23%;
            }

        }

        .viewdo-toc-grid-1{
            .viewdo-toc-thumb{
                margin-right: 38.5%; 
                margin-left: 38.5%;         
            }
        }
    
        .viewdo-toc-grid-2,
        .viewdo-toc-grid-4{
    
            .viewdo-toc-thumb{
    
                &:nth-child(odd){
                    margin-left: 26%;            
                } 
        
                &:nth-child(even){
                    margin-right: 26%;   
                }
            }
    
        }
    
        
        .viewdo-toc-grid-5{
    
            .viewdo-toc-thumb{
    
                &:nth-child(1){
                    margin-left: 13.5%;            
                } 
        
                &:nth-child(3){
                    margin-right: 13.5%;   
                }
    
            }            
    
        }
        
        .viewdo-toc-grid-6{
    
            .viewdo-toc-thumb{
    
                &:nth-child(1){
                    margin-left: 13.5%;            
                } 
        
                &:nth-child(3){
                    margin-right: 13.5%;   
                }
    
            }      
    
        }

    });    

}

.viewdo-toc(@primary: #2d5174, @secondary: #6d5f8c, @theme: default) when (@theme = dark){

    div[class^="viewdo-toc-grid-"]{
        .viewdo-toc-thumb{

            >div{

                .label{
                    background: fadeout(@primary, 10%);
                    color: black;                           
                }

            }            
        }    
    }

}

.viewdo-toc(@primary: #2d5174, @secondary: #6d5f8c, @theme: default) when (@theme = light){

    div[class^="viewdo-toc-grid-"]{
        .viewdo-toc-thumb{

            >div{

                .label{
                    background: fadeout(@primary, 10%);
                    color: black;                           
                }

            }            
        }    
    }

}