/*------------------------------------------------------------------
[30. Demo : Only for demo pursposes]
*/


@builder-options-width : 260px;
@builder-options-header-height :102px;
@assets-img-url:'../../assets/img/';

.builder{
    width: 423px;
    right: -423px;
    & > div{
        height:calc(~'100% - 12px');
    }
    a{
        position: relative;
        display: block;
        width: 100%;
        color:mix(@color-master, #fff, 60%);
        & > img{
            opacity: 0.33;
            .transition(opacity 0.1s linear);
        }

        &.active{
            color:@color-master;
             & > img{
                opacity: 0.87;
             }
            &:before{
                 background-image: url('@{assets-img-url}/demo/tick.svg');
                 width: 23px;
                 height: 23px;
                 content: '';
                 position: absolute;
                top: 84px;
                right: -10px;
                z-index: 10;
            }
        }
        
        &:hover{
            color:mix(@color-master, #fff, 80%);
             & > img{
                opacity: 0.7;
             }
        }
    }
    .builder-footer{
        right:0;
        left:0;
        z-index: 10;
    }
    .theme-selector.active:before{
        top: 54px;
        right: 10px;
    }
    .nav-tabs {
        background-color: transparent;
        padding: 0;
        & > li > a{
            min-width: 99px;
            padding: 16px 0;
        }
    }
    .nav-tabs ~ .tab-content{
        position: relative;
        padding-right: 0px;
        height: 100%;
        top:0;
        .tab-pane{
             height: 100%;
             overflow-x: hidden !important;
            .scrollable{
                padding-top: 27px;
                height: ~'calc(100% - 47px)';
                overflow-x: hidden !important;
             }
        }

    }
    .builder-close{
        position: absolute;
        right: 36px;
        top: 20px;
        padding: 7px;
        width: auto;
        z-index: 10;
    }
    .builder-toggle{
        position: absolute;
        width: 54px;
        height: 50px;
        top: 20%;
        left: -48px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    &:before{
        position: absolute;
        content: '';
        width: 48px;
        height: 50px;
        background-color: #fff;
        top:20%;
        left: -47px;
        box-shadow:0 0 9px rgba(191,191,191,.36);
        border-left: 1px solid rgba(222,227,231,.56);
        .border-left-radius(4px);
    }
    &:after{
        position: absolute;
        content: '';
        background-color: #fff;
        width: 5px;
        height: 50px;
        left: 0;
        top: 20%;
    }
    .btn-toggle-theme{
         & > img{
            opacity: 1 !important;
        }
         p{
            line-height: 18px;
        }     
    }
}

.content-builder{
    display: none;
    &.active{
        display: block;
    }
    .placeholder{
        position: relative;
        &:after{
            content: "Content goes here";
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -10px;
            right: 0;
            text-align: center;
            font-size: 26px;
            opacity: .16;
            color: @color-master;
        }
    }
}
.previewer{
    height: 35px;
}

/* Demo Widths For GIF Animations 
------------------------------------
*/
.demo-bg-hinted{
    background-color: #939393
}
.demo-fs-23{
    font-size:23px !important;
}
.demo-mw-50{
    max-width: 50px;
}
.demo-mw-300{
    max-width: 300px;
}
.demo-mw-350{
    max-width: 350px;
}
.demo-mw-400{
    max-width: 400px;
}
.demo-mw-500{
    max-width: 500px;
}
.demo-mw-600{
    max-width: 600px;
}
.demo-container{
    height: 2000px;
}