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

@import "../utilities/oj.utilities.urls";
@import "../utilities/oj.utilities.math";
@import "../utilities/oj.utilities.units";
@import "../common/oj.common.palette";
// This is the variable file for the Oracle Alta look and feel.

$includeAllClasses: true !default;


$themeName:           alta !default;
$themeTargetPlatform: web !default;

// PATHS
//----------------------------------
// these paths should be relative to the generated css file

// path to images
$imageDir: "images/" !default;


// COMPATIBILITY
//----------------------------------
$allowTagSelectors: true !default;

// icon colors
//----------------------------------
$iconColorHover:    $brandColorDark1 !default;

//----------------------------------------------------------------
// GENERAL STYLING
//       these variables are used broadly in the widget files
//----------------------------------------------------------------

// font
//----------------------------------

// font size

// $rootFontSize is only used on the html element
// in order to support using rem units.
//
// If you have $allowTagSelectors set to false you can
// use the class oj-html to get the JET html tag styling.
// If you are not generating classes for the html element in JET
// you can still use rem's if you can set the font size on
// the html element with your own class or inline style.
//
// The browser usually uses 16px and the Alta default is 14px.
// Therefore set $rootFontValue to .875em to get 14px;
$rootFontSize:    .875em !default;    // 14px

$fontSize:         1rem !default;
$smallestFontSize: oj-px-to-rem(11px, $baseFontSize: 14px)  !default;
$smallFontSize:    oj-px-to-rem(12px, $baseFontSize: 14px)  !default;
$mediumFontSize:   oj-px-to-rem(16px, $baseFontSize: 14px)  !default;
$largeFontSize:    oj-px-to-rem(18px, $baseFontSize: 14px)  !default;
$largestFontSize:  oj-px-to-rem(20px, $baseFontSize: 14px)  !default;

$fontWeightNormalization: $allowTagSelectors !default;

// text colors
//----------------------------------
$textColorDisabled:                   $textColor7 !default;
$tertiaryTextColor:                   $textColor6 !default;
$formControlLabelColor:               $textColor5 !default;
$secondaryTextColor:                  $textColor4 !default;
$textColor:                           $textColor3 !default;
$headerTextColor:                     $textColor2 !default;
$primaryTextColor:                    $textColor1 !default;
$contrastTextColor:                   $neutralColor1 !default;
$linkTextColor:                       $brandColorDark1 !default;
$linkTextColorVisited:                $linkTextColor !default;
$linkTextColorDisabled:               $textColorDisabled !default;
$linkTextColorActive:                 $brandColorDark2 !default;

// interaction cue colors
//----------------------------------
$colorRequired:         $brandColorDark1 !default;

// icon colors
//----------------------------------
$iconColorDisabled:         $neutralColor9 !default;
$iconColorDefault:          $textColor3 !default;
$iconColorActive:           $brandColor !default;
$iconColorSelected:         $iconColorActive !default;

// border radius
//----------------------------------
$smallBorderRadius:  1px !default;

// shadow
//----------------------------------
$boxShadowHsl:      0,0%,0% !default;
$smallBoxShadow:    1px 1px 3px 0 unquote('hsla(#{$boxShadowHsl},0.35)') !default;
$mediumBoxShadow:   1px 1px 5px 0 unquote('hsla(#{$boxShadowHsl},0.4)') !default;
$largeBoxShadow:    1px 1px 10px 0 unquote('hsla(#{$boxShadowHsl},0.45)') !default;

// disabled
//----------------------------------
$opacityDisabled: 1 !default;


//Divider
$dividerMargin: 0.5rem;
//----------------------------------------------------------------
// CATEGORY AND WIDGET VARIABLES
//----------------------------------------------------------------

// WINDOW
//----------------------------------------------------------------
$windowBorderColor:   $neutralColor9 !default;
$windowBorderWidth:   1px !default;
$windowBgColor:       $neutralColor2 !default;


// HEADERS
//----------------------------------------------------------------
$header1FontSize: oj-px-to-rem(34px, $baseFontSize: 14px) !default;
$header2FontSize: oj-px-to-rem(24px, $baseFontSize: 14px) !default;
$header3FontSize: $largestFontSize !default;
$header4FontSize: $largeFontSize   !default;
$header5FontSize: $mediumFontSize  !default;
$header6FontSize: $mediumFontSize  !default;

