// 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.units";
@import "../common/oj.common.palette";

//=================================================================
//=================================================================
// file picker
$filePickerBgColorActive: $brandColorLight4 !default;
$filePickerTextFontWeight:        normal !default;
$filePickerPadding:               24px !default;

// nav list

//=================================================================
//=================================================================
// WARNING:
// windows theme UNDER DEVELOPMENT!
// currently defining windows overrides for alta web values so need to import alta web var files

// This is the variable file for the Oracle Alta windows look and feel.

// path to platform specific images directory, note that any images present in the alta images
// directory must be present in the platform specific images directory as well
$imageDir: "images/" !default;

$themeName:           alta !default;
$themeTargetPlatform: windows !default; // targets the windows 10 look and feel

//----------------------------------------------------------------
// PALETTE VARIABLES:
//       these can be thought of as the color palette for the
//       application. Thes variables are not used directly
//       in the widget files, rather they are referred to by
//       other variables.
//----------------------------------------------------------------

//----------------------------------------------------------------
// GENERAL STYLING
//       these variables are used broadly in the widget files
//----------------------------------------------------------------
// font
//----------------------------------
// https://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx
$rootFontSize:    .9375em !default;  // 15px

$fontSize:         1rem   !default;
$smallestFontSize: oj-px-to-rem(12px, $baseFontSize: 15px) !default;
$smallFontSize:    0.93333rem !default;
$mediumFontSize:   1.33333rem !default;
$largeFontSize:    1.6rem !default;
$largestFontSize:  oj-px-to-rem(34px, $baseFontSize: 15px) !default;

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

//icon colors
//------------------------------------
$iconColor:                 $textColor !default;
$iconColorDefault:          $textColor1 !default;
$iconColorHover:            $brandColorLight1 !default;
$iconColorDisabled:         $neutralColor9 !default;
$iconColorActive:           $brandColor !default;
$iconColorSelected:         $iconColorActive !default;
$colorRequired:             $accentColorDanger4 !default;

// border radius
//----------------------------------
$smallBorderRadius:    0 !default;
$mediumBorderRadius:   1px !default;
$largeBorderRadius:    2px !default;


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


// disabled
//----------------------------------
// opacity is often used to indicate something is disabled
$opacityDisabled: .5 !default;

// animation
//----------------------------------
$animationNavChildDefault:           zoomIn     !default;
$animationNavParentDefault:          zoomOut    !default;
$animationNavSiblingEarlierDefault:  pushEnd    !default;
$animationNavSiblingLaterDefault:    pushStart  !default;


//----------------------------------------------------------------
// CATEGORY AND WIDGET VARIABLES
//----------------------------------------------------------------



// LINK
//----------------------------------------------------------------
// link text color defined in "text colors" section, look for "$linkTextColor"
$linkTextDecoration:      underline !default;
$linkTextDecorationHover: underline !default;
$linkBgColorActive:       $neutralColor6 !default;


// HEADERS
//----------------------------------------------------------------
$header2FontSize: $largeFontSize !default;


// WINDOW
//----------------------------------------------------------------
$windowBorderColor: $neutralColor10 !default;
$windowBorderWidth: 2px !default;

// POPUP
//----------------------------------------------------------------
// mobile override to the default ojPopup modality option
$popupModalityOptionDefault: modal !default;

// NOTEWINDOW
//----------------------------------------------------------------
$popupTailBoxShadow: $smallBoxShadow !default;

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

$messagesGeneralOverlayMinWidth:            820px !default;
$messagesGeneralOverlayMaxWidth:            1641px !default;

$messageGeneralOverlayHeaderBgColor:        $neutralColor5 !default;
$messageGeneralOverlayBodyBgColor:          $neutralColor5 !default;

$messagesNotificationOverlayMinWidth:       410px !default;
$messagesNotificationOverlayMaxWidth:       876px !default;

$messageNotificationOverlaySeparatorMargin: 12px !default;
$messageNotificationOverlayHeaderBgColor:   $neutralColor5 !default;
$messageNotificationOverlayBodyBgColor:     $neutralColor5 !default;

$messageTimeFontSize:                       oj-px-to-rem(12px, $baseFontSize: 15px) !default;
$messageSummaryFontWeight:                  600 !default;

// CHARTS
//----------------------------------------------------------------
// chart subtitle text color
$dvtChartSubtitleTextColor: $secondaryTextColor !default;


