////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel Drawer

// Drawer variables
$drawer-float-width-offset: 60px
$drawer-float-max-width: 310px

.jewel.drawer

    &.float
        position: fixed
        pointer-events: none
        
        top: 0
        left: 0
        
        width: 100%
        height: 100%
        
        overflow: hidden
        contain: strict
        
        z-index: $app-navigation-zindex

        &::before
            position: absolute
            display: block
            
            top: 0
            left: 0
            
            width: 100%
            height: 100%
            
            content: ""
            opacity: 0

        .drawermain
            position: absolute
            
            display: flex
            flex-direction: column
            
            left: 0
            right: initial
            
            height: 100%

        &.open
            pointer-events: auto

            &::before
                opacity: 1

    &.fixed
        width: 0

        .drawermain
            display: inline-flex
            flex-direction: column

            left: 0
            right: auto
            
            height: 100%
            
            overflow: hidden
            touch-action: none
  
        &.open 
            pointer-events: auto
            
            .drawermain
                transform: none

@media (min-width: $tablet)
    .jewel.drawer
        &.float
            .drawermain
                width: calc(100% - #{$drawer-float-width-offset})
                max-width: $drawer-float-max-width

// DrawerHeader
.jewel.drawerheader
    position: relative
    display: flex
    flex-direction: column
    align-items: center
    flex-shrink: 0

    div
        display: flex
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        align-items: flex-end

// DrawerContent
.jewel.drawercontent
    flex-grow: 1
    margin: 0
    overflow-x: hidden
    overflow-y: auto
    -webkit-overflow-scrolling: touch //Momentum (innercial) Scrolling on iOS 
    touch-action: pan-y



j|DrawerBase
    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")

j|Drawer
    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")

j|DrawerHeader
    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")

j|DrawerContent
    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
