////////////////////////////////////////////////////////////////////////////////
//
//  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.HorizontalLayout")
    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.SelectionDataItemRendererFactoryForCollectionView")

// Jewel TabBarButtonItemRenderer
$tabbarbutton-margin: 0 !default

// TabBarButtonItemRenderer variables
.jewel
    &.tabbarbutton
        margin: $tabbarbutton-margin //to avoid margin in safari
        
        flex: 1 0 auto !important
        position: relative
        white-space: nowrap
        z-index: 1
        overflow: initial

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

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

            > .indicator-content
                opacity: 0
                align-self: flex-end

        &.indicator-opposite-side
            .indicator
                > .indicator-content
                    align-self: flex-start

        &.selected
            .indicator
                > .indicator-content
                    opacity: 1

// indicator depends on TabBar horizontal or vertical layout to be bottom or at side
.jewel
    &.tabbar
        &.layout
            &.horizontal
                ._internal_
                    bottom: 0
                .indicator
                    > .indicator-content
                        width: 100%
                .indicator-opposite-side
                    ._internal_
                        bottom: initial
                        top: 0
                    .indicator
                        > .indicator-content
                            bottom: initial
            &.vertical
                ._internal_
                    right: 0
                .indicator
                    > .indicator-content
                        position: absolute
                        height: 100%
                        right: 0
                .indicator-opposite-side
                    ._internal_
                        right: initial
                        left: 0
                    .indicator
                        > .indicator-content
                            right: initial


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

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")