@import "src/assets/styles/responsive-base.scss";

nav{
    height: 56px;
    flex-basis: 56px;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

:host>div{
    display: flex;
    flex-direction: column;
    height: 100%;
}

#res-body{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

app-avatar{
    width: 38px;
    height: 38px;
    
    margin-left:4px;
}

nav>span{
    flex: 1 1 auto;
}

#roomMenuTop{
    list-style-type: none;
    padding: 0;
    display: flex;
    height: 100%;

    >li{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        cursor: pointer;
        padding:12px;
        border-bottom: 4px solid rgba(0,0,0,0);
    }
}

nav mat-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left:4px;
    font-size:18px;
}


#roomMenuTop{
    @include screen('phone'){
        display: none;
    }
}
#roomMenuBottom{
    display: none;
    align-items: center;
    justify-content: space-around; 
    flex-basis: 68px;
    min-height: 68px;
    padding: 0 8px;
    margin: 0;

    >li{
        width: 100%;
        height: 100%;
        max-width:33%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        cursor: pointer;
        padding:12px;
        border-top: 4px solid rgba(0,0,0,0);

        mat-icon{
            font-size: 20px;
        }
    }

    @include screen('phone'){
        display: inherit;
    }
}

.loading-container{
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-container-column{
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.active-res{
    &.private{
        cursor: default;
    }
}

.menu-item-container{
    position: relative;
    .new-indicator{
        position: absolute;
        top: 5px;
        width: 10px;
        height: 10px;
        font-size: 10px;
        right: 5px;
    }
}