﻿@shadow:2px 2px 5px rgba(0,0,0,0.3);

.menu-section {
    .item{ cursor:pointer;
        a{display:inline-block; width:100%;}
        &.row{width:~"calc(100% - 6px)"; margin:4px 6px;font-weight:400;}
        .board-title{font-size:14px; font-weight:bold; width:147px;}
        .board-owner{font-size:13px; opacity:0.5; display:inline-block; padding:3px 0;}
        .icon-star{position:relative; top:10px;}
    }
    .color-box{width:12px; height:45px;border-radius:4px;}
}

.separator{width:100%;height:1px;}

.boards-menu{position:absolute; top:40px; margin:10px 0 0 7px; padding:5px 0 0 0; width:240px; overflow:hidden; z-index:100; max-height:~"calc(100% - 70px)"; border-radius:5px; box-shadow:@shadow;
    .movable{float:left; position:relative; max-width:224px; padding-bottom:10px;
        & > div{float:left;}
    }
    .movable:after{content:'';display:block;clear:both;}
    .scroller{position:relative; float:right; background-color:rgba(0,0,0,0.05); width:10px; height:100%; overflow:hidden; border-radius:10px; margin-top:3px;}
    .scrollbar{position:relative; background-color:rgba(0,0,0,0.1); width:10px; min-height:20px; overflow:hidden; border-radius:10px;}
    .scrollable{overflow:hidden;
        .scroller{display:none;}
        &:after{content:' '; display:block; clear:both; height:0; overflow:hidden;}
        &.scroll{
            .items{float:left; width:224px;}
            .item{padding-right:8px;}
            .scroller{display:block;} 
        }
    }
    .menu-section{
        .item .board-title{width:139px;} 
        .list{display:none;}
        &.expanded .list{display:block;}
    }

    .btn-expander{
        .icon-collapse{display:none;}
        .icon-expand{display:block;}
    }

    .section-bar{cursor:pointer;
        .title{width:150px;}
        &.expanded{
            .btn-expander{
                .icon-collapse{display:block;}
                .icon-expand{display:none;}
            }
        }
    }

    &:after { bottom: 100%; left: 8%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 15px; margin-left: -15px;}

    &.always-show{top:44px; left:0px; margin:0; border-radius:0; max-height:unset !important;
        &:after {
            border-width:0 !important;
        }
    }
}
.bg-for-boards-menu, .bg-for-user-menu{position:absolute; top:0; left:0; right:0; bottom:0; z-index:99;
    .dark-area{position:absolute; top:44px; left:0; right:0; bottom:0; background:rgba(0,0,0,0.3);}
}
.bg-for-user-menu{z-index:8000; top:-50px;}

.btn-user{ cursor:pointer;}
.dropdown-menu, .user-menu{position:absolute; right:10px; top:40px; margin:10px 0 0 7px; max-width:220px; z-index:8000; border-radius:5px; box-shadow:@shadow;
    .scroller{position:relative; float:right; background-color:rgba(0,0,0,0.05); width:10px; height:100%; overflow:hidden; border-radius:10px; margin-top:7px;}
    .scrollbar{position:relative; background-color:rgba(0,0,0,0.1); width:10px; min-height:20px; overflow:hidden; border-radius:10px;}
    .scrollable{overflow:hidden; max-width:224px;
        .scroller{display:none;}
        &:after{content:' '; display:block; clear:both; height:0; overflow:hidden;}
        &.scroll{ max-width:234px;
            .items{float:left; width:224px;}
            .item{padding-right:8px;}
            .scroller{display:block;} 
            .menu-section .item .title{width:139px;} 
        }
    }
    a{display:block; width:100%;}
    a:hover, a:active{text-decoration:none !important;}
    &:after { bottom:100%; left:90%; border:solid transparent; content:""; height:0; width:0; position:absolute; pointer-events:none; border-width:15px; margin-left:-15px;}
}

.orgs-list-menu, .themes-list-menu{right:190px; max-height:~"calc(100% - 70px)"; width:220px; 
    .movable{float:left; position:relative; max-width:200px; padding-bottom:10px;line-height:0; 
        & > div{float:left;}
        a .row{white-space:nowrap; text-wrap:none; text-overflow:ellipsis; overflow:hidden;}
    }
    .movable > *{display:inline-block; width:200px; }
    .movable:after{content:'';display:block;clear:both;}
    a:hover, a:active{text-decoration:none !important;}
    &:after { bottom:unset; top:68px; left:100%;}
}
.themes-list-menu{top:135px; max-height:~"calc(100% - 180px)";}

header{
    .profile{border-radius:50px; overflow:hidden; background-color:rgba(0,0,0,0.15); padding:0 2px; margin-top:2px;
        &.no-user{
            use{fill:rgba(0,0,0,0.3);color:rgba(0,0,0,0.2);}
        }
    }
}

.popup .upload{ height:50px;
    iframe{width:100%; height:100%; border:0 none; background:transparent;}
}