// $header[1|2|3|4|5]FontWeight vars can be used
// to override the default font weight, they are
// applied to h[1|2|3|4|5] tags
$header1FontWeight: 200   !default;
$header2FontWeight: 300   !default;
$header3FontWeight: 300   !default;
$header4FontWeight: 400   !default;
$header5FontWeight: 400   !default;
$header6FontWeight: 400   !default;


// PANEL
//----------------------------------------------------------------

$panelPadding: oj-px-to-rem(12px, $baseFontSize: 14px) !default;


// using these adjustments panels can choose to
// consistently determine their border colors by changing
// the saturation/lightness of their background colors
$panelBorderColorSaturationAdjustment: 5% !default;
$panelBorderColorLightnessAdjustment: -5% !default;


$panel1BgColor:     $neutralColor5 !default;
$panel1BorderColor: $neutralColor8 !default;

$panel2BgColor:     #e8f2fb !default;
$panel2BorderColor: adjust-color($panel2BgColor, $lightness: $panelBorderColorLightnessAdjustment, $saturation: $panelBorderColorSaturationAdjustment) !default;

$panel5BgColor:     #fce8fe !default;
$panel5BorderColor: adjust-color($panel5BgColor, $lightness: $panelBorderColorLightnessAdjustment, $saturation: $panelBorderColorSaturationAdjustment) !default;


// FORM CONTROLS
//----------------------------------------------------------------

//default
$formControlBgColor:             $neutralColor2 !default;


//disabled
$formControlBgColorDisabled:     $neutralColor6 !default;
$formControlValueColorDisabled:  $textColorDisabled !default;
$formControlBorderColorDisabled: $formControlBgColorDisabled !default;
// ios requires an opacity to honor the background color,
// otherwise it lightens the background color you set when the input is disabled
$formControlOpacityDisabled: 1 !default;

// placeholder
$formControlPlaceholderFontStyle: italic !default;

// form control option defaults
//----------------------------------
$formControlLabelEdgeDefault: provided !default;
$inputFormControlReadonlyDefault: input !default;
$formControlUseUserAssistanceOptionDefault: ignore !default;

// messaging option defaults
//----------------------------------
$formControlMessageSummaryOptionDefault: "header" !default;

$formLayoutLabelInlineAlign: end !default;
$formLayoutLabelEdgeDefault: top !default;
$formLayoutDirectionDefault: column !default;

// Default value for colspan-wrap attribute
$formLayoutColspanWrapDefault: nowrap !default;

// RADIOSET AND CHECKBOXSET
$radioCheckboxRowHeight: 1.9rem !default;
$radioCheckboxItemBgColorActive: transparent !default;
$radioCheckboxInputToEdgePadding: 0 !default;
$radioCheckboxInputToLabelPadding: .6rem !default;
$ojprivateRadioCheckboxMessagePadding: .3rem .6rem .3rem .6rem !default;
$radioCheckboxLabelToEdgePadding: 0 !default;

// INPUT DATE/TIME
//-----------------------------------------------------------------------------
//options
// For option 'renderMode' in ojInputDate / ojInputDateTime / ojInputDate
$inputDateTimeRenderModeOptionDefault:    jet !default;
$inputDateTimeKeyboardEditOptionDefault:  enabled !default;
$inputDateTimeConverterYearOptionDefault: 2-digit !default;
$inputDateTimeShowPickerOnDesktopOptionDefault: enabled !default;
$dateTimePickerSwitcherBgColor:           $neutralColor5 !default;

// DIALOG
//----------------------------------------------------------------

// Resize and cancel behavior defaults
$dialogResizeBehaviorOptionDefault: resizable !default;
$dialogCancelBehaviorOptionDefault: icon !default;
$dialogDragAffordanceOptionDefault: title-bar !default;

$dialogBoxShadow:           $largeBoxShadow !default;
$dialogBorderRadius:        1px !default;
$dialogHeaderTextAlign:     startSingleRow !default;
$dialogHeaderBorderColor:   $windowBorderColor !default;
// Vertically center the close icon.
$dialogCloseIconPosition:   center !default;

// MESSAGES / MESSAGE
//----------------------------------

$messagesGeneralOverlayWidth:               calc(100% - 20px) !default;
$messagesGeneralOverlayBorderWidth:         $windowBorderWidth !default;
$messagesGeneralOverlayBorderColor:         $neutralColor9 !default;
$messagesGeneralOverlayBorderRadius:        $smallBorderRadius !default;
$messagesGeneralOverlayBoxShadow:           $smallBoxShadow !default;

