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

// Jewel TabBarButtonItemRenderer

// TabBarButtonItemRenderer variables
// Jewel NavigationLinkItemRenderer

// NavigationLinkItemRenderer variables
.jewel
    &.tabbarbutton
        // margin: 0
        // padding: 0
        font:
            // family: $font-stack
            size: $font-size
            weight: $font-weight-normal + 100
        
        border: none
        background: transparent
        outline: none
        color: rgba(black, 0.6)

        text-transform: uppercase
        text-decoration: none
        letter-spacing: .1em
        font-weight: 600

        transition: background-color .3s ease-in-out, color .3s ease-in-out
        
        > .content
            padding-top: 12px
            padding-bottom: 12px
        
        .indicator
            > .indicatorContent
                height: 2px
                background-color: $primary-color
                // transform-origin: left
                // transition: transform .25s ease-in-out //cubic-bezier(.4,0,.2,1)
                // animation-duration: .3s
                // animation-timing-function: ease-in-out
                // animation-fill-mode: both
        &.hovered
            // color: $font-theme-color
            background: rgba($primary-color, .2)
            

        &.selected, &.selectable:active
            // color: $font-theme-color
            color: darken($primary-color, 15%)
            background: rgba($primary-color, .4)