////////////////////////////////////////////////////////////////////////////////
//
//  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 TabBar

// TabBar variables

.jewel
    &.tabbar
        // width: 100%
        display: flex
        overflow-y: hidden
        overflow-x: scroll
        -webkit-overflow-scrolling: touch //Momentum (innercial) Scrolling on iOS 
        -ms-overflow-style: -ms-autohiding-scrollbar !important // IE 10+
        scrollbar-width: none  // Firefox
        &::-webkit-scrollbar 
            display: none !important // Safari and Chrome
            width: 0 !important
            height: 0 !important
            background-color: transparent
        &::-webkit-scrollbar-thumb
            display: none !important

        > .content
            display: flex
            
            position: relative
            flex: 1 0 auto 
            transform: none
            will-change: transform


j|TabBar
    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TabBarView")
    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
    IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory")
    IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer")
    IItemRendererInitializer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.TabBarItemRendererInitializer")
    ISelectableItemRenderer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead")
    IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
    IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
    IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView")

// Jewel TabBarButtonItemRenderer
$tabbarbutton-margin: 0 !default
$tabbarbutton-padding: 0 24px !default
// $tabbarbutton-margin-height: 48px

// TabBarButtonItemRenderer variables
.jewel
    &.tabbarbutton
        // height: $tabbarbutton-margin-height
        // min-height: $tabbarbutton-margin-height
        margin: $tabbarbutton-margin
        padding: $tabbarbutton-padding
        
        position: relative
        display: flex
        flex: 1 0 auto
        white-space: nowrap
        justify-content: center
        z-index: 1
        overflow: initial

        > .content
            display: flex
            position: relative
            align-items: center
            justify-content: center

            height: inherit

        .indicator
            display: flex
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            pointer-events: none
            z-index: 1

            > .indicatorContent
                align-self: flex-end
                width: 100%
                opacity: 0

        &.selected
            .indicator
                > .indicatorContent
                    opacity: 1

j|TabBarButtonItemRenderer
    IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController")


j|TabBarContent
    IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
    IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
    IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")