// MENUS
//----------------------------------------------------------------

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

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

// 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:              oj-px-to-rem(18px, $baseFontSize: 15px) !default;

// these vars apply to menu items in a menu where at least one item has a start icon (as opposed to submenu icon) :
$menuIconSize:                       24px !default; // per theming discussion, force it to size required by Windows spec, but don't grow/shrink via rems in case of artifacts, and DO scale the surrounding space via rems.
// Like Android but unlike iOS, the Windows spec clearly shows the 4px of spacing ((32-24)/2) NOT being a part of the margin, which is 12px in Windows.
$menuIconToEdgePadding:              oj-px-to-rem(16px, $baseFontSize: 15px) !default;

// padding on both left and right of submenu icon:
// Spec only provides the "after" spacing of 16px, which we use for the "before" spacing value as well.
$menuSubmenuIconPadding:             oj-px-to-rem(18px, $baseFontSize: 15px) !default;


// menu parts
//----------------------------------
// menus (.oj-menu), whether top-level or submenu
$menuBorderWidth:                    2px !default;
$menuBorderColor:                    $windowBorderColor !default;

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

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

// menu items (.oj-menu-item) and their anchors
$menuItemTextColor:                  $headerTextColor !default;
$menuItemLineHeight:                 44/15+unquote('rem') !default; // 44px @15px font.
$menuItemTopBorderWidth:             0px !default;
$menuSheetItemTopBorderWidth:        $menuItemTopBorderWidth !default;
$menuItemBottomBorderWidth:          0 !default;
$menuIconColorDisabled:              $brandColor !default;
// disabled menu items and their anchors
$menuItemTextColorDisabled:          $textColorDisabled !default;

// focused menu items (.oj-focus) and their ancestor menu items (.oj-focus-ancestor)
$menuItemBgColorFocus:               $neutralColor8  !default;

// menu icons (.oj-menu-item-icon), not submenu icons
$menuIconColor:                      $brandColor !default;

// disabled menu icons, not submenu icons
$menuIconOpacityDisabled:            0.2 !default;

// submenu icons
$menuSubmenuIconColor:               $iconColorDefault !default;

// menu group dividers (.oj-menu-divider, different than the border that iOS puts between every menu item)
$menuDividerBorderColor:             $neutralColor9 !default;


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

// sheet menus (.oj-menu-sheet)
$menuSheetMarginHorizontal:          oj-px-to-rem(20px, $baseFontSize: 15px) !default;

// sheet menu items (.oj-menu-item) and their anchors
$menuSheetItemTextColor:             $textColor !default;
$menuSheetItemLineHeight:            48/15+unquote('rem') !default; // 48px @15px font.

// disabled sheet menu items and their anchors
$menuSheetItemTextColorDisabled: $textColorDisabled !default;


// BUTTONS
//----------------------------------------------------------------

$buttonBorderRadius: $smallBorderRadius !default; // 0px

// we set button and form control heights to the same value so they will line up nicely
$buttonHeight:       oj-px-to-rem(36px, $baseFontSize: 15px) !default;
$buttonSmallHeight:  1.86667rem !default;  // 28px when root is 15px
$buttonLargeHeight:  3.06667rem !default;  // 46px when root is 15px
$buttonXlargeHeight: 3.46667rem !default;  // 52px when root is 15px
$buttonFontWeight:   normal !default;

$buttonFontSize:       oj-px-to-rem(15px, $baseFontSize: 15px) !default;
$buttonSmallFontSize:  $smallFontSize !default; // 14px when root 15px
$buttonLargeFontSize:  $mediumFontSize !default; // 20px when root 15px
$buttonXlargeFontSize: 1.46667rem !default; // Old value: not spec'd.  In AltaWeb is 2px bigger than large, so go with 22px since Windows large is 20px.


// button padding
//----------------------------------

// Horiz space between text and edge of button when no intervening icon.
$buttonTextToEdgePadding:       oj-px-to-rem(24px, $baseFontSize: 15px) !default;
$buttonSmallTextToEdgePadding:  oj-px-to-rem(16px, $baseFontSize: 15px) !default;
$buttonLargeTextToEdgePadding:  oj-px-to-rem(32px, $baseFontSize: 15px) !default;
$buttonXlargeTextToEdgePadding: $buttonLargeTextToEdgePadding !default; // no spec, so make same as large