$messageGeneralOverlaySeparatorMargin:      0 !default;
$messageGeneralOverlayBorderWidth:          0 0 $windowBorderWidth 0 !default;
$messageGeneralOverlayBorderColor:          $neutralColor9 !default;
$messageGeneralOverlayBorderRadius:         null !default;
$messageGeneralOverlayBoxShadow:            null !default;

$messagesNotificationOverlayMinWidth:       320px !default;
$messagesNotificationOverlayMaxWidth:       400px !default;

$messageNotificationOverlaySeparatorMargin: 10px !default;
$messageNotificationOverlayBorderWidth:     $windowBorderWidth !default;
$messageNotificationOverlayBorderColor:     $neutralColor9 !default;

$messageHeaderHeight:                       36px !default;
$messageAutoTimeoutCloseIconDisplay:        block !default;
$messageCategoryTextColor:                  $formControlLabelColor !default;
$messageCategoryFontSize:                   oj-px-to-rem(12px, $baseFontSize: 14px)  !default;
$messageTimeTextColor:                      $textColor !default;
$messageTimeFontSize:                       oj-px-to-rem(12px, $baseFontSize: 14px)  !default;
$messageSummaryLineHeight:                  1.3 !default;
$messageDetailTextColor:                    $textColor !default;
$messageDetailLineHeight:                   1.1 !default;

// SLIDER
//----------------------------------------------------------------

$sliderBarThickness:            4px !default;
$sliderThumbBorderColor:        $neutralColor11 !default;
$sliderThumbBgColorHover:       $neutralColor6 !default;

$sliderThumbBorderColor:              $neutralColor11 !default;
$sliderThumbBgColorDisabled:          $neutralColor8 !default;
$sliderThumbBorderColorDisabled:      $sliderThumbBgColorDisabled !default;
$sliderBarBgColorDisabled:            $sliderThumbBgColorDisabled !default;
$sliderBarValueBgColorDisabled:       $sliderThumbBgColorDisabled !default;


// MENU
//----------------------------------------------------------------

// horizontal spacing
//----------------------------------

// Controls whether a "glass pane" is displayed behind dropDown menus.
// Valid values are "modal" and "modeless".
$menuDropDownModality: "modeless" !default;

// Need rems, not ems, since we set icon font size (and if we didn't, app often would).

// these vars apply to menu items in a menu where at least one item has a start icon (as opposed to submenu icon) :
$menuIconSize:                         16px !default; // per theming discussion, force it to size required by Alta spec, but don't grow/shrink via rems in case of artifacts, and DO scale the surrounding space via rems.
$menuIconToEdgePadding:                oj-px-to-rem(8px, $baseFontSize: 14px) !default;
$menuTextToIconPadding:                $menuIconToEdgePadding !default;

