/*--mobile-side-panel---*/
.side-panel{
    background:#038cd6;
    height:100%;
    overflow-x:hidden ;
    overflow-y:auto;
    position:fixed;
    right:-270px;
    top:0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width:270px;
    z-index:999;
    transition:transform 0.3s ease-out;
}


//side panel mobile nav
.nav-mobile{
    &__tabset{
        display: table;
        width: 100%;
        margin-top:-25px;
        table-layout: fixed;
        .tabpanel__tab{
            display:table-cell;
            font-size:inherit;
            line-height: 55px;
            float: none;
            a{
                display:block;
                position:relative;
                height:auto;
                line-height: 55px;
                padding:0;
                text-align:center;
                color:rgba(255,255,255,0.5);
                border:none;
                background:$color-telenor-blue-dark;
            }
            &.is-active{
                a{
                    background:none;
                    color:$color-white;
                }
            }
        }
    }
    &__search{
        background: $color-white;
        height:55px;
        &__text{
            float:left;
            width:80%;
            height:100%;
            line-height:3.125rem;
            padding:10px 15px;
            color:$color-steel-grey;
            border:0;
            outline:0;
            background:$color-white;
        }
        &__button{
            float:right;
            font-size:16px;
            lien-height:20px;
            padding:16px 10px 12px;
            width:20%;
            border:none;
            background:$color-white;
            color:$color-steel-grey;
            height:100%;
        }
    }
    &__accordion{
        li{
            position:relative;
            color: $color-white;
            line-height:55px;
            a{
                color:$color-white;
                display:block;
                height:100%;
                position:relative;
                z-index:1;
                padding:0 15px;
                transition:all 220ms ease;
            }
            span{
                display:flex;
                position:absolute;
                z-index:2;
                right:0;
                top:0;
                bottom:0;
                width:55px;
                height:55px;
                font-size:14px;
                cursor: pointer;
                opacity: .6;
                border-left:1px solid rgba(255,255,255,.2);
                transition: all 220ms ease;
                &.is-expanded{
                    &:before{
                        transform:rotate(90deg);
                    }
                }
                &:before{
                    margin:auto;
                }
            }
            &.is-active{
                >.nav-mobile__accordion__drop{
                    max-height: 100em;
                }
            }
        }
        >li{
            >a{
                font-size:1.2em;
                border-bottom:1px solid  rgba(255,255,255,.2);
            }
        }
        &__drop{
            background: $color-telenor-blue-dark;
            border-bottom:1px solid rgba(255,255,255,.2);
            overflow:hidden;
            transition:max-height .3s ease-out;
            a{
            &:hover{
                opacity: .5;
            }
        }
            li{
                line-height: 45px;
                &:first-child{
                    padding-top:5px
                }
            }
        }
    }
}


//The global mask body definition
.section{
    &--oncanvas{
        &:after{
            content:"";
            background-color: rgba(0,0,0,.35);
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transition: opacity .5s;
            visibility: hidden;
            z-index: 800;
        }
        &.is-disabled{
            &:after{
                position:fixed;
                top:0;
                right:270px;
                left:0;
                opacity:1;
                -moz-user-select: none;
                user-select: none;
                visibility: visible;
            }
        }
    }
    &--negtive{
        color:$color-white;
        .message{
            &--alert{
                .message__inner{
                    background: $color-telenor-yellow;
                    border-radius: 0;
                }
            }
        }
    }
}


.offcanvas{
    &--open{
        #footer,#main,.section--menu,.side-panel,.nav-mobile__container{
            transform: translateX(-270px);
        }
        &.side-panel--wide{
            .side-panel{
                width:320px;
                right: -320px;
                -webkit-transform: translateX(-320px);
                transform: translateX(-320px);
            }
            #footer,#main,.section--menu,.side-panel,.nav-mobile__container{
                transform: translateX(-320px);
            }
        }
        .section--oncanvas{
            box-shadow: 0 0 20px rgba(0,0,0,0.4);
        }
    }
}

#footer, #main, .nav-mobile__container, .section--menu {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
}