// Horiz space between text and icon.
$buttonIconToTextPadding:       oj-px-to-rem(8px, $baseFontSize: 15px) !default;
$buttonSmallIconToTextPadding:  oj-px-to-rem(6px, $baseFontSize: 15px) !default;
$buttonLargeIconToTextPadding:  oj-px-to-rem(16px, $baseFontSize: 15px) !default;
$buttonXlargeIconToTextPadding: oj-px-to-rem(20px, $baseFontSize: 15px) !default;

// Horiz space between icon and edge of button when text also showing.
$buttonIconToEdgePadding:       oj-px-to-rem(24px, $baseFontSize: 15px) !default;
$buttonSmallIconToEdgePadding:  oj-px-to-rem(16px, $baseFontSize: 15px) !default;
$buttonLargeIconToEdgePadding:  oj-px-to-rem(28px, $baseFontSize: 15px) !default;
$buttonXlargeIconToEdgePadding: oj-px-to-rem(36px, $baseFontSize: 15px) !default;

// Horiz space between icon and edge of button when icon only.
$buttonIconOnlyPadding:       $buttonIconToEdgePadding !default;
$buttonSmallIconOnlyPadding:  $buttonSmallIconToEdgePadding !default;
$buttonLargeIconOnlyPadding:  $buttonLargeIconToEdgePadding !default;
$buttonXlargeIconOnlyPadding: $buttonXlargeIconToEdgePadding !default;


// button states
//----------------------------------
// default
$buttonBgColor:                   $brandColor !default;
$buttonTextColor:                 $contrastTextColor !default;
$buttonIconColor:                 $buttonTextColor !default;
$buttonBorderColor:               $buttonBgColor!default;
$buttonBgImage:                   none !default;
// hover
// NOTE: no full-chrome hover spec, so all hover variables are made-up.
$buttonBgColorHover:              $brandColorLight1  !default;
$buttonBorderColorHover:          $buttonBgColorHover !default;
$buttonTextColorHover:            $buttonTextColor !default;
// TODO: could also just inherit Common's rule, which is: $iconColorHover !default;
// but so far Windows doesn't redefine $iconColorHover, so might not be ready
// to use yet, and current approach of icon color matching text color is
// consistent with rest of Windows spec.
$buttonIconColorHover:            $buttonTextColorHover !default;
$buttonBorderColorHover:          $buttonBgColorHover !default;
// active
$buttonTextColorActive:           $buttonTextColor !default;
$buttonBgColorActive:             $brandColorDark2  !default;
// selected
$buttonBgColorSelected:           $brandColorDark2  !default;
$buttonBorderColorSelected:       $brandColorDark1  !default;
// selected and hovered
$buttonTextColorSelectedHover:    $contrastTextColor !default;
$buttonIconColorSelectedHover:    $buttonTextColorSelectedHover !default;
$buttonBgColorSelectedHover:      $brandColorLight2 !default;
$buttonBorderColorSelectedHover:  $buttonBgColorSelectedHover !default;

// disabled
$buttonTextColorDisabled:         $textColorDisabled !default;
$buttonTextColorSelectedDisabled: $neutralColor6 !default;
$buttonIconColorDisabled:         $neutralColor12 !default;
$buttonBgColorDisabled:           $neutralColor9 !default;
$buttonBgColorSelectedDisabled:   $neutralColor11 !default;
// disabled and selected
// No "selected and disabled" spec, so arbitrarily inherit all from Common.
$buttonInternalBorderColor:       $neutralColor10 !default;

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

// half chrome
$buttonHalfChromeFontWeight:              $buttonFontWeight !default;
// half chrome default
$buttonHalfChromeTextColor:               $brandColorDark1 !default;
$buttonHalfChromeIconColor:               $buttonHalfChromeTextColor !default;
// half chrome hover
// Unlike full chrome, there is a spec for half-chrome hover, per email: from filmstrip/conveyor
// fwd/back button specs, use SVG fill colors for text/icon color, and use background colors from spec wiki
$buttonHalfChromeTextColorHover:          $brandColorLight1  !default;
$buttonHalfChromeBgColorHover:            transparent !default;

// half chrome active
$buttonHalfChromeTextColorActive:         $buttonTextColor !default;

// half chrome selected
$buttonHalfChromeTextColorSelected:       $buttonHalfChromeTextColorActive !default;