// applies to menu items in a text-only menu, i.e. a menu where no item has a start icon (but might have a submenu icon) :
$menuTextToEdgePadding:   calc(#{$menuIconToEdgePadding} + #{$menuIconSize} + #{$menuTextToIconPadding}) !default; // Alta spec leaves a space for icons even if no item in the menu has an icon
$menuItemTopBorderWidth:               0px !default;
$menuSheetItemTopBorderWidth:          0px !default;
$menuItemBottomBorderWidth:            0px !default;

// menu parts
//----------------------------------

// top-level menus (.oj-menu.oj-component)
$menuBoxShadow:           $smallBoxShadow !default;

// submenus (.oj-menu.oj-menu-submenu)
$menuSubmenuBoxShadow:    $menuBoxShadow !default;

// disabled menu icons, not submenu icons
$menuIconColorDisabled:   $iconColorDisabled !default;

// menu group dividers (.oj-menu-divider, different than the border that iOS puts between every menu item)
$menuDividerMargin:       1px !default; // This spacing is on all 4 sides, including left/right, per Alta spec. rem not em since font-size 0.


// sheet menus
//----------------------------------

// On desktop, the browser's "status bar tooltip" can appear over the menu, so bump it a little
// off the bottom, like iOS:
$menuSheetMarginBottom:   14px !default; // value must be 0, px, or %, e.g. 0, 10px, 5%


// BUTTONS
//----------------------------------------------------------------
$buttonFontSize:       $fontSize !default;
$buttonSmallFontSize:  $buttonFontSize !default;
$buttonLargeFontSize:  $buttonFontSize !default;
$buttonXlargeFontSize: $buttonFontSize !default;

$buttonHeight:       oj-px-to-rem(32px, $baseFontSize: 14px) !default;
$buttonSmallHeight:  2rem !default;

// button padding
//----------------------------------
// Horiz space between text and edge of button when no intervening icon.
$buttonTextToEdgePadding:       oj-px-to-rem(13px, $baseFontSize: 14px) !default;
$buttonSmallTextToEdgePadding:  oj-px-to-rem(11px, $baseFontSize: 14px) !default;

// Horiz space between text and icon.
$buttonIconToTextPadding:       oj-px-to-rem(6px, $baseFontSize: 14px) !default;
$buttonSmallIconToTextPadding:  $buttonIconToTextPadding !default;

// Horiz space between icon and edge of button when text also showing.
$buttonIconToEdgePadding:       oj-px-to-rem(12px, $baseFontSize: 14px) !default;
$buttonSmallIconToEdgePadding:  oj-px-to-rem(11px, $baseFontSize: 14px) !default;

// Horiz space between icon and edge of button when icon only.
$buttonIconOnlyPadding:       oj-px-to-rem(8px, $baseFontSize: 14px) !default;
$buttonSmallIconOnlyPadding:  oj-px-to-rem(6px, $baseFontSize: 14px) !default;


// button states
//----------------------------------

// default
$buttonBgColor:                   $neutralColor6 !default;
$buttonBorderColor:               $neutralColor9 !default;
$buttonInternalBorderColor:       $neutralColor9 !default;
$buttonBgImage:                   none !default;
$buttonTextColor:                 $textColor1 !default;
$buttonIconColor:                 $iconColorDefault !default;

// hover
$buttonBgColorHover:              $neutralColor4 !default;
$buttonTextColorHover:            $brandColorDark1 !default;
$buttonIconColorHover:            $iconColorHover !default;
$buttonBorderColorHover:          $buttonBorderColor !default;

// active
$buttonBgColorActive:             $brandColor !default;
$buttonInternalBorderColorActive: $buttonBorderColor !default;
$buttonTextColorActive:           $neutralColor1 !default;
$buttonIconColorActive:           $buttonTextColorActive !default;
$buttonBorderColorActive:         $brandColor !default;

// selected - default to use active values
$buttonTextColorSelected:         $buttonTextColorActive !default;
$buttonInternalBorderColorSelected: $buttonInternalBorderColorActive !default;

// selected and hovered
$buttonTextColorSelectedHover:    $buttonIconColorHover !default;

// disabled
$buttonBgColorDisabled:           $neutralColor4 !default;
$buttonTextColorDisabled:         $textColorDisabled !default;
$buttonBorderColorDisabled:       $neutralColor7 !default;
$buttonOpacityDisabled:           $opacityDisabled !default;

// disabled and selected
$buttonTextColorSelectedDisabled:            $buttonTextColorSelected !default;
$buttonIconColorSelectedDisabled:            $buttonTextColorSelectedDisabled !default;
$buttonBgColorSelectedDisabled:              $neutralColor9 !default;
$buttonInternalBorderColorSelectedDisabled:  $buttonBorderColorDisabled !default;


// button chroming
//----------------------------------

// chroming option defaulting
$buttonHalfChromeIconColor:           $iconColorDefault !default;

// half chrome

// half chrome default

// half chrome hover
$buttonHalfChromeIconColorHover:          $buttonIconColorHover !default;
$buttonHalfChromeBorderColorHover:        $buttonBorderColorHover !default;

// half chrome active

// half chrome selected

// half chrome selected and hovered

// half chrome disabled
$buttonHalfChromeTextColorDisabled:       $buttonTextColorDisabled !default;
$buttonHalfChromeIconColorDisabled:       $iconColorDisabled !default;
$buttonHalfChromeOpacityDisabled:         $buttonOpacityDisabled !default;

// half chrome disabled and selected
$buttonHalfChromeTextColorSelectedDisabled:    $buttonTextColorSelectedDisabled !default;
$buttonHalfChromeIconColorSelectedDisabled:    $buttonHalfChromeTextColorSelectedDisabled !default;

// outlined
$buttonOutlinedChromeInternalBorderColor:          $neutralColor9 !default;

// outlined default
$buttonOutlinedChromeBorderColor:                  $buttonHalfChromeBorderColorHover !default;

// outlined hover
$buttonOutlinedChromeBorderColorHover:             $buttonOutlinedChromeBorderColor !default;

// outlined active
$buttonOutlinedChromeInternalBorderColorActive:    $buttonInternalBorderColorActive !default;

// outlined selected
$buttonOutlinedChromeInternalBorderColorSelected:  $buttonInternalBorderColorSelected !default;

// outlined selected and hovered

// outlined disabled
$buttonOutlinedChromeTextColorDisabled:       $buttonHalfChromeTextColorDisabled !default;
$buttonOutlinedChromeIconColorDisabled:       $buttonHalfChromeIconColorDisabled !default;
$buttonOutlinedChromeBorderColorDisabled:     $neutralColor9!default;

// outlined disabled and selected
$buttonOutlinedChromeInternalBorderColorSelectedDisabled:  $buttonOutlinedChromeBorderColorDisabled !default;


// alternate button colors
//----------------------------------
$buttonConfirmColor:      $accentColorConfirmation5 !default;


// LISTVIEW
//----------------------------------------------------------------
$listViewHeaderBorderWidth:          1px !default;
$listViewHeaderBorderWidthCollapsed: 1px 1px 0 !default;


// TREEVIEW
//----------------------------------------------------------------
$treeViewItemBgColorSelected:         $brandColorLight4 !default;
$treeViewItemBgColorSelectedInactive: $brandColorLight4 !default;


// DATAGRID
//----------------------------------------------------------------
$collectionCellPadding:                 0.5em !default;


// BUTTONSET
//----------------------------------------------------------------


// TOOLBAR
//----------------------------------------------------------------


//NAVIGATIONLIST
//-----------------------------------
//Default
$navigationListItemLabelColorDefault:                         $linkTextColor !default;
$navigationListCollapsibleIconColorDefault:                   $iconColorDefault !default;
$navigationListItemIconColorDefault:                          $iconColorDefault !default;
//Hover
$navigationListItemBorderColorHover:                          $iconColorHover !default;
$navigationListItemBgColorHover:                              $neutralColor6 !default;
$navigationListItemIconColorHover:                            $iconColorHover !default;
$navigationListItemIconOnlyBgColorHover:                      $neutralColor6 !default;
//Selected
$navigationListItemIconOnlyBgColorSelected:                   $brandColor !default;
$navigationListIconOnlyIconColorSelected:                     $neutralColor1 !default;
$navigationListItemLabelColorSelected:                        $brandColorDark1 !default;
$navigationListItemBgColorSelected:                           $neutralColor5 !default; // only applies to vertical navlist
$navigationListItemBorderColorSelected:                       $brandColor !default;
$navigationListItemIconColorSelected:                         $iconColorSelected !default;
//Focus
$navigationListItemOutlineColorFocus:                         $neutralColor14 !default;
//Disabled
$navigationListItemLabelColorDisabled:                        $linkTextColorDisabled !default;
$navigationListIconColorDisabled:                             $iconColorDisabled !default;
// category divider - used between categories
$navigationListCategoryDividerColor:                          $neutralColor8 !default;
//ContrastDefault
$navigationListItemContrastLabelColorDefault:              $neutralColor11 !default;
//ContrastHover
$navigationListItemContrastLabelColorHover:                $neutralColor3 !default;
$navigationListItemContrastBgColorHover:                   $neutralColor16 !default;
//ContrastSelected
$navigationListItemContrastLabelColorSelected:             $neutralColor3 !default;
$navigationListItemContrastBgColorSelected:                $neutralColor16 !default;
//ContrastDisabled
$navigationListItemContrastLabelColorDisabled:             $neutralColor13 !default;
//Sizing
$navigationListItemStartEndPadding:                           oj-px-to-rem(15px, $baseFontSize: 14px) !default;
$navigationListIconToTextPadding:                             oj-px-to-rem(10px, $baseFontSize: 14px) !default;
$navigationListItemMinHeight:                                 oj-px-to-rem(44px, $baseFontSize: 14px) !default;   //applies to vertical only
$navigationListIconOnlyStyle:                                 circle !default;
$navigationListIconOnlyItemPadding:                           4px 0 0 !default;

$navigationListHierarchyMenuThresholdOptionDefault:           3 !default;

//---Start of Horizontal Navigation List---
//Default
$navigationListHorizontalItemLabelColorDefault:               $textColor4 !default;
$navigationListHorizontalItemIconColorDefault:                $neutralColor15 !default;
$navigationListHorizontalItemDividerColor:                    $neutralColor7 !default;
$navigationListHorizontalItemLabelColorSelected:              $brandColorDark1 !default;
$navigationListHorizontalItemIconColorSelected:               $iconColorSelected !default;
$navigationListHorizontalItemContrastLabelColorSelected:      $neutralColor3 !default;
//Sizing
$navigationListHorizontalFontSize:                            1rem !default;
$navigationListHorizontalMinHeight:                           oj-px-to-rem(38px, $baseFontSize: 14px) !default;
$navigationListHorizontalStackedIconMinHeight:                oj-px-to-rem(60px, $baseFontSize: 14px) !default;
$navigationListHorizontalItemPadding:                         0.5rem $navigationListItemStartEndPadding 4px !default;
$navigationListHorizontalIconMargin:                          0 !default;
$navigationListHorizontalIconToTextPadding:                   $navigationListIconToTextPadding !default;
$navigationListHorizontalIconOnlyStyle:                       circle !default;
//---End of Horizontal Navigation List---

//NAVIGATIONTABS
//-----------------------------------
//Default
$tabBarItemLabelColorDefault:                         $linkTextColor !default;
$tabBarItemIconColorDefault:                          $iconColorDefault !default;
//Hover
$tabBarItemBorderColorHover:                          $iconColorHover !default;
$tabBarItemBgColorHover:                              $neutralColor6 !default;
$tabBarItemIconColorHover:                            $iconColorHover !default;
//Selected
$tabBarItemLabelColorSelected:                        $tabBarItemLabelColorDefault !default;
$tabBarItemIconColorSelected:                         $brandColor !default;
$tabBarItemBorderColorSelected:                       $brandColor !default;
$tabBarIconOnlyIconColorSelected:                     $neutralColor1 !default;
//Focus
$tabBarItemOutlineColorFocus:                         $neutralColor14 !default;
//Disabled
$tabBarItemLabelColorDisabled:                        $textColorDisabled !default;
$tabBarIconColorDisabled:                             $textColorDisabled !default;
// category divider - used between categories
$tabBarCategoryDividerColor:                          $neutralColor8 !default;
// divider - used between text items when horizontal
$tabBarHorizontalItemDividerColor:                    $neutralColor7 !default;
//selected
$tabBarHorizontalItemIconColorSelected:               $tabBarItemIconColorSelected !default;
$tabBarHorizontalItemBorderColorSelected:             $brandColor !default;
// Hover
$tabBarHorizontalItemBorderColorHover:                $tabBarItemBorderColorHover !default;

//Sizing
$tabBarItemStartEndPadding:                           oj-px-to-rem(15px, $baseFontSize: 14px) !default;
$tabBarIconToTextPadding:                             oj-px-to-rem(10px, $baseFontSize: 14px) !default;
$tabBarVerticalItemMinHeight:                         oj-px-to-rem(44px, $baseFontSize: 14px) !default;   //applies to vertical only
$tabBarIconOnlyStyle:                                 circle !default;
$tabBarVerticalIconOnlyItemPadding:                   4px 0 0 !default;

//---Start of Horizontal Navigation tabs---
//Selected
$tabBarHorizontalItemBgColorSelected:                 transparent !default;
$tabBarHorizontalItemContrastLabelColorSelected:      $brandColorLight1 !default;
$tabBarItemContrastLabelColorDefault:                 $neutralColor10 !default;
$tabBarItemContrastLabelColorHover:                   $brandColorLight1 !default;
$tabBarItemContrastBgColorHover:                      $neutralColor16 !default;
$tabBarItemContrastLabelColorSelected:                $brandColorLight1 !default;
$tabBarItemContrastLabelColorDisabled:                $neutralColor13 !default;
//Sizing
$tabBarHorizontalItemMinHeight:                       oj-px-to-rem(38px, $baseFontSize: 14px) !default;
$tabBarHorizontalItemPadding:                         0.5rem $tabBarItemStartEndPadding 4px !default;
$tabBarHorizontalIconMargin:                          0 !default;
$tabBarHorizontalIconToTextPadding:                   $tabBarIconToTextPadding !default;
$tabBarHorizontalIconOnlyStyle:                       circle !default;
//---End of Horizontal Navigation tabs---

// PROGRESS
//-----------------------------------------------------------------------------
$progressBarBgOpacity:                   0.3 !default;
$progressBarIndeterminateOverlayOpacity: 0 !default;
$progressBarIndeterminateOverlayImage:   "images/animated-overlay.gif" !default;
$progressCircleIndeterminateOverlayImage: null !default;
$progressCircleIndeterminateOverlaySize:  null !default;

// TRAIN
//-----------------------------------------------------------------------------

// unvisited state
$trainBgColor:                            $neutralColor1 !default;
$trainBorderColor:                        $iconColorDefault !default;
$trainLabelColor:                         $textColor !default;
$trainButtonTextColor:                    $textColor !default;

// visited state
$trainBgColorVisited:                     $trainBgColor !default;
$trainBorderColorVisited:                 $trainBorderColor !default;
$trainLabelColorVisited:                  $trainLabelColor !default;
$trainButtonTextColorVisited:             $brandColor !default;
$trainVisitedIconDisplay:                 inherit !default;
$trainButtonTextVisitedDisplay:           none !default;


// selected state
$trainBgColorSelected:                    $brandColor !default;
$trainBorderColorSelected:                $trainBgColorSelected !default;
$trainButtonTextColorSelected:            $contrastTextColor !default;
$trainLabelFontWeightSelected:            500 !default;

// disabled state
$trainBgColorDisabled:                    $trainBgColor !default;
$trainBorderColorDisabled:                $neutralColor8 !default;
$trainLabelColorDisabled:                 $textColorDisabled !default;
$trainOpacityDisabled:                    $opacityDisabled !default;
$trainButtonTextColorDisabled:            $trainLabelColorDisabled !default;

// hover state
$trainBgColorHover:                       $iconColorHover !default;
$trainBorderColorHover:                   $trainBgColorHover !default;
$trainButtonTextColorHover:               $contrastTextColor !default;
$trainButtonTextColorHover:              $contrastTextColor !default;

// active state
$trainBgColorActive:                      $trainBgColorSelected !default;
$trainBorderColorActive:                  $trainBgColorActive !default;
$trainLabelTextDecorationActive:          none !default;
$trainLabelFontWeightActive:              500 !default;
$trainButtonTextColorActive:              $trainButtonTextColorSelected !default;

// button label
$trainButtonFontSize:                     13px !default;

// the default width of a step
$trainStepWidth:                          98px !default;

$trainLabelPaddingTop:                    14px !default;

// the diameter of the "button" representing a stop
$trainButtonDiameter:                     28px !default;
$trainButtonBorderWidth:                  2px !default;
$trainButtonMessagingIconColor:           $neutralColor1 !default;

// connector variables
// step connector type. Valid values are 'individual' or 'continuous. A 'continuous'
// connector is a single shape behind all of the step buttons while the 'individual'
// connector renders seperate shapes between each step.
$trainConnectorBgColor:                   $neutralColor7 !default;
$trainConnectorHeight:                    2px !default;
$trainIndividualConnectorBgColorSelected: $neutralColor10 !default;

$trainIndividualConnectorPaddingSelected: 0 !default;

// PAGING CONTROL
//-----------------------------------------------------------------------------
// padding between various elements of the paging control
$pagingDotSize:           10px !default;
$pagingDotPadding:        10px !default;

// APPLICATION LAYOUT - MOBILE PATTERN VARIABLES
//-------------------------------------------------------------
// Padding
$appLayoutHybridPadding:  oj-px-to-rem(10px, $baseFontSize: 16px) !default;
//Header
$appLayoutHybridHeaderTitleFontSize:  oj-px-to-rem(18px, $baseFontSize: 16px) !default;
$appLayoutHybridHeaderBorderColor: $neutralColor7 !default;
// Footer
$appLayoutHybridFooterBorderColor: $appLayoutHybridHeaderBorderColor !default;

// INDEXER
//----------------------------------------------------------------
$indexerTextColor:              $linkTextColor !default;
$indexerTextColorDisabled:      $textColorDisabled !default;
$indexerFontWeight:             normal !default;
$indexerTextDecorationHover:    underline !default;

// DVT
//-----------------------------------------------------------------------------
$dvtIconBgColorActive:          $neutralColor1 !default;
$dvtIconBorderColorActive:      $neutralColor7 !default;
$dvtIconColorActive:            $brandColor !default;

$overlayOpacity: 0.4 !default;

//-----------------------------------------------------------------------------

@import "../common/oj.common.variables";