$header_height:48px;
$aside_width:200px;
$aside_padding:25px;

$shadow:0 0 5px 0 #666;
nav{
    position:absolute;
    top:0;
    width:100%;
    height:$header_height;
    font-size:14px;
    box-shadow:$shadow;
    z-index: 10;
    flex-direction:row;
    box-shadow: 0px 1px 2px 0px #1d1d1d;
    i {font-size:20px;}
    &,>div{display:flex;}
    >div {
        flex:1;
        flex-direction:row;
        >*{
            height:100%;
            display:flex;
            padding:0 15px;
            flex-direction:column;
            justify-content:center;
            border-style:solid;
            transition:background-color 300ms ease;
            &:hover{background-color:rgba(0, 0, 0, .08);}
        }
    }
    .dropdown-menu {text-align: justify;color:#333;}
    .title {
        >*{border-width:0 1px 0 0;}
        .dropdown-menu {right:initial;left:0;}
        #module li>a {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding:5px;
            span{flex:1}
            i{
                display: flex;
                justify-content: center;
                align-items: center;
                width:30px;
                height:30px;
                margin:0 5px;
                color:#444;
                font-size: 20px;
                border-radius:50%;
                border:1px solid #ccc;
            }
        }
    }
    .option {
        direction: rtl;
        >*{border-width:0 0 0 1px;}
        .dropdown-menu {right:0;left:initial;}

        .datetime {
            .qulon {animation: ticktok 1s linear infinite;}
            @keyframes ticktok {
                0% {opacity: 0;}
                50% {opacity: 0;}
                51% {opacity: 1;}
                100% {opacity: 1;}
            }
        }
    }
    @media print {display: none;}
}

//======== Aside
aside{
    position:absolute;
    font-size:13px;
    top:$header_height;
    width:$aside_width;
    box-shadow:$shadow;
    display: flex;
    z-index:5;
    flex-direction: column;
    height:calc(100% - #{$header_height});
    transition:transform 300ms ease;
    .user-info {
        display:flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color:rgba(0, 0, 0, .05);
        .image {
            width: 80px;
            height: 80px;
            border-radius:50%;
            margin: 10px auto;
            background-image: url(../../images/user.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        >*{display:block;}
        span{font-size:14px; color: #ccc;padding: 5px;}
        small{font-size:10px;color:#aaa;padding: 5px;}
    }
    .menu {
        flex:1;
        overflow-y:auto;
        ul,li,a{display:block}
        ul{
            margin:0;padding:0;overflow:hidden;
            ul {
                height:0;
                opacity:0;
                transform:translateX(-100%);
                transition:transform 200ms ease,opacity 500ms ease;
            }
        }
        li{
            transition:background-color 300ms ease;
            &.open{
                background-color:rgba(0, 0, 0, .08);
                >ul{height:auto;opacity:1;transform:translateX(0) !important}
                >a.menu-toggle::after {transform: rotate(45deg);}
            }
        }
        a{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            padding:12px 0;
            color: #dfdfdf;
            transition:background-color 300ms ease, color 300ms ease;
            &:hover{background-color:rgba(0, 0, 0, .08);color:#fff;}
            i{padding:0 10px;font-size:24px;display: inline-block;height: 24px;}
            &.menu-toggle {
                position: relative;
                &::after {
                    content:'';
                    position: absolute;
                    top:50%;
                    right:20px;
                    width: 5px;
                    height: 5px;
                    display: block;
                    margin-top: -2px;
                    transform: rotate(-45deg);
                    border-width: 0 1px 1px 0;
                    border-style: solid;
                    transition:transform 200ms ease;
                }
            }
        }

        ul ul a {padding-left:$aside_padding*2}
        ul ul ul a {padding-left:$aside_padding*3}
    }
    .footer {
        display:flex;
        flex-direction:row;
        justify-content:center;
        >*{
            flex:1;
            text-align:center;
            padding:15px 0;
            line-height:10px;
            font-size:18px;
            display: flex;
            flex-direction:column;
            justify-content:center;
            &:hover{background-color: rgba(0, 0, 0, .08);}
        }
    }
    @media print {display: none;}
}
//======== Main
main{
    position:absolute;
    right:0;
    display:flex;
    flex-direction:column;
    top:$header_height;
    width:calc(100% - #{$aside_width});
    height:calc(100% - #{$header_height});
    transition:width 300ms ease;
    background-color: #f9f9f9;
    /deep/router-outlet+*{
        position:absolute;
        top:0;
        right:0;
        width:100%;
        height:100%;
        overflow: auto;
        padding: 10px;
        box-sizing: border-box;
        background-color: #f7f7f7;
    }
    @media print {
        position: relative;
        top:initial;
        width:100%;
        height:100%;
    }
}

//======== Actions
aside.toggle{transform:translateX(-100%)}
main.toggle{width:100%;}
//======== Responsive
@media (max-width:1024px){
    aside{transform:translateX(-100%)}
    main{width:100% !important;}
    aside.toggle{transform:translateX(0)!important}
}
//====================================================== RTL
:host-context([dir="rtl"]) {
    //======== Nav
    nav {
        .title>*{
            border-width:0 0 0 1px;
            .dropdown-menu {right:0;left:initial;}
        }
        .option {
            direction: ltr;
            >*{
                border-width:0 1px 0 0;
                .dropdown-menu {right:initial;left:0;}
            }
        }
    }
    //======== Aside
    aside {
        .menu {
            ul ul{transform:translateX(100%)}
            a.menu-toggle:after {right:initial;left:20px;transform: rotate(135deg);}
            ul a {padding-left:0}
            ul ul a {padding-right:$aside_padding*2}
            ul ul ul a {padding-right:$aside_padding*3}
        }

        
    }
    //======== Main
    main{right:initial;left:0}
    //======== Actions
    aside.toggle{transform:translateX(100%)}
    //======== Responsive
    @media (max-width:1024px){
        aside{transform:translateX(100%)}
    }
}
//====================================================== Actions

$themes: (
    ("dark-red",(#962247,#fff),(#252525,#fff)),
    ("dark-green",(#1E9E13,#fff),(#303841,#fff)),
);

@each $theme in $themes {
    $name: nth($theme,1);

    $color1: nth($theme,2);
    $color2: nth($theme,3);

    $bgcolor1: nth($color1,1);
    $forecolor1: nth($color1,2);

    $bgcolor2: nth($color2,1);
    $forecolor2: nth($color2,2);

    :host-context(.#{$name}) { 
        nav {
            background-color:$bgcolor1;
            color:$forecolor1;
            >div>*{border-color:darken($bgcolor1,5%);}
        }
        aside {
            background-color:$bgcolor2;
            color:$forecolor2;
            .user-info {
                border-bottom:1px solid lighten($bgcolor2,5%);
            }
            .footer {
                border-top:1px solid lighten($bgcolor2,5%);
            }
        }
    }
}
.notification {
    position: absolute;
    left: 0;
    bottom: 0;
}