// half chrome selected and hovered
$buttonHalfChromeTextColorSelectedHover:  $buttonTextColor !default;
$buttonHalfChromeBgColorSelectedHover:    $buttonBgColorHover !default;
$buttonHalfChromeBorderColorSelectedHover:$buttonHalfChromeBgColorSelectedHover !default;

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

// outlined hover
$buttonOutlinedChromeBgColorHover:        $buttonHalfChromeBgColorHover !default;
$buttonOutlinedChromeBorderColorHover:    $brandColorLight1 !default;

// outlined chrome selected and hovered
$buttonOutlinedChromeTextColor:                 $brandColorDark1 !default;
$buttonOutlinedChromeBgColorSelectedHover:      $buttonBgColorHover !default;
$buttonOutlinedChromeBorderColorSelectedHover:  $buttonOutlinedChromeBgColorSelectedHover !default;

// outlined
$buttonOutlinedChromeInternalBorderColor:          $brandColorDark1 !default;

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


// alternate button colors
//----------------------------------

// $buttonPrimaryColor not used b/c primary==default color for now.

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

// width
//----------------------------------
// default: equal width only for full- and outline-chrome buttons, not half chrome
$buttonsetEqualWidthChromingList: full outlined !default; // default should be equal width buttonsets for these chroming values (auto width for all others)

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

$dialogBorderWidth:         1px !default; // (windowBorderWidth is 2px on windows)
$dialogBorderColor:         $brandColor !default;

$dialogHeaderPadding:       oj-px-to-rem(25px, $baseFontSize: 15px) oj-px-to-rem(25px, $baseFontSize: 15px) oj-px-to-rem(3px, $baseFontSize: 15px) !default;
$dialogFooterPadding:       oj-px-to-rem(6px, $baseFontSize: 15px) oj-px-to-rem(25px, $baseFontSize: 15px) oj-px-to-rem(18px, $baseFontSize: 15px) !default;
$dialogBodyPadding:         oj-px-to-rem(2px, $baseFontSize: 15px) oj-px-to-rem(25px, $baseFontSize: 15px) oj-px-to-rem(19px, $baseFontSize: 15px) !default;

$dialogHeaderFontSize:      $mediumFontSize !default;
$dialogHeaderTextColor:     $primaryTextColor !default;
$dialogHeaderBgColor:       transparent !default;

// Used to make the close button symmetrical.
$dialogCloseIconButtonMargin:  0 0.625rem !default;


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


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

$formControlLargeMaxWidth:  100% !default;
$formControlMediumMaxWidth: 100% !default;

// form control common
//----------------------------------
$formControlTriggerHeight:   oj-px-to-rem(32px, $baseFontSize: 15px) !default;
$formControlBorderRadius:    0 !default;
$formControlBorderWidth:     2px 2px 2px 2px !default;

// controls the horizontal padding inside an input
$formControlPaddingHorizontal: 5px !default;

// form control states
//----------------------------------
//default
$formControlBgColor:              $neutralColor1 !default;
$formControlBorderColor:          $neutralColor11  !default;
// active
$formControlTriggerBgColorActive: $neutralColor8 !default;
// focus
$formControlInputBorderColorFocus:$brandColor  !default;
// readonly
$formControlFontWeightReadOnly:   bold !default;
// disabled
$formControlBgColorDisabled:      $neutralColor6 !default;
$formControlBorderColorDisabled:  $neutralColor8 !default;
$formControlOpacityDisabled:      1 !default;
// placeholder
$formControlPlaceholderColor:     $tertiaryTextColor !default;

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

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

// form labels
//----------------------------------
// label text color defined above, look for "text colors"
$formControlLabelFontSize: $smallFontSize !default;
$formControlLabelRequiredChar: "" !default;

// inline labels
//----------------------------------

// gutter (padding) between the inline label and the control
$formControlLabelInlineGutter:     oj-px-to-rem(20px, $baseFontSize: 15px) !default;


// form layout
//----------------------------------

// In a form layout this is the space expected between
// form controls in different rows
$formLayoutMarginBottom: 10px !default;

// inline label in a form; we do not float, thus we need line-height
// to maintain label's height, and we need a different top margin for this case.
$formLayoutLabelInlineMarginTop: .2em !default;

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

// The left/right margin is the space before the first column and after the last column of an oj-form-layout
$formLayoutHorizontalMargin:  $formControlLabelInlineGutter !default;

// INPUT TEXT, INPUT PASSWORD, TEXT AREA
//----------------------------------------------------------------
// common
$formControlInputHeight:                     oj-px-to-rem(32px, $baseFontSize: 15px) !default;
// INPUT DATE
$inputDateTimeConverterYearOptionDefault: 2-digit !default;
$inputDateTimeShowPickerOnDesktopOptionDefault: enabled !default;
//INPUT SEARCH
//--------------------------------------------------------------
$inputSearchIconPosition: start !default; // Possible values are 'start' and 'end'
$inputSearchIconPadding: 0 3px 0 10px !default;

// RADIOSET AND CHECKBOXSET
// Windows has label come after icon font
$radioCheckboxLabelPosition: end !default;
$radioCheckboxRowHeight: 2.9rem !default;

// spacing between edge and the label dom
$radioCheckboxLabelToEdgePadding: 20px !default;

// radioset and checkboxset states
//
// default
$radioCheckboxSetBorderColor: $neutralColor7 !default;
// Windows has a background color on the set that isn't white
$radioCheckboxSetBgColor: $neutralColor4 !default;
// on Windows theme there is no divider border so we set the color to transparent
$radioCheckboxItemDividerColor: transparent !default;

// SELECT
//----------------------------------------

//options
$selectRenderModeOptionDefault: native !default;

// arrow
$selectArrowColor:    $neutralColor17 !default;
$selectArrowPadding: 0 7px 0 3px !default;

// picker
$selectPickerBgColor: $formControlBgColor !default;


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

//
// Windows Slider:
//   - Rectangular Thumbs (thumb width is greater than thumb height)
//   - Normal sized Active thumbs (same size as enabled thumbs).
//   - Thumbs without borders
//

// Thumb dimensions.
// In the windows theme, slider thumbs are 8x24 pixels when horizontal,
// and 24x8 pixels when vertical.
// (note that the common code will swap the width/height assignments
//  for vertical sliders)
$sliderThumbHeight:  	  24px !default;
$sliderThumbWidth:  	  8px !default;

// Thumb dimensions for the active state.
$sliderThumbHeightActive:  	  $sliderThumbHeight !default;

$sliderThumbBorderRadius: 12px !default;
$sliderThumbBorderWidth:  0 !default;

// colors for enabled state
$sliderThumbBgColor:             $brandColor !default;
$sliderBarBgColor:               $neutralColor11 !default;

// active
$sliderThumbBgColorActive:       $brandColorLight1  !default;
$sliderBarValueBgColorActive:    $sliderThumbBgColorActive !default;

// disabled
$sliderThumbBgColorDisabled:     $neutralColor10  !default;
$sliderBarValueBgColorDisabled:  $sliderThumbBgColorDisabled !default;

//SWITCH
//----------------------------------------------------------------

// CONTAINER HEIGHT/WIDTH
$switchContainerHeight: $formControlTriggerHeight !default;
$switchContainerWidth: $formControlTriggerHeight * 1.4736 !default;

// TRACK HEIGHT/WIDTH
$switchTrackHeight: $switchContainerHeight * 0.625 !default; // 20px
$switchTrackWidth: $switchContainerHeight * 1.375 !default; // 44px

// TRACK BORDERS
$switchTrackBorderWidth: 2px !default;
$switchTrackBorderWidthReadonly: 2px !default;

// THUMB BORDERS
$switchThumbBorderWidth: 1px !default;
$switchThumbBorderWidthReadonly: $switchTrackBorderWidthReadonly !default;

// ENABLED OFF
$switchThumbHeight: $switchContainerHeight * 0.3125 !default; // 10px
$switchThumbWidth: $switchThumbHeight !default;
$switchThumbShadow: none !default;
// ----- COLORS -----
$switchTrackBgColor:                     $neutralColor1 !default; // #ffffff
$switchTrackBorderColor:                 $brandColor !default;
$switchThumbBgColor:                     $switchTrackBorderColor !default; // #0572ce
$switchThumbBorderColor:                 $switchTrackBorderColor !default; // #0572ce

// ENABLED ON
$switchThumbHeightSelected: $switchThumbHeight !default;
$switchThumbWidthSelected: $switchThumbHeightSelected !default;
$switchThumbShadowSelected: $switchThumbShadow !default;
// ----- COLORS -----
$switchTrackBgColorSelected:             $switchTrackBorderColor !default; // #0572ce
$switchTrackBorderColorSelected:         $switchTrackBgColorSelected !default; // #0572ce
$switchThumbBgColorSelected:             $neutralColor1 !default; // #ffffff
$switchThumbBorderColorSelected:         $switchThumbBgColorSelected !default; // #ffffff

// HOVER OFF
$switchThumbHeightHover: $switchThumbHeight !default;
$switchThumbWidthHover: $switchThumbHeight !default;
$switchThumbBorderWidthHover: $switchThumbBorderWidth !default;
// ----- COLORS -----
$switchTrackBgColorHover:                $neutralColor1 !default; // #ffffff
$switchTrackBorderColorHover:            $brandColorLight1 !default;
$switchThumbBgColorHover:                $switchTrackBorderColorHover !default; // #00a8ff
$switchThumbBorderColorHover:            $switchTrackBorderColorHover !default; // #00a8ff

// HOVER ON
$switchThumbHeightSelectedHover: $switchThumbHeight !default;
$switchThumbWidthSelectedHover: $switchThumbHeight !default;
$switchThumbBorderWidthSelectedHover: $switchThumbBorderWidthHover !default;
// ----- COLORS -----
$switchTrackBgColorSelectedHover:        $switchTrackBorderColorHover !default; // #00a8ff
$switchTrackBorderColorSelectedHover:    $switchTrackBgColorSelectedHover !default; // #00a8ff
$switchThumbBgColorSelectedHover:        $neutralColor1 !default; // #ffffff
$switchThumbBorderColorSelectedHover:    $switchThumbBgColorSelectedHover !default; // #ffffff

// ACTIVE OFF
$switchThumbHeightActive: $switchThumbHeight !default;
$switchThumbWidthActive: $switchThumbHeight !default;
$switchThumbBorderWidthActive: $switchThumbBorderWidthHover !default;
// ----- COLORS -----
$switchTrackBgColorActive:               $switchTrackBgColorHover !default; // #ffffff
$switchTrackBorderColorActive:           $switchTrackBorderColorHover !default; // #00a8ff
$switchThumbBgColorActive:               $switchThumbBgColorHover !default; // #00a8ff
$switchThumbBorderColorActive:           $switchThumbBorderColorHover !default; // #00a8ff

// ACTIVE ON
$switchThumbHeightSelectedActive: $switchThumbHeight !default;
$switchThumbWidthSelectedActive: $switchThumbHeight !default;
$switchThumbBorderWidthSelectedActive: $switchThumbBorderWidthHover !default;
// ----- COLORS -----
$switchTrackBgColorSelectedActive:        $switchTrackBgColorSelectedHover !default; // #00a8ff
$switchTrackBorderColorSelectedActive:    $switchTrackBorderColorSelectedHover !default; // #00a8ff
$switchThumbBgColorSelectedActive:        $switchThumbBgColorSelectedHover !default; // #ffffff
$switchThumbBorderColorSelectedActive:    $switchThumbBorderColorSelectedHover !default; // #ffffff

// READONLY OFF
$switchThumbHeightReadonly: $switchThumbHeight !default;
$switchThumbWidthReadonly: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorReadonly:             $neutralColor1 !default; // #ffffff
$switchTrackBorderColorReadonly:         $neutralColor17 !default;
$switchThumbBgColorReadonly:             $switchTrackBorderColorReadonly !default; // #000000
$switchThumbBorderColorReadonly:         $switchTrackBorderColorReadonly !default; // #000000

// READONLY ON
$switchThumbHeightSelectedReadonly: $switchThumbHeight !default;
$switchThumbWidthSelectedReadonly: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorSelectedReadonly:     $switchTrackBorderColorReadonly !default; // #000000
$switchTrackBorderColorSelectedReadonly: $switchTrackBgColorSelectedReadonly !default; // #000000
$switchThumbBgColorSelectedReadonly:     $neutralColor1 !default; // #ffffff
$switchThumbBorderColorSelectedReadonly: $switchThumbBgColorSelectedReadonly !default; // #ffffff

// DISABLED OFF
$switchThumbHeightDisabled: $switchThumbHeight !default;
$switchThumbWidthDisabled: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorDisabled:             $neutralColor2 !default;
$switchTrackBorderColorDisabled:         $neutralColor7 !default;
$switchThumbBgColorDisabled:             $switchTrackBorderColorDisabled !default; // #e5e5e5
$switchThumbBorderColorDisabled:         $switchTrackBorderColorDisabled !default; // #e5e5e5

// DISABLED ON
$switchThumbHeightSelectedDisabled:      $switchThumbHeight !default;
$switchThumbWidthSelectedDisabled:       $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorSelectedDisabled:     $switchTrackBorderColorDisabled !default; // #e5e5e5
$switchTrackBorderColorSelectedDisabled: $switchTrackBgColorSelectedDisabled !default; // #e5e5e5
$switchThumbBgColorSelectedDisabled:     $neutralColor9 !default;
$switchThumbBorderColorSelectedDisabled: $switchThumbBgColorSelectedDisabled !default; // #cfcfcf

// NAVIGATION LIST
//----------------------------------------
$navigationListItemContrastLabelColorDefault:   $neutralColor10 !default;
$navigationListItemContrastLabelColorHover:     $neutralColor3 !default;
$navigationListItemContrastBgColorHover:        $neutralColor16 !default;
$navigationListItemContrastLabelColorSelected:  $neutralColor3 !default;
$navigationListItemContrastBgColorSelected:     $neutralColor16 !default;
$navigationListItemContrastLabelColorDisabled:  $neutralColor13 !default;
//Sizing
$navigationListItemStartEndPadding:                           oj-px-to-rem(10px, $baseFontSize: 16px) !default;

$navigationListHorizontalItemContrastBgColorSelected:         $neutralColor1 !default;
$navigationListHorizontalItemContrastLabelColorSelected:      $textColor3 !default;

$navigationListHorizontalFontSize:                            oj-px-to-rem(12px, $baseFontSize: 15px) !default;
$navigationListHorizontalMinHeight:                           oj-px-to-rem(48px, $baseFontSize: 15px) !default;
$navigationListHorizontalItemPadding:                         4px $navigationListItemStartEndPadding 2px !default;
$navigationListHorizontalItemBorderWidth:                     0 !default;
$navigationListHorizontalIconMargin:                          4px !default;

$navigationListHorizontalStackedIconMinHeight:                oj-px-to-rem(60px, $baseFontSize: 15px) !default;
$navigationListHorizontalStackedItemPadding:                  3px $navigationListItemStartEndPadding 2px !default;

$navigationListItemLabelColorSelected:                        $brandColorDark1 !default;
$navigationListHorizontalItemLabelColorSelected:              $brandColorDark1 !default;

// NAVIGATION TABS
//----------------------------------------
//Default
$tabBarItemLabelColorDefault:                         $formControlLabelColor !default;
$tabBarItemIconColorDefault:                          $formControlLabelColor !default;
$tabBarItemBorderColor:                               transparent !default;

//Selected
$tabBarItemLabelColorSelected:                        $brandColorDark1 !default;
$tabBarItemBorderColorSelected:                       transparent !default;
$tabBarItemBgColorSelected:                           transparent !default;

//Sizing
$tabBarItemStartEndPadding:                           oj-px-to-rem(10px, $baseFontSize: 16px) !default;

$tabBarVerticalItemBorderWidth:                       0px !default;
$tabBarVerticalIconOnlyItemBorderWidth:               0px !default;
$tabBarVerticalItemMinHeight:                         oj-px-to-rem(50px, $baseFontSize: 15px) !default;
$tabBarVerticalItemFontSize:                          oj-px-to-rem(16px, $baseFontSize: 15px) !default;
$tabBarVerticalItemLabelTextAlign:                    center !default;

$tabBarItemContrastLabelColorDefault:                 $neutralColor10 !default;
$tabBarItemContrastLabelColorHover:                   $neutralColor3 !default;
$tabBarItemContrastBgColorHover:                      $neutralColor16 !default;
$tabBarItemContrastBgColorSelected:                   $brandColor !default;
$tabBarItemContrastLabelColorSelected:                $contrastTextColor !default;
$tabBarItemContrastLabelColorDisabled:                $neutralColor13 !default;

$tabBarHorizontalItemContrastBgColorSelected:         $tabBarItemContrastBgColorSelected !default;
$tabBarHorizontalItemContrastLabelColorSelected:      $tabBarItemContrastLabelColorSelected !default;

$tabBarHorizontalItemBorderWidth:                     0 0 0 0 !default;
$tabBarHorizontalIconOnlyItemBorderWidth:             0 0 0 0 !default;

$tabBarHorizontalItemMinHeight:                       oj-px-to-rem(48px, $baseFontSize: 15px) !default;
$tabBarHorizontalItemPadding:                         4px $tabBarItemStartEndPadding 2px !default;
$tabBarHorizontalIconMargin:                          4px !default;

$tabBarHorizontalStackedItemPadding:                  3px $tabBarItemStartEndPadding 2px !default;

$tabBarHorizontalItemFontSize:                        oj-px-to-rem(16px, $baseFontSize: 15px) !default;

// PROGRESS
//----------------------------------------------------------------
$progressBarBgColor:                     $neutralColor9 !default;

$progressBarIndeterminateOverlayImage:   $imageDir + "animated-overlay.svg" !default;

// TRAIN
//-----------------------------------------------------------------------------
$trainStepWidth:                          105px !default;

// DATAGRID
//----------------------------------------------------------------
$collectionCellBgColor:                   $neutralColor1 !default;
$collectionHeaderBgColorFocus:            $brandColorLight2  !default;
$collectionHeaderBgColorSelectedInactive: $neutralColor5 !default;
$collectionHeaderBgColorDrag:             $brandColorLight4 !default;
$collectionHeaderDragImageBorderColor:    $neutralColor10 !default;
$collectionStatusBgColor:                 $collectionCellBgColor !default;

// Default
$collectionBorderColor:                   $neutralColor8 !default;
$collectionBgColor:                       $neutralColor1 !default;

// Headers
$collectionHeaderTextColor:               $headerTextColor !default;
$collectionHeaderFontSize:                $smallestFontSize !default;
$collectionHeaderBgColor:                 $neutralColor1 !default;
// Headers - Hover
$collectionHeaderBgColorHover:            $neutralColor8 !default;
// Headers - Selected
$collectionHeaderBgColorSelected:         $neutralColor9  !default;

// Cells
$collectionCellPadding:                   oj-px-to-rem(10px, $baseFontSize: 15px) !default;
$collectionCellTextColor:                 $textColor  !default;
// Cells - Hover
$collectionCellBgColorHover:              $neutralColor5  !default;
// Cells - Selected
$collectionCellBgColorSelected:           $neutralColor8 !default;
$collectionCellBorderColorSelected:       $neutralColor11  !default;
// Cells - Selected Inactive (selected but focus outside the component)
$collectionCellBgColorSelectedInactive:   $collectionCellBgColorSelected !default;
$collectionCellBorderColorSelectedInactive:$collectionCellBorderColorSelected !default;

// Rows - Height is now dependent on the default form control height
$collectionRowHeight:                         max($formControlInputHeight, oj-px-to-rem(43px, $baseFontSize: 15px)) !default;
$collectionColumnWidth:                       oj-px-to-rem(68px, $baseFontSize: 15px) !default;

// ROWEXPANDER
//-----------------------------------------------------------------------------
$rowExpanderSpacerWidth:  2.25rem !default;

// LISTVIEW
//----------------------------------------------------------------
// the right and left margins will be flipped in rtl languanges
$listViewCardMargin:     20px 20px 0 0 !default;
$listViewHeaderFontSize: $header2FontSize !default;
$listViewHeaderOpacity:  0.85 !default;
$listViewGridlinesItemOptionDefault: hidden !default;

// SELECTOR WIDTH
//-----------------------------------------------------------------------------

// width of the selector 
$selectorWidth:                      20px !default;
// height of the selector 
$selectorHeight:                     20px !default;
// margin of the selector 
$selectorMargin:                     10px !default;


// APPLICATION LAYOUT - MOBILE PATTERN VARIABLES
//-------------------------------------------------------------
// Padding
$appLayoutHybridPadding: oj-px-to-rem(20px, $baseFontSize: 15px) !default;
// Header
$appLayoutHybridHeaderMinHeight: 48px !default;
$appLayoutHybridHeaderTitleFontSize: 1rem !default;

// OFFCANVAS
//----------------------------------------
// options
$offcanvasDisplayModeOptionDefault: overlay !default;

// CONVEYORBELT
//----------------------------------------
$conveyorBeltArrowVisibilityOptionDefault: visible !default;

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