// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the
//          version in your base theme's directory,
//          for example alta/widgets/_oj.alta.tabbar.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


@import "../../utilities/oj.utilities";

@if $includeTabBarClasses != false {
    @include module-include-once("common.tabbar") {

        // This is to prevent the flash of unstyled content before the html becomes JET components.
        @if $initialVisibility == hidden {
            oj-tab-bar:not(.oj-complete) {
                visibility: hidden;
            }
        }

        oj-tab-bar {
          display: block;
        }

        /*Navtabs root node*/
        .oj-tabbar,
        .oj-tabbar-listview-container {
            overflow-x:hidden;
        }
        
        .oj-tabbar-listview {
          position: relative;
        }

        .oj-tabbar-touch {
             -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        /* navigation tabs divider used in category header natabs*/
        .oj-tabbar-category-divider {

            border-color: $tabBarCategoryDividerColor;

            border-style: solid;
            border-width: 1px 0 0;
            font-size: 0;
            height: 0;
            line-height: 0;
            margin: 0 3px;
        }
        /* navigation tabs divider used in horizontal natabs to separate buttons*/
        .oj-tabbar-horizontal .oj-tabbar-divider {

            border-color: $tabBarHorizontalItemDividerColor;

            border-style: solid;
            border-width: 0 1px 0 0;
            font-size: 0;
            height: 1.714rem;//24px
            line-height: 0;
            margin: 5px 0;
            align-self: center;
            display: none; // hide dividers by default
        }
        // enable dividers when natabs has marker class oj-tabbar-item-dividers
        .oj-tabbar-item-dividers .oj-tabbar-divider {
            display: list-item;
        }

        /* Basic styling  for all ul elements in list*/
        .oj-tabbar-element {
            list-style-type: none;
            padding-left: 0;
            padding-right: 0;
            margin: 0;
        }

        .oj-tabbar-item-element:not(.oj-tabbar-item) {
          display: block;
        }

        .oj-tabbar-item-element {
          // work around for IE 11 which ignores list-style-type:none for sub items on first load.
          // Setting list style image to transparent image.
          list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
        }

        /* Remove focus ring on outer ul element*/
        .oj-tabbar-element:focus {
            outline: none;
        }

        /* Style content wrapper of each tab item */

        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-label {
            vertical-align: middle;
        }

        .oj-tabbar-vertical .oj-tabbar-item::before {

            min-height: $tabBarVerticalItemMinHeight;

        //This is needed for IE 11 bug
        //https://connect.microsoft.com/IE/feedback/details/816293/ie11-flexbox-with-min-height-not-vertically-aligning-with-align-items-center
            content:"";
            display: inline-block;
            visibility: hidden;
        }

        .oj-tabbar-vertical .oj-tabbar-item-label {

            font-size: $tabBarVerticalItemFontSize;

        }

        /* Style content of each tab item */
        .oj-tabbar-item-content {
            display: flex;
            flex: 1 1 auto;
            align-items: center;
        }

        // For simple links case
        a.oj-tabbar-item-content {
            text-decoration: none;
            font-weight: normal;
            outline:none;
            overflow: hidden;
        }
        a.oj-tabbar-item-content:active {
            background-color: transparent;
        }

        a.oj-tabbar-item-content .oj-tabbar-item-label {

            color: $tabBarItemLabelColorDefault;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDefault;

            }
        }

        .oj-selected > a.oj-tabbar-item-content > .oj-tabbar-item-label {

            color: $tabBarItemLabelColorSelected;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }
        .oj-hover:not(.oj-selected) > a.oj-tabbar-item-content > .oj-tabbar-item-label {

                color: $tabBarItemLabelColorHover;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorHover;

            }
        }
        /* Navigation tabs item label or arbitrary content place holder*/
        .oj-tabbar-item-label {
            order: 2;
            text-overflow: ellipsis;

              white-space: $tabBarItemLabelTextWrap;
              min-width: $tabBarTruncatedLabelMinWidth;

            overflow-x: hidden;
            display: inline-block;
            line-height: normal;
        }

        .oj-tabbar-item-text-wrap .oj-tabbar-item-label {
            white-space: normal;
        }

        /*Padding for vertical natabs item label*/
        .oj-tabbar-vertical .oj-tabbar-item-label {
            padding: 3px 0;
            flex: 1 1 auto;
        }
        //move label to left most when edge is end
        .oj-tabbar-vertical-end.oj-tabbar-vertical .oj-tabbar-item-label {
            order: -1;

            @include oj-ltr() {
              text-align: right;
            }

            @include oj-rtl() {
              text-align: left;
            }
        }

        /* hide label for icons-only case */
        .oj-tabbar-icon-only .oj-tabbar-item-label {
            display:none;
        }

        /* Tab item's Icon */
        .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorDefault;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDefault;

            }
            flex: 0 0 auto;
        }

        /* Disabled node */
        .oj-tabbar-item.oj-disabled > .oj-tabbar-item-content {

            opacity: $opacityDisabled; // adding opacity to contents of item as it should not applicable to item separator/border.

        }

        .oj-tabbar-item.oj-disabled .oj-tabbar-item-label {

            color: $tabBarItemLabelColorDisabled;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDisabled;

            }
        }

        .oj-tabbar-item.oj-disabled a.oj-tabbar-item-content {
            cursor: default;
        }

        .oj-tabbar-item.oj-disabled .oj-tabbar-item-icon {

            color: $tabBarIconColorDisabled;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDisabled;

            }
        }

        /* Selected node */
        .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {

            color: $tabBarItemIconColorSelected;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        /* hover icon */
        .oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon,
        .oj-tabbar-item.oj-hover .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorHover;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorHover;

            }
        }

        .oj-tabbar-vertical .oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon
        {
          .oj-contrast-marker & {

              color: $tabBarItemContrastLabelColorSelected;

          }
        }

        /*borders for high contrast mode*/

        .oj-hicontrast .oj-tabbar-item.oj-selected,
        .oj-hicontrast .oj-tabbar-item.oj-selected.oj-hover,
        .oj-hicontrast .oj-tabbar-item.oj-selected.oj-focus {
            border: 1px solid;
        }

        .oj-hicontrast .oj-tabbar-item.oj-hover,
        .oj-hicontrast .oj-tabbar-item.oj-focus {
            border: 1px dotted;
        }

        /*Focus ring around  focused tab item*/
        .oj-tabbar .oj-tabbar-item.oj-focus-highlight {

            outline: dotted 1px $tabBarItemOutlineColorFocus; // Using dotted line for all browsers

            outline-offset: -1px;
        }

        .oj-hicontrast .oj-tabbar-item.oj-focus {
            outline: none;
        }

        .oj-tabbar-item {
            border-color:  transparent;
            display: flex;
            align-items: stretch;
        }

        //Set Selected item colors
        .oj-tabbar-vertical .oj-tabbar-item.oj-selected {

            background-color: $tabBarItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $tabBarItemContrastBgColorSelected;

            }
        }

        .oj-tabbar-item.oj-selected {


            border-color:  $tabBarItemBorderColorSelected;

        }

        //Apply hover bgcolor or border color only when item is not selected.
        .oj-tabbar-item.oj-hover:not(.oj-selected) {

            background-color: $tabBarItemBgColorHover;
            border-color:  $tabBarItemBorderColorHover;

            .oj-contrast-marker & {

                background-color: $tabBarItemContrastBgColorHover;

            }
        }
        :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected),
        .oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected) {

            border-color:  $tabBarItemBorderColorHover;

        }



        //Space between icon and text
        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
            align-self: center;

            @include oj-ltr() {
                margin-right: $tabBarIconToTextPadding;
            }


            @include oj-rtl() {
                margin-left: $tabBarIconToTextPadding;
            }
            

        }
        //Add margin to left of icon when edge is end
        .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {

           @include oj-ltr() {
                margin: 0 0 0 $tabBarIconToTextPadding;
           }

           @include oj-rtl() {
                margin: 0 $tabBarIconToTextPadding 0 0;
           }

        }

        //space when icon missing
        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {

            @include oj-ltr() {
                margin-left: calc(#{$tabBarIconToTextPadding} + 24px ); // here 24px is icon size
            }

            @include oj-rtl() {
                margin-right: calc(#{$tabBarIconToTextPadding} + 24px );// here 24px is icon size
            }

        }
      
        // Add extra margin to left of icon when edge is end. This is when icon is missing on a specific item
        .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {

            @include oj-ltr() {
                margin: 0 calc(#{$tabBarIconToTextPadding} + 24px ) 0 0; // here 24px is icon size
            }

            @include oj-rtl() {
                margin: 0 0 0 calc(#{$tabBarIconToTextPadding} + 24px );// here 24px is icon size
            }

        }


        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item
        {

            $tmpPadding: 0;//Need to define out side if to pass ruby sass build
            $tmpItemBorderWidth: oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth);
            @if $tmpItemBorderWidth == 0 {
                $tmpPadding: calc(#{$tabBarItemStartEndPadding} - 0px);
            } @else {
                $tmpPadding: calc(#{$tabBarItemStartEndPadding} - #{$tmpItemBorderWidth});
            }

            //Padding at start of item
            @include oj-rtl() {
                padding-right: $tmpPadding;
                border-width: oj-shorthand-property-value-top($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-right($tabBarVerticalItemBorderWidth);
            }
            @include oj-ltr() {
                padding-left:  $tmpPadding;
                border-width: oj-shorthand-property-value-top($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-right($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth);
            }

            border-style: solid;

        }


        .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item {
            border-style: none;
        }
        .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
        .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover
        {
            @include oj-rtl() {
                border-width: 1px;
            }
            @include oj-ltr() {
                border-width: 1px;
            }
            border-style: dotted;
        }

        .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
        .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
        .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover
        {
            @include oj-rtl() {
                border-width: 1px;
            }
            @include oj-ltr() {
                border-width: 1px;
            }
            border-style: solid;
        }



        //Add padding to right side for leaf node
        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {

            @include oj-ltr() {
                padding-right: $tabBarItemStartEndPadding;
            }
            @include oj-rtl() {
                padding-left: $tabBarItemStartEndPadding;
            }

        }


        .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {

            @include oj-ltr() {
                padding: 0 0 0 $tabBarItemStartEndPadding;
            }
            @include oj-rtl() {
                padding: 0 $tabBarItemStartEndPadding 0 0;
            }

        }


        .oj-tabbar-focused-element:not(.oj-focus-highlight) {
          outline: none;// avoid native browser ring on focus
        }

        //Add border with radius
        :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item
        {

            $tmpPadding: 0;//Need to define out side if to pass ruby sass build
            $tmpItemBorderWidth: oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth);
            @if $tmpItemBorderWidth == 0 {
                $tmpPadding:  calc(#{$tabBarItemStartEndPadding} - 0px);
            }@else {
                $tmpPadding:  calc(#{$tabBarItemStartEndPadding} - #{$tmpItemBorderWidth})
            }
            // need to override both ltr and rtl because default expanded natabs will have selection border based on direction.
            @include oj-rtl() {
                padding-right: $tmpPadding;
                border-width: 0 oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-right($tabBarVerticalItemBorderWidth);
            }
            @include oj-ltr() {
                padding-left: $tmpPadding;
                border-width: 0 oj-shorthand-property-value-right($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth);
            }
            border-color: $tabBarItemBorderColor;

            border-style: solid;
            border-radius: 0;
        }

        .oj-tabbar-vertical.oj-tabbar-vertical-end:not(.oj-tabbar-icon-only) .oj-tabbar-item
        {

            $tmpPadding: 0;//Need to define out side if to pass ruby sass build
            $tmpItemBorderWidth: oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth);
            @if $tmpItemBorderWidth == 0 {
                $tmpPadding:  calc(#{$tabBarItemStartEndPadding} - 0px);
            }@else {
                $tmpPadding:  calc(#{$tabBarItemStartEndPadding} - #{$tmpItemBorderWidth})
            }

            @include oj-rtl() {
              padding: 0 0 0 $tmpPadding;
              border-width: 0 oj-shorthand-property-value-right($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth);
            }
            @include oj-ltr() {
              padding: 0 $tmpPadding 0 0; //Add padding to right of item  when edge is end.
              border-width: 0 oj-shorthand-property-value-left($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalItemBorderWidth) oj-shorthand-property-value-right($tabBarVerticalItemBorderWidth);
            }

        }


        :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:first-of-type {

            border-top-left-radius: oj-shorthand-property-value-top($tabBarItemBorderRadius);
            border-top-right-radius: oj-shorthand-property-value-right($tabBarItemBorderRadius);
            // need to override both ltr and rtl as it was overriden above for border-width.
            @include oj-rtl() {
                border-top-width: oj-shorthand-property-value-top($tabBarVerticalItemBorderWidth);
            }
            @include oj-ltr() {
                border-top-width: oj-shorthand-property-value-top($tabBarVerticalItemBorderWidth);
            }

        }

        :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:last-of-type {

            border-bottom-left-radius: oj-shorthand-property-value-left($tabBarItemBorderRadius);
            border-bottom-right-radius: oj-shorthand-property-value-bottom($tabBarItemBorderRadius);

        }

        /*Start of icons only natabs*/

        //vertical icon only tab styling
         @if $tabBarIconOnlyStyle == circle {
            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-hover,
            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected), 
            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-active:not(.oj-selected){
                background-color: transparent;
                .oj-contrast-marker & {
                    background-color: transparent;
                }
            }
            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {

                background-color: $tabBarItemIconOnlyBgColorSelected;

                .oj-contrast-marker & {

                    background-color: $tabBarItemIconOnlyBgColorSelected;

                }
            }

            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {

                background-color: $tabBarItemIconOnlyBgColorHover;

                .oj-contrast-marker & {

                    background-color: $tabBarItemContrastBgColorHover;

                }
            }

            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-icon
            {
                border-radius: 50%;
                padding: 12px;
            }
        }
        @else {
            .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-icon
            {

                $tmpPadding: 0;//Need to define out side if to pass ruby sass build
                $tmpSelectionBorderWidth: oj-shorthand-property-value-left($tabBarVerticalIconOnlyItemBorderWidth);
                @if $tmpSelectionBorderWidth == 0 {
                    $tmpPadding:  calc(#{$tabBarVerticalIconOnlyIconStartEndPadding} - 0px);
                }@else {
                    $tmpPadding:  calc(#{$tabBarVerticalIconOnlyIconStartEndPadding} - #{$tmpSelectionBorderWidth})
                }

                @include oj-rtl() {
                    padding: 0 $tmpPadding 0 $tabBarVerticalIconOnlyIconStartEndPadding;
                }

                @include oj-ltr() {
                    padding: 0 $tabBarVerticalIconOnlyIconStartEndPadding 0 $tmpPadding;
                }

            }


            .oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item
            {
                border-style: solid;
                border-radius: 0;
                // need to override both ltr and rtl because default expanded natabs will have selection border based on direction.

                  border-color: $tabBarItemBorderColor;
                  @include oj-rtl() {
                      border-width: 0 oj-shorthand-property-value-left($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-right($tabBarVerticalIconOnlyItemBorderWidth);
                  }
                  @include oj-ltr() {
                      border-width: 0 oj-shorthand-property-value-right($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-left($tabBarVerticalIconOnlyItemBorderWidth);
                  }

            }
            .oj-tabbar-icon-only.oj-tabbar-vertical.oj-tabbar-vertical-end .oj-tabbar-item
            {

                  @include oj-rtl() {
                    border-width: 0 oj-shorthand-property-value-right($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-left($tabBarVerticalIconOnlyItemBorderWidth);
                  }
                  @include oj-ltr() {
                    border-width: 0 oj-shorthand-property-value-left($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-bottom($tabBarVerticalIconOnlyItemBorderWidth) oj-shorthand-property-value-right($tabBarVerticalIconOnlyItemBorderWidth);
                  }

            }


            .oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:first-of-type {

                  // need to override both ltr and rtl as it was overriden above for border-width.
                  @include oj-rtl() {
                      border-top-width: oj-shorthand-property-value-top($tabBarVerticalIconOnlyItemBorderWidth);
                  }
                  @include oj-ltr() {
                      border-top-width: oj-shorthand-property-value-top($tabBarVerticalIconOnlyItemBorderWidth);
                  }
                  border-top-left-radius: oj-shorthand-property-value-top($tabBarItemBorderRadius);
                  border-top-right-radius: oj-shorthand-property-value-right($tabBarItemBorderRadius);

            }

            .oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:last-of-type {

                  border-bottom-left-radius: oj-shorthand-property-value-left($tabBarItemBorderRadius);
                  border-bottom-right-radius: oj-shorthand-property-value-bottom($tabBarItemBorderRadius);

            }

            .oj-tabbar-vertical .oj-tabbar-item.oj-selected {

                  background-color: $tabBarItemBgColorSelected;

                .oj-contrast-marker & {

                      background-color: $tabBarItemContrastBgColorSelected;

                }
            }
        }


        .oj-tabbar-icon-only .oj-tabbar-item-content {
            justify-content: center;
        }
        /*End of icons only natabs*/

        //This is needed to ensure icon only tabs not stretch to available space.
        .oj-tabbar-vertical.oj-tabbar-icon-only {
            display: inline-flex;
        }

        //Margin for Vertical icons only tabs
        .oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item {

            margin: $tabBarVerticalIconOnlyItemPadding;

        }
        //Remove margin top for first element
        .oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:first-child {
            margin-top: 0;
        }


        .oj-tabbar-vertical .oj-tabbar-item.oj-selected {

            border-color:  $tabBarItemBorderColorSelected;

        }

        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {

            background-color: $tabBarItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $tabBarItemContrastBgColorSelected;

            }
        }

        .oj-tabbar-vertical:not(.oj-tabbar-icon-only)  .oj-tabbar-item:not(.oj-disabled) a.oj-tabbar-item-content  .oj-tabbar-item-label {

            color: $tabBarItemLabelColorDefault;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDefault;

            }
        }
        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorDefault;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDefault;

            }
        }
        .oj-tabbar-vertical:not(.oj-tabbar-icon-only)  .oj-tabbar-item.oj-selected a.oj-tabbar-item-content  .oj-tabbar-item-label {

            color: $tabBarItemLabelColorSelected;
            font-weight: $tabBarItemFontWeightSelected;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorSelected;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        .oj-tabbar-vertical:not(.oj-tabbar-icon-only)  .oj-tabbar-item.oj-hover:not(.oj-selected) a.oj-tabbar-item-content  .oj-tabbar-item-label {

              color: $tabBarItemLabelColorHover;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorHover;

            }
        }

        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorHover;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorHover;

            }
        }
        .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon
        {
            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }
        // bg and border colors for hover or active  are same.
        .oj-tabbar-vertical .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
        .oj-tabbar-vertical .oj-tabbar-item.oj-active:not(.oj-selected){

            background-color: $tabBarItemBgColorActive;
            .oj-contrast-marker & {
              background-color: $tabBarItemContrastBgColorActive;
            }
            
            @include oj-rtl() {
                border-right-color: $tabBarItemBorderColorActive;
            }
            @include oj-ltr() {
                border-left-color: $tabBarItemBorderColorActive;
            }

        }


        /*Start of common horizontal navigationtabs styles */

        .oj-tabbar-horizontal .oj-tabbar-element {
                display: flex;
        }

        .oj-tabbar-horizontal.oj-tabbar-item-text-wrap .oj-tabbar-item {
                flex: 1 1 auto;
        }
        .oj-tabbar-horizontal.oj-condense .oj-tabbar-item
        {
          flex: 0 0 auto;
        }

        /* This is due to bug in IE 11 where setting flex-shrink:0 is needed to avoid truncation in item text which is needed for overflow feature. This work around breaks text-wrap functionality so enabling this only when no text wrap. We can remove this once IE 11 support dropped and can update docs saying text-wrap is supported with overflow. */

        .oj-tabbar-horizontal .oj-tabbar-item {
                flex: 1 0 auto;
        }

        // UP
        @if $responsiveQuerySmallUp and $responsiveQuerySmallUp != none {
          @media #{$responsiveQuerySmallUp} {
            //Need to add page-level/app-level selector as we already overriding flex property in ios scss to show equal sized buttons
            .oj-tabbar-horizontal.oj-sm-condense .oj-tabbar-item
            {
              flex: 0 0 auto;
            }

            .oj-tabbar-horizontal.oj-sm-justify-content-center .oj-tabbar-element {
                justify-content: center;
            }
            .oj-tabbar-horizontal.oj-sm-justify-content-flex-end .oj-tabbar-element {
                justify-content: flex-end;
            }

          }
        }


        @if $responsiveQueryMediumUp and $responsiveQueryMediumUp != none {
          @media #{$responsiveQueryMediumUp} {
            .oj-tabbar-horizontal.oj-md-condense .oj-tabbar-item
            {
              flex: 0 0 auto;
            }
            .oj-tabbar-horizontal.oj-md-justify-content-center .oj-tabbar-element {
                justify-content: center;
            }
            .oj-tabbar-horizontal.oj-md-justify-content-flex-end .oj-tabbar-element {
                justify-content: flex-end;
            }
          }
        }


        @if $responsiveQueryLargeUp and $responsiveQueryLargeUp != none {
          @media #{$responsiveQueryLargeUp} {
            .oj-tabbar-horizontal.oj-lg-condense .oj-tabbar-item
            {
              flex: 0 0 auto;
            }
            .oj-tabbar-horizontal.oj-lg-justify-content-center .oj-tabbar-element {
                justify-content: center;
            }
            .oj-tabbar-horizontal.oj-lg-justify-content-flex-end .oj-tabbar-element {
                justify-content: flex-end;
            }
          }
        }


        @if $responsiveQueryXlargeUp and $responsiveQueryXlargeUp != none {
          @media #{$responsiveQueryXlargeUp} {
            .oj-tabbar-horizontal.oj-xl-condense .oj-tabbar-item
            {
              flex: 0 0 auto;
            }
            .oj-tabbar-horizontal.oj-xl-justify-content-center .oj-tabbar-element {
                justify-content: center;
            }
            .oj-tabbar-horizontal.oj-xl-justify-content-flex-end .oj-tabbar-element {
                justify-content: flex-end;
            }
          }
        }


        @if $responsiveQueryXXlargeUp and $responsiveQueryXXlargeUp != none {
          @media #{$responsiveQueryXXlargeUp} {
            .oj-tabbar-horizontal.oj-xxl-condense .oj-tabbar-item
            {
              flex: 0 0 auto;
            }
            .oj-tabbar-horizontal.oj-xxl-justify-content-center .oj-tabbar-element {
                justify-content: center;
            }
            .oj-tabbar-horizontal.oj-xxl-justify-content-flex-end .oj-tabbar-element {
                justify-content: flex-end;
            }
          }
        }

        .oj-tabbar-horizontal .oj-tabbar-item-element {
          box-sizing: border-box;

              min-height: $tabBarHorizontalItemMinHeight;

        }

        .oj-tabbar-horizontal  .oj-selected > a.oj-tabbar-item-content > .oj-tabbar-item-label{

            color: $tabBarItemLabelColorSelected;

        }

        .oj-tabbar-horizontal .oj-tabbar-item.oj-selected {

            background-color: $tabBarHorizontalItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $tabBarHorizontalItemContrastBgColorSelected

            }
        }
        .oj-tabbar-horizontal .oj-tabbar-item-label {
                align-self: center;
        }

        //Padding around icon in horizontal tabs
        .oj-tabbar-horizontal .oj-tabbar-item-icon
        {

            margin: $tabBarHorizontalIconMargin;

        }

        /*End of common horizontal navigationtabs styles */

        /*Start of  horizontal navigationtabs styles icons only*/
        //Padding for horizontal icons only tabs
        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {

           @include oj-ltr() {
                margin-left: $tabBarHorizontalIconOnlyItemMargin;
           }
           @include oj-rtl() {
                margin-right: $tabBarHorizontalIconOnlyItemMargin;
           }

        }


        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-child {
           @include oj-ltr() {
                margin-left:0;
           }
           @include oj-rtl() {
                margin-right:0;
           }
        }
        @if $tabBarHorizontalIconOnlyStyle == circle {
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover,
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected), 
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-active:not(.oj-selected) {
                background-color: transparent;
                .oj-contrast-marker & {
                    background-color: transparent;
                }
            }
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {

                  background-color: $tabBarItemIconOnlyBgColorSelected;

            }

            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {

                  background-color: $tabBarItemIconOnlyBgColorHover;

                .oj-contrast-marker & {

                      background-color: $tabBarItemContrastBgColorHover;

                }
            }
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item-icon
            {
                border-radius: 50%;
                padding: 12px;
            }
        }
        @else {
            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {

                  border-width: $tabBarHorizontalIconOnlyItemBorderWidth;

                border-style: solid;
            }
            .oj-tabbar-horizontal-bottom.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {

                  border-width: oj-shorthand-property-value-bottom($tabBarHorizontalIconOnlyItemBorderWidth) oj-shorthand-property-value-right($tabBarHorizontalIconOnlyItemBorderWidth) oj-shorthand-property-value-top($tabBarHorizontalIconOnlyItemBorderWidth) oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);


            }
            .oj-tabbar-horizontal .oj-tabbar-item.oj-selected {

                  background-color: $tabBarHorizontalItemBgColorSelected;

                .oj-contrast-marker & {

                      background-color: $tabBarHorizontalItemContrastBgColorSelected;

                }
            }
        }
        /*End of  horizontal navigationtabs styles icons only*/

        /*Start of  horizontal navigationtabs styles excluding icons only*/

        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {

            border-width: $tabBarHorizontalItemBorderWidth;

            border-style: solid;
        }

        .oj-tabbar-horizontal-bottom.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {

            border-width: oj-shorthand-property-value-bottom($tabBarHorizontalItemBorderWidth) oj-shorthand-property-value-right($tabBarHorizontalItemBorderWidth) oj-shorthand-property-value-top($tabBarHorizontalItemBorderWidth) oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);

        }

        .oj-hicontrast  .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item{
            border-style: none;
        }
        .oj-hicontrast  .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-focus,
        .oj-hicontrast  .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover {
            border-width: 1px;
            border-style: dotted;
        }
        html:not([dir="rtl"]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected,
        html:not([dir="rtl"]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-focus,
        html:not([dir="rtl"]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-hover,
        .oj-hicontrast  .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected,
        .oj-hicontrast  .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-focus,
        .oj-hicontrast  .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-hover {
            border-width: 1px;
            border-style: solid;
        }

        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
            justify-content: center;

              padding: $tabBarHorizontalItemPadding;

        }

        .oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {

            padding: $tabBarHorizontalStackedItemPadding;

        }

            //Add Space between icon and text
        .oj-tabbar-horizontal:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
            align-self: center;

              @include oj-ltr() {
                  margin-right: $tabBarHorizontalIconToTextPadding;
              }
              @include oj-rtl() {
                  margin-left: $tabBarHorizontalIconToTextPadding;
              }

        }

        /*End of  horizontal navigationtabs styles excluding icons only*/

        /*Start of  horizontal stacked icon label navigationtabs styles */

        .oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-element {

            min-height: $tabBarHorizontalItemStackedIconMinHeight;

        }
            //Horizontal divider
        .oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-divider {
             height: 2.714rem;//38px
        }

        .oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item {
            padding-bottom: 2px;
        }
        .oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
            flex-direction: column;
        }

        /*End of  horizontal stacked icon label navigationtabs styles */

        .oj-tabbar-horizontal .oj-tabbar-item-label {

            font-size: $tabBarHorizontalItemFontSize;

          text-align: center;
        }


        //Add border to horizontal tab item
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
          border-radius: 0;

              @include oj-ltr() {
                border-right-width: oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);
                border-left-width: 0;
              }
              @include oj-rtl() {
                border-left-width: oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);
                border-right-width:0;
              }
              border-color: $tabBarHorizontalItemBorderColor;

        }

        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {

            @include oj-ltr() {
              border-left-width: oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);
            }
            @include oj-rtl() {
              border-right-width: oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);
            }

        }


        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:first-of-type {

            @include oj-ltr() {
              border-left-width: oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);
              border-top-left-radius: oj-shorthand-property-value-top($tabBarItemBorderRadius);
              border-bottom-left-radius: oj-shorthand-property-value-left($tabBarItemBorderRadius);
            }
            @include oj-rtl() {
              border-right-width: oj-shorthand-property-value-left($tabBarHorizontalItemBorderWidth);
              border-top-right-radius: oj-shorthand-property-value-right($tabBarItemBorderRadius);
              border-bottom-right-radius: oj-shorthand-property-value-bottom($tabBarItemBorderRadius);
            }

        }

        //Add border to icon only horizontal tab item
        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
          border-radius: 0;

            border-color: $tabBarHorizontalItemBorderColor;

        }

            .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
                @include oj-ltr() {
                  border-right-width: oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);
                  border-left-width: 0;
                }
                @include oj-rtl() {
                  border-left-width: oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);
                  border-right-width:0;
                }
            }

        html:not([dir="rtl"]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item,
        html[dir="rtl"] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
          border-left-width: 1px;
          border-right-width: 1px; 
        }
        
        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
          html:not([dir="rtl"]) .oj-hicontrast & {
            border-left-width: 1px;
          }

          html[dir="rtl"] .oj-hicontrast & {
            border-right-width: 1px;
          }
          

            @include oj-ltr() {
              border-left-width: oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);
            }
  
            @include oj-rtl() {
              border-right-width: oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);
            }

        }

        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {

            @include oj-ltr() {
              border-left-width: oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);
              border-top-left-radius: oj-shorthand-property-value-top($tabBarItemBorderRadius);
              border-bottom-left-radius: oj-shorthand-property-value-left($tabBarItemBorderRadius);
            }
            @include oj-rtl() {
              border-right-width: oj-shorthand-property-value-left($tabBarHorizontalIconOnlyItemBorderWidth);
              border-top-right-radius: oj-shorthand-property-value-right($tabBarItemBorderRadius);
              border-bottom-right-radius: oj-shorthand-property-value-bottom($tabBarItemBorderRadius);
            }

        }



        html:not([dir="rtl"]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
          border-left-width: 1px;
        }

        html[dir="rtl"] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
          border-right-width: 1px;
        }

        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-tabbar-item-last-child,
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-tabbar-item-last-child {

            @include oj-ltr() {
              border-top-right-radius: oj-shorthand-property-value-right($tabBarItemBorderRadius);
              border-bottom-right-radius: oj-shorthand-property-value-bottom($tabBarItemBorderRadius);
            }
            @include oj-rtl() {
              border-top-left-radius: oj-shorthand-property-value-top($tabBarItemBorderRadius);
              border-bottom-left-radius: oj-shorthand-property-value-left($tabBarItemBorderRadius);
            }

        }

        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {

            border-color:  $tabBarHorizontalItemBorderColorSelected;

        }

        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected),
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover:not(.oj-selected) {

            border-color:  $tabBarHorizontalItemBorderColorHover;

        }

        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {

            background-color: $tabBarHorizontalItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $tabBarHorizontalItemContrastBgColorSelected;

            }
        }
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only)  .oj-tabbar-item:not(.oj-disabled) a.oj-tabbar-item-content  .oj-tabbar-item-label {

            color: $tabBarItemLabelColorDefault;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDefault;

            }
        }

        .oj-tabbar-horizontal .oj-tabbar-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorDefault;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorDefault;

            }
        }

        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only)  .oj-tabbar-item.oj-selected a.oj-tabbar-item-content  .oj-tabbar-item-label {

            color: $tabBarHorizontalItemLabelColorSelected;
            font-weight: $tabBarItemFontWeightSelected;

            .oj-contrast-marker & {

                color: $tabBarHorizontalItemContrastLabelColorSelected;

            }
        }

        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon
        {

            color: $tabBarHorizontalItemIconColorSelected;

            .oj-contrast-marker & {

                color: $tabBarHorizontalItemContrastLabelColorSelected;

            }
        }
        .oj-tabbar-horizontal .oj-tabbar-item.oj-hover:not(.oj-selected) a.oj-tabbar-item-content > .oj-tabbar-item-label {

            color: $tabBarHorizontalItemLabelColorHover;

        }
        .oj-tabbar-horizontal .oj-tabbar-item.oj-hover .oj-tabbar-item-icon
        {

            color: $tabBarItemIconColorHover;

        }

        .oj-tabbar-horizontal .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
        .oj-tabbar-horizontal .oj-tabbar-item.oj-active:not(.oj-selected){

              background-color: $tabBarItemBgColorActive;
              .oj-contrast-marker & {
                background-color: $tabBarItemContrastBgColorActive;
              }

        }
        
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
        .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-active:not(.oj-selected) {

            border-color: $tabBarItemBorderColorActive;

        }



        .oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {

            color: $tabBarIconOnlyIconColorSelected;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
            .oj-contrast-marker & {

                color: $tabBarHorizontalItemContrastLabelColorSelected;

            }
        }

        .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        @if( $tabBarVerticalItemLabelTextAlign == center ) {
            //center align the entire contents
            .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
              justify-content: center;
            }

          .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-content .oj-tabbar-item-label {
              flex: 0 1 auto;
            }
        }

        @if( $tabBarHorizontalItemWidthDistribution == even) {
          //For horizontal navtabs, button size should be equal.
            .oj-tabbar-horizontal .oj-tabbar-item {
              flex: 1 1 0;
            }
        } 
        

            //This is needed for ios as icon default color is not visible on selected item
            .oj-tabbar-vertical .oj-tabbar-item.oj-selected .oj-tabbar-remove-icon:not(:hover) {
                color: $tabBarItemIconColorSelected;
            }
  
            //This is needed for ios as icon default color is not visible on selected item
            .oj-tabbar-horizontal .oj-tabbar-item.oj-selected .oj-tabbar-remove-icon:not(:hover) {
                color: $tabBarHorizontalItemIconColorSelected;
            }


        //Add bottom border to separate list items
        .oj-tabbar-vertical .oj-tabbar-item,
        .oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected),
        .oj-tabbar-vertical .oj-tabbar-item.oj-selected,
        :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item,
        :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected) {

            border-bottom-color: $tabBarVerticalItemSeparatorColor;

        }

        .oj-tabbar-has-icons .oj-tabbar-overflow-item-icon {
            display: block;
        }

        .oj-tabbar-overflow-item-icon {
           display: none;
           font-size: 24px;
        }

        /* Styling for the drag image */
        .oj-tabbar-drag-image {
            background-color: transparent;
            position: fixed;
            top: 10000px;
            border: 1px solid transparent;
            overflow-x: initial;
            padding: 3px;
        }

        /* Styling for hiding the original item being dragged */
        .oj-tabbar-drag-item {
            display: none;
        }

        /* Styling item that is draggable (no affordance) */
        .oj-tabbar-item.oj-draggable {
            cursor: move;
        }

        /* Styling for the item that is being moved using drag */
        .oj-tabbar-item.oj-drag {

            box-shadow: $largeBoxShadow;
            border-top: 1px solid;
            border-bottom: 1px solid;

        }

        /* Styling all drop targets in the list */
        .oj-tabbar .oj-tabbar-item.oj-drop,
        .oj-tabbar .oj-tabbar-item.oj-drop.oj-active,
        .oj-tabbar .oj-tabbar-item.oj-drop.oj-default,
        .oj-tabbar .oj-tabbar-item.oj-drop.oj-disabled,
        .oj-tabbar .oj-tabbar-item.oj-drop.oj-selected,
        .oj-tabbar .oj-tabbar-item.oj-drop.oj-hover,
        .oj-tabbar .oj-tabbar-item.oj-drop.oj-hover:not(.oj-selected) {
            box-sizing: border-box;

            border: 1px solid $dropTarget2Color;
            background-color: $dropTarget1Color;

        }

        /* Used when there are no items in tabbar */
        .oj-tabbar-no-data-message {

            padding: $panelPadding;
            color: $textColor;
            min-height: $fontSize;

        }

        /* Styling on the status text, such as fetching data */
        .oj-tabbar-status-message {
            position: absolute;

            padding: $panelPadding;
          
            display: none;
        }

        .oj-tabbar-horizontal .oj-tabbar-status-message {
          padding: 0;
        }

        /* Styling for the activity indicator*/
        .oj-tabbar-loading-icon {
          display: block;
          width:  40px;
          height: 40px;
          margin: auto;
          @include oj-icon-content(
              $icon: oj-image-url("spinner_full.gif"),
              $lowResProportion: 0.25
          );
        }

        .oj-tabbar-horizontal .oj-tabbar-loading-icon {
          width:  24px;
          height: 24px;
          @include oj-icon-content(
              $icon: oj-image-url("spinner_full.gif"),
              $lowResProportion: 0.15
          );
        }

        /* Styling for an item that is cut during a context menu cut operation */
        .oj-tabbar-cut {
            opacity: 0.8;
        }
        .oj-tabbar-remove-icon {
          @extend .oj-fwk-icon-cross;
          align-self: center;
          @include oj-ltr() {
            padding-right: 5px;
          }
          @include oj-rtl() {
            padding-left: 5px;
          }
          padding-top: 3px;
        }

        .oj-tabbar-hide-remove-icon .oj-tabbar-remove-icon {
          display: none;
        }
    }
}