// Copyright (c) 2014, 2026, 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.navigationList.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


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

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

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

        oj-navigation-list {
          display: block;
        }

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

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

        /* navigation list divider used in category header navlist*/
        .oj-navigationlist-category-divider {

              border-color: $navigationListCategoryDividerColor;

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

             border-color: $navigationListHorizontalItemDividerColor;

            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 navlist has marker class oj-navigationlist-item-dividers
        .oj-navigationlist-item-dividers .oj-navigationlist-divider {
            display: list-item;
        }

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

        .oj-navigationlist-item-element:not(.oj-navigationlist-item) {
          display: block;
          line-height: 0; //IE bug: IE is adding lineheight on top of actual contents height when display:block.
        }

        .oj-navigationlist-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-navigationlist-element:focus {
            outline: none;
        }

        /* Style content wrapper of each list item */

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

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

             min-height: $navigationListItemMinHeight;

        //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-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item::before {

            min-height: $tabBarVerticalItemMinHeight;

        }

        .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item-label {

            font-size: $tabBarVerticalItemFontSize;

        }

        /* Styling for expand/collapse icons holder */
        .oj-navigationlist-collapse-icon,
        .oj-navigationlist-expand-icon {
            order: 1;
            align-self: center;
        }

        a.oj-navigationlist-collapse-icon,
        a.oj-navigationlist-expand-icon,
        a.oj-navigationlist-collapse-icon:hover,
        a.oj-navigationlist-expand-icon:hover{
            text-decoration: none;  //workaround for IE11 where underline appears on icon hover
        }

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

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

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

            color: $navigationListItemLabelColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

            }
        }

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

            color: $navigationListItemLabelColorSelected;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorSelected;

            }
        }

        .oj-hover:not(.oj-selected) > a.oj-navigationlist-item-content > .oj-navigationlist-item-label{
            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorHover;

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

              white-space: $navigationListItemLabelTextWrap;

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

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

        /*Padding for vertical navlist item label*/
        .oj-navigationlist-vertical .oj-navigationlist-item-label {
            padding: 3px 0;
            flex: 1 1 auto;
        }

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

        /* List item's Icon */
        .oj-navigationlist-item-icon
        {

            color: $navigationListItemIconColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

            }
            flex: 0 0 auto;
        }

        .oj-navigationlist-group-item {
            display: flex;
            flex: 1 1 auto;
        }

        .oj-navigationlist-group {
            flex: 1 1 auto;
        }

        /* Disabled node */
        .oj-navigationlist-item.oj-disabled > .oj-navigationlist-item-content,
        .oj-navigationlist-item.oj-disabled > .oj-navigationlist-collapse-icon,
        .oj-navigationlist-item.oj-disabled > .oj-navigationlist-expand-icon {

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

        }

        .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {

            color: $navigationListItemLabelColorDisabled;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDisabled;

            }
        }

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

        .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {

            color: $navigationListIconColorDisabled;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDisabled;

            }
        }

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

            color: $navigationListItemIconColorSelected;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorSelected;

            }
        }

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

            color: $navigationListItemIconColorHover;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorHover;

            }
        }

        .oj-navigationlist-vertical.oj-navigationlist-page-level .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon
        {
          .oj-contrast-marker & {

              color: $tabBarItemContrastLabelColorSelected;

          }
        }

        /*borders for high contrast mode*/

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

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

        /*Focus ring around  focused list item*/
        .oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {

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

            outline-offset: -1px;
        }

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

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

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

            background-color: $navigationListItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $navigationListItemContrastBgColorSelected;

            }
        }

        .oj-navigationlist-item.oj-selected {

            border-color: $navigationListItemBorderColorSelected;

        }

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

            background-color: $navigationListItemBgColorHover;
            border-color:  $navigationListItemBorderColorHover;

            .oj-contrast-marker & {

                background-color: $navigationListItemContrastBgColorHover;

            }
        }
        
        .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item.oj-hover:not(.oj-selected),
        .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover:not(.oj-selected) {

            border-color:  $tabBarItemBorderColorHover;

        }


        /*---- Start of common styles for collapsible and expanded navigation list ----*/

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

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

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

        }

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

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

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

        }

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

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

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

            border-style: solid;
        }

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

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


        /* Padding for sublist    */

        //padding for sub list of non icons list
        .oj-navigationlist-collapsible ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul,
        .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul
        {

            @include oj-ltr() {
                padding-left: $navigationListItemStartEndPadding;
            }

            @include oj-rtl() {
                padding-right: $navigationListItemStartEndPadding;
            }

        }
        //padding for sub list of icons list
        .oj-navigationlist-collapsible ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul,
        .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul
        {

            @include oj-ltr() {
                padding-left: calc(#{$navigationListItemStartEndPadding} + #{$navigationListIconToTextPadding} + 24px );// total of parent item padding + icon text space + icon size.here 24px is icon size
            }

            @include oj-rtl() {
                padding-right: calc(#{$navigationListItemStartEndPadding} + #{$navigationListIconToTextPadding} + 24px );// total of parent item padding + icon text space + icon size.here 24px is icon size
            }

        }

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


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

        }
        //Add padding to right side on group node as there should be some padding after expand/collapse icon.
        .oj-navigationlist-group-item {

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

        }

        /*---- End of common styles for collapsible and expanded navigation list ----*/

        /* Start of Collapsible Navigation list*/

        .oj-navigationlist-collapsible .oj-navigationlist-item-element.oj-collapsed .oj-navigationlist-group {
            max-height: 0; //Needed for hiding collapsed elements
        }

         /* expand and collapse animation */
        .oj-navigationlist-collapsible .oj-navigationlist-collapsible-transition {
            overflow: hidden;
        }

        /* Collapse or expand icon color should not change on hover*/
        .oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon ,
        .oj-navigationlist-item a.oj-navigationlist-collapse-icon,
        .oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon,
        .oj-navigationlist-item a.oj-navigationlist-expand-icon {

            color: $navigationListCollapsibleIconColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

            }
        }

        // Remove focus ring on expand/collapse icons
        .oj-navigationlist-collapse-icon:focus,
        .oj-navigationlist-expand-icon:focus {
            outline: none;
        }

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

        /* End of Collapsible Navigation list*/

        //Add border with radius for page level items
        .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item
        {

            border-color: $tabBarItemBorderColor;
            $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(#{$navigationListItemStartEndPadding} - 0px);
            } @else {
                $tmpPadding:  calc(#{$navigationListItemStartEndPadding} - #{$tmpItemBorderWidth});
            }
            // need to override both ltr and rtl because default expanded navlist 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-style: solid;
            border-radius: 0;
        }

        .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {

            // need to override both ltr and rtl as it was overriden above for border-width.

            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);
            }

        }

        .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-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 navlist*/

        //vertical icon only list styling
         @if $navigationListIconOnlyStyle == circle {
            .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
            .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover {
                background-color: transparent;
                .oj-contrast-marker & {
                    background-color: transparent;
                }
            }
            .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {

                background-color: $navigationListItemIconOnlyBgColorSelected;

                .oj-contrast-marker & {

                    background-color: $navigationListItemIconOnlyBgColorSelected;

                }
            }

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

                background-color: $navigationListItemIconOnlyBgColorHover;

                .oj-contrast-marker & {

                    background-color: $navigationListItemContrastBgColorHover;

                }
            }

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

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

                border-style: solid;
            }

            .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon
            {

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

            }


            .oj-navigationlist-page-level.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-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(#{$navigationListIconOnlyIconStartEndPadding} - 0px);
                }@else {
                    $tmpPadding:  calc(#{$navigationListIconOnlyIconStartEndPadding} - #{$tmpSelectionBorderWidth})
                }
                @include oj-rtl() {
                    padding: 0 $tmpPadding 0 $navigationListIconOnlyIconStartEndPadding;
                }
                @include oj-ltr() {
                    padding: 0 $navigationListIconOnlyIconStartEndPadding 0 $tmpPadding;
                }

            }


            .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item
            {
                border-style: solid;
                border-radius: 0;

                  border-color: $tabBarItemBorderColor;
                  // need to override both ltr and rtl because default expanded navlist will have selection border based on direction.
                  // need to override both ltr and rtl because default expanded navlist will have selection border based on direction.
                  @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-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-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($tabBarVerticalIconOnlyItemBorderWidth);
                }
                @include oj-ltr() {
                    border-top-width: oj-shorthand-property-value-top($tabBarVerticalIconOnlyItemBorderWidth);
                }

            }

            .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-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-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {

                background-color: $tabBarItemBgColorSelected;

                .oj-contrast-marker & {

                    background-color: $tabBarItemContrastBgColorSelected;

                }
            }
        }


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

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

        //Margin for Vertical icons only list
        .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {

            margin: $navigationListIconOnlyItemPadding;

        }
        //Remove margin top for first element
        .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-child {
            margin-top: 0;
        }
        /* Start of Page Level navlist styles*/
        .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
        .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {

            border-color: $tabBarItemBorderColorSelected;

        }

         .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {

             background-color: $tabBarItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $tabBarItemContrastBgColorSelected;

            }
        }

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

              color: $tabBarItemLabelColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

            }
        }

        .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon
        {

              color: $tabBarItemIconColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

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

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

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon
        {

            color: $tabBarItemIconColorSelected;

            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

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

              color: $tabBarItemLabelColorHover;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorHover;

            }
        }

        .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon
        {

            color: $navigationListItemIconColorHover;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorHover;

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

                color: $tabBarItemContrastLabelColorSelected;

            }
        }
        // bg and border colors for hover or active  are same.
        .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
        .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-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;
            }

            
        }

        /* End of Page Level navlist styles*/

        /*Start of common horizontal navigationlist styles */

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

        .oj-navigationlist-horizontal .oj-navigationlist-item {
                flex: 1 1 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-navigationlist-horizontal:not(.oj-navigationlist-item-text-wrap) .oj-navigationlist-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-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item,
            .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item
            {
              flex: 0 0 auto;
            }

            .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element,
            .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element {
                justify-content: center;
            }
            .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element,
            .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element {
                justify-content: flex-end;
            }

          }
        }


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


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


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


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

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

            min-height: $navigationListHorizontalMinHeight;

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-element {

            min-height: $tabBarHorizontalItemMinHeight;

        }

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

            color: $navigationListItemLabelColorSelected;

        }

        .oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {

            background-color: $navigationListHorizontalItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $navigationListHorizontalItemContrastBgColorSelected;

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

        //Padding around icon in horizontal list
        .oj-navigationlist-horizontal .oj-navigationlist-item-icon
        {

            margin: $navigationListHorizontalIconMargin;

        }

        /*End of common horizontal navigationlist styles */

        /*Start of  horizontal navigationlist styles icons only*/
        //Padding for horizontal icons only list
        .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {

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

        }


        .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
             @include oj-ltr() {
                  margin-left:0;
             }
             @include oj-rtl() {
                  margin-right:0;
             }
        }
        @if $navigationListHorizontalIconOnlyStyle == circle {
            .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
            .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover {
                background-color: transparent;
            }
            .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {

                background-color: $navigationListItemIconOnlyBgColorSelected;

            }

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

                background-color: $navigationListItemIconOnlyBgColorHover;

                .oj-contrast-marker & {

                    background-color: $navigationListItemContrastBgColorHover;

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

                border-width: $navigationListHorizontalItemBorderWidth;

                border-style: solid;
            }
            .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {

                background-color: $tabBarHorizontalItemBgColorSelected;

                .oj-contrast-marker & {

                    background-color: $tabBarHorizontalItemContrastBgColorSelected

                }
            }
        }

        /*End of  horizontal navigationlist styles icons only*/

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

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

            border-width: $navigationListHorizontalItemBorderWidth;

            border-style: solid;
        }

        .oj-hicontrast  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item{
            border-style: none;
        }
        .oj-hicontrast  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-focus,
        .oj-hicontrast  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover {
            border-width: 1px;
            border-style: dotted;
        }
        .oj-hicontrast  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected,
        .oj-hicontrast  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-focus,
        .oj-hicontrast  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-hover {
            border-width: 1px;
            border-style: solid;
        }

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

            padding: $navigationListHorizontalItemPadding;

          justify-content: center;
        }

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

            padding: $navigationListHorizontalStackedItemPadding;

        }

            //Add Space between icon and text
        .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {

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

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

          align-self: center;
        }

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

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

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

            min-height: $navigationListHorizontalStackedIconMinHeight;

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {

            min-height: $tabBarHorizontalItemStackedIconMinHeight;

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

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

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

        /* Start of App Level horizontal navlist styles */

        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {

            font-size: $navigationListHorizontalFontSize;

        }
        .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {

            font-size: $tabBarHorizontalItemFontSize;

        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content > .oj-navigationlist-item-label{

            color: $navigationListHorizontalItemLabelColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

            }
        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon
        {

            color: $navigationListHorizontalItemIconColorDefault;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorDefault;

            }
        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content > .oj-navigationlist-item-label {

            color: $navigationListHorizontalItemLabelColorSelected;

            .oj-contrast-marker & {

                color: $navigationListHorizontalItemContrastLabelColorSelected;

            }
        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon
        {

            color: $navigationListHorizontalItemIconColorSelected;

            .oj-contrast-marker & {

                color: $navigationListHorizontalItemContrastLabelColorSelected;

            }
        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected){
            background-color: transparent;
        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content > .oj-navigationlist-item-label{

            color: $navigationListItemIconColorHover;

        }
        .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon
        {

            color: $navigationListItemIconColorHover;

        }

        /* End of App Level horizontal navlist styles */

        /* Start of Page Level horizontal navlist styles*/
        //Add border to horizontal list item
        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
          border-radius: 0;

            border-width: $tabBarHorizontalItemBorderWidth;
            border-color: $tabBarHorizontalItemBorderColor;
            @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;
            }

        }


        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-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 list item
        .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
          border-radius: 0;

            border-width: $tabBarHorizontalIconOnlyItemBorderWidth;
            border-color: $tabBarHorizontalItemBorderColor;
            @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;
            }

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-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);
            }

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-navigationlist-item-last-child,
        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-navigationlist-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-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {

            border-color:  $tabBarHorizontalItemBorderColorSelected;

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover:not(.oj-selected),
        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) {

            border-color:  $tabBarHorizontalItemBorderColorHover;

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {

            background-color: $tabBarHorizontalItemBgColorSelected;

            .oj-contrast-marker & {

                background-color: $tabBarHorizontalItemContrastBgColorSelected;

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

            color: $tabBarItemLabelColorDefault;

            .oj-contrast-marker & {

              color: $navigationListItemContrastLabelColorDefault;

            }
        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon
        {

            color: $tabBarItemIconColorDefault;

            .oj-contrast-marker & {

              color: $navigationListItemContrastLabelColorDefault;

            }
        }

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

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

            .oj-contrast-marker & {

                color: $tabBarHorizontalItemContrastLabelColorSelected;

            }
        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon
        {

            color: $tabBarHorizontalItemIconColorSelected;

            .oj-contrast-marker & {

                color: $tabBarHorizontalItemContrastLabelColorSelected;

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

            color: $tabBarHorizontalItemLabelColorHover;

        }
        .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon
        {

            color: $tabBarItemIconColorHover;

        }

        .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
        .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active:not(.oj-selected){

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


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

            border-color: $tabBarItemBorderColorActive;

        }
        /*End of Page Level horizontal navlist styles*/

        /*Start of sliding navlist*/
            /*Hide siblings of parent node while showing the list*/
        // Hide all first level items except the one which is expanded.
        .oj-navigationlist-slider .oj-navigationlist-element:not(.oj-navigationlist-current) > .oj-navigationlist-item-element:not(.oj-expanded),
         // Hide all sub lists which are collapsed
        .oj-navigationlist-slider .oj-navigationlist-item-element:not(.oj-expanded) > .oj-navigationlist-group,
         // Hide list items which are not parents of current opened list
        .oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded:not(.oj-navigationlist-current) > .oj-navigationlist-group > .oj-navigationlist-item-element:not(.oj-expanded),
         //Hide label when list item is open/expanded
        .oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded > .oj-navigationlist-group-item
        {
            display:none;
        }

        /* Navlist header in case of sliding */
        .oj-navigationlist-toolbar {
            background-color: transparent;
            .oj-contrast-marker & {
                background-color: transparent;
            }
            display: flex;
            line-height: 3.142rem;//44px
            @include oj-ltr() {
                padding-left: 0.714rem; //10px;
            }

            @include oj-rtl() {
                padding-right: 0.714rem; //10px;
            }
        }

        /* previous link */
        .oj-navigationlist-previous-link {
            align-self: center;
            order: 0;
            display: flex;
            flex: 1 1 auto;
            overflow:hidden;
            text-overflow: ellipsis;
        }

        .oj-navigationlist-previous-button {
            align-self: center;
            margin-bottom: 0;
        }

        a.oj-navigationlist-previous-link:active{
            background-color: transparent;
        }

        /* Override link style */
        a.oj-navigationlist-previous-link {
            text-decoration: none;
            outline: none;
            font-weight: normal;
        }

        /* Label for current displayed list */
        .oj-navigationlist-current-header {

            color: $headerTextColor;
            font-size: $header3FontSize;

            flex: 1 1 auto;
            order: 1;
            text-align: center;
            text-overflow: ellipsis;
            overflow:hidden;
            white-space: nowrap;
            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorSelected;

            }
        }

        .oj-navigationlist-toolbar-separator {

            border-left: 1px solid $toolbarBorderColor;

            align-self: center;
            order: 1;
            display: inline-block;
            height: 2.642rem;//37px
            vertical-align: middle;
            @include oj-ltr() {
                margin: 0.214rem 0 0.214rem 0.714rem; // 3px 0 3px 10px
            }
            @include oj-rtl() {
                margin: 0.214rem 0.714rem 0.214rem 0; // 3px 10px 3px 0
            }
        }


        .oj-navigationlist-hierarchical-button {
            align-self: center;
            order: 2;
            flex: 0 0 auto;
        }

        /* override oj-button margin for hierarchical menu button*/
        .oj-button.oj-navigationlist-hierarchical-button {
            margin: 0 5px; //0 5 0 5
        }

        //Overriding margin for button icon
        .oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {

            // Removing the padding set by menu button.
            // different padding for both ltr/rtl and so we need to override like this
            @include oj-ltr() {
                margin-right: 0.5rem;
            }

            @include oj-rtl() {
                margin-left: 0.5rem;
            }
        }

        /* Multiple space elements will be added to dom to get tree style in hierarchical menu  popup*/
        .oj-navigationlist-hvitem-space {
            margin-left: 1.142rem;//16px
        }

        /* hicontrast overrides for sliding navlist */
        html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item, 
        html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item,
        .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item, 
        .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item {
          border: 1px dotted;
        }

        html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item,
        .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item {
          border-width: 0;
        }


        /* override menu css*/

        .oj-menu-item-icon.oj-navigationlist-level-indicator {
            align-self: baseline; //level indivator icon alignment
            padding-bottom: 10px;
            padding-left: 9px;
            margin-bottom: 2px;
            margin-top: 3px;
            width:auto;
            height:auto;
        }

        //Add padding and font size for menu. Here font is fixed irrespective of page font.
        .oj-navigationlist-hierarchical-menu.oj-menu, .oj-navigationlist-hierarchical-menu .oj-menu {
            padding: 6px 12px;
            font-size: 12px;
        }

        //Height is fixed as 12px font need not to change wrt page font
        .oj-navigationlist-hierarchical-menu .oj-menu-item a {
            line-height: 12px;
            height: 20px;
        }

        .oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus>a,
        .oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus-ancestor>a {
            background: none;
        }

        //Add border for focused menu item
        .oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus a > .oj-navigationlist-hierarchical-menu-label {

            //todo: tree is deprecated, use tree view vars instead
            background-color: $treeViewItemBgColorSelected;
            border : 1px solid $treeViewTextColor;

            padding: 1px;
            margin-top: 6px;
            margin-bottom: 6px;
        }

        //Add padding/margin on menu label
        .oj-navigationlist-hierarchical-menu .oj-menu-item a > .oj-navigationlist-hierarchical-menu-label {
            padding: 2px;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        
        .oj-navigationlist-hierarchical-menu .oj-menu-item a {

            //todo: tree is deprecated, use tree view vars instead
            color : $treeTextColor;

        }

        //Remove padding
        html:not([dir="rtl"]) .oj-navigationlist-hierarchical-menu .oj-menu-item a,
        html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item a {
            padding: 0;
        }

        //Hide down arrow icon
        .oj-navigationlist-hierarchical-button .oj-button-menu-dropdown-icon {
            display: none !important;
        }

        //Remove margin
        html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon,
        html:not([dir="rtl"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
            margin-left: 4px;
            margin-right: 2px;
        }

        .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
            position: static;
            transform: none;
        }
        /* end - override menu css*/

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

            color: $navigationListIconOnlyIconColorSelected;

            .oj-contrast-marker & {

                color: $navigationListItemContrastLabelColorSelected;

            }
        }

        .oj-navigationlist-horizontal.oj-navigationlist-app-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
            .oj-contrast-marker & {

                color: $navigationListHorizontalItemContrastLabelColorSelected;

            }
        }
        .oj-navigationlist-horizontal.oj-navigationlist-page-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
            .oj-contrast-marker & {

                color: $tabBarHorizontalItemContrastLabelColorSelected;

            }
        }

        .oj-navigationlist-vertical.oj-navigationlist-page-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
            .oj-contrast-marker & {

                color: $tabBarItemContrastLabelColorSelected;

            }
        }

        .oj-hier-icon {
            @extend .oj-fwk-icon-folderhierarchy;
        }

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

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

        .oj-menu-item-icon.oj-navigationlist-level-indicator {

            border-bottom: 1px solid $menuBorderColor;
            @include oj-ltr() {
              border-left: 1px solid $menuBorderColor;
            }
            //Flip the border for rtl mode
            @include oj-rtl() {
              border-right: 1px solid $menuBorderColor;
            }

        }

        .oj-navigationlist-no-data-message {

            padding: $panelPadding;
            background-color: $collectionCellBgColor;
            min-height: $fontSize;

        }

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

            display: none;
        }

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

        /* Styling for the activity indicator*/
        .oj-navigationlist-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-navigationlist-horizontal .oj-navigationlist-loading-icon {
          width:  24px;
          height: 24px;
          @include oj-icon-content(
              $icon: oj-image-url("spinner_full.gif"),
              $lowResProportion: 0.15
          );
        }
    }
}