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

//=================================================================
//=================================================================
$avatarInnerBgColor:                  $neutralColor14 !default;
$iconCircleInnerBgColor:              $avatarInnerBgColor !default;
$colorRequired:                       $accentColorDanger4 !default;
$iconColorDisabled:                   $neutralColor12 !default;
$iconColorDefault:                    $textColor1 !default;
$panelBgColor:                        $neutralColor1 !default;
$panel1BgColor:                       $neutralColor4 !default;
$panel1BorderColor:                   $neutralColor9 !default;
$bodyBgColor:                           $neutralColor1 !default;
$dateTimePickerSwitcherBgColor:         $neutralColor7 !default;
$trainConnectorBgColor:                 $neutralColor11 !default;
$trainContinuousConnectorBgColorSelected:$neutralColor11 !default;
$trainBgColorActive:                    $brandColorLight3 !default;

$dvtComponentBg2Color:                  $neutralColor8 !default;
$dvtNBoxCellBgColor:                    $neutralColor5 !default;
$dvtNBoxCellBgColorMinimized:           $neutralColor5 !default;
$dvtMapBgColor:                         $neutralColor7 !default;
$dvtMapMarkerBgColor:                   $neutralColor15 !default;
$dvtChartStockRangeBgColor:             $neutralColor9 !default;
$dvtChartStockRisingBgColor:            $neutralColor13 !default;
$dvtPictoChartItemBgColor:              $neutralColor11 !default;
$dvtNBoxDialogBorderColor:              $neutralColor9 !default;
$dvtTimelineMajorAxisSeparatorColor:    $neutralColor9 !default;
$dvtTimelineMinorAxisSeparatorColor:    $neutralColor9 !default;
$dvtDiagramLinkColor:                   $neutralColor11 !default;
$dvtTimelineItemBorderColor:            $neutralColor12 !default;
$dvtTimelineItemBorderColorHover:       $brandColorLight1 !default;
$dvtTimelineOverviewBgColor:            $neutralColor7 !default;
$dvtTimelineSeriesBgColor:              $neutralColor3 !default;
$dvtDiagramNodeBorderColorHover:        $neutralColor11 !default;
$dvtDiagramLinkBorderColorHover:        $neutralColor11 !default;
//=================================================================
//=================================================================

// WARNING:
// iOS theme UNDER DEVELOPMENT!
// currently defining iOS overrides for alta web values so need to import alta web var files
// This is the variable file for the Oracle Alta iOS 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: ios !default; // targets the ios 9 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
//----------------------------------
$rootFontSize:    1em !default;  // 16px

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


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

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

// border radius
//----------------------------------
$smallBorderRadius:  2px !default;
$mediumBorderRadius: 3px !default;
$largeBorderRadius:  5px !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;


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

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

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

// panel defaults:
$panelBorderRadius: 0 !default;

// File Picker
//----------------------------------------------------------------
$filePickerTextFontWeight:        normal !default;
$filePickerPadding:               22.333333px !default;




// POPUP
//----------------------------------------------------------------
$popupBgColor:      $neutralColor1 !default;
$popupBoxShadow:      $smallBoxShadow !default;
$popupBorderRadius:   12px !default;

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

// HEADER
$headerBgColor:       $neutralColor5 !default;
$header4FontSize:     $fontSize !default;

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


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

// Controls whether sheet menus have a "Cancel" menu item automatically added.
// Valid values are "none" and "menuItem".
$menuSheetCancelAffordance: "menuItem" !default;

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

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


// 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) :
// As discussed in _oj.common.menu.scss, while the workaround to WebKit/Apple platform bug 151657
// remains necessary, the only non-null values supported for $menuTextOnlyJustifyContent are
// "flex-start" and "center".
$menuTextOnlyJustifyContent:         center !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 spec, but don't grow/shrink via rems in case of artifacts, and DO scale the surrounding space via rems.
// Per UX, the 4px ((32-24)/2) of spacing on either side of the icon, seen in the iOS spec, is part of the 10px spacing on either side.
$menuIconToEdgePadding:              oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$menuTextToIconPadding:              oj-px-to-rem(8px, $baseFontSize: 16px) !default; // Per UX, decrease the 10px to 8px, so looks like 10px in UX's screen measuring tool

// Padding on both left and right of submenu icon:
// Spec only provides the "after" spacing of 10px, which we use for the "before" spacing value as well.  Per UX, decrease the 10px to 6px,
// to make it look like 10px in UX's screen measuring tool.  That 4px difference probably consists of the same 2px needed for (regular)
// icon margin, and another 2px for the fact that the submenu caret doesn't extend to the edge of the icon canvas.
$menuSubmenuIconPadding:             oj-px-to-rem(6px, $baseFontSize: 16px) !default;
$menuTextToEdgePadding:              unquote("calc(16px + (2 * #{$menuSubmenuIconPadding}))") !default; 

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

// menus (.oj-menu), whether top-level or submenu
$menuBorderRadius:                   5px !default;
$menuBgColor:                        $popupBgColor !default;

// menu items (.oj-menu-item) and their anchors
$menuItemBorderColor:                $neutralColor8 !default;
$menuItemTextColor:                  $brandColorDark1 !default;
$menuItemLineHeight:                 43/16+unquote('rem') !default; // 43px @16px font

// disabled menu items and their anchors
$menuItemTextColorDisabled:          $linkTextColorDisabled !default;

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

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

// submenu icons
$menuSubmenuIconColor:               $neutralColor11 !default; // TODO: this color appears 2 other times in this file.  global var needed?

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


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

// sheet menus (.oj-menu-sheet)
$menuSheetFontSize:                  oj-px-to-rem(24px, $baseFontSize: 16px) !default;
$menuSheetBorderRadius:              12px !default;
$menuSheetBgColor:                   transparent !default;
$menuSheetMarginHorizontal:          oj-px-to-rem(12px, $baseFontSize: 16px) !default;
$menuSheetMarginBottom:              12px; // value must be 0, px, or %, e.g. 0, 10px, 5%

// sheet menu items (.oj-menu-item) and their anchors
$menuSheetItemBorderColor:           $neutralColor5 !default;
$menuSheetItemBgColor:               $menuBgColor !default;
$menuSheetItemLineHeight:            56/24+unquote('rem') !default; // 56px @24px font, where 24 is 1.5rem @16px font
$menuItemBottomBorderWidth:          0 !default;

// focused sheet menu items (.oj-focus) and their ancestor menu items (.oj-focus-ancestor)
$menuSheetItemBorderColorFocus:      $menuSheetItemBorderColor !default;

// cancel menu item (.oj-menu-item-cancel) and its anchor
$menuSheetItemCancelFontWeight:      bold !default;

// groups of sheet menu items separated by group dividers
$menuSheetItemGroupBorderRadius:     $menuSheetBorderRadius !default;

// sheet menu group dividers (.oj-menu-divider, different than the border that iOS puts between every menu item)
$menuSheetDividerBorderWidth:        8px !default;
$menuSheetDividerBorderColor:        transparent !default;

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

$messageComponentInlineBorderRadius:       $largeBorderRadius !default;
$messageComponentInlineMarginTop:          5px !default;
$messageComponentInlineBorderTopWidth:     1px !default;

$messagesGeneralOverlayMinWidth:          614px !default;
$messagesGeneralOverlayMaxWidth:          1639px !default;

$messageGeneralOverlayBorderRadius:       12px !default;
$messageGeneralOverlayHeaderBgColor:      $neutralColor4 !default;
$messageGeneralOverlayBodyBgColor:        $neutralColor6 !default;

$messagesNotificationOverlayMinWidth:     307px !default;
$messagesNotificationOverlayMaxWidth:     820px !default;

$messageNotificationOverlayBorderRadius:  12px !default;
$messageNotificationOverlayHeaderBgColor: $neutralColor4 !default;
$messageNotificationOverlayBodyBgColor:   $neutralColor6 !default;

$messageCategoryFontSize:                 oj-px-to-rem(13px, $baseFontSize: 16px) !default;
$messageTimeFontSize:                     oj-px-to-rem(13px, $baseFontSize: 16px) !default;
$messageSummaryFontSize:                  oj-px-to-rem(15px, $baseFontSize: 16px) !default;
$messageSummaryLineHeight:                1.2 !default;
$messageDetailFontSize:                   oj-px-to-rem(15px, $baseFontSize: 16px) !default;
$messageDetailLineHeight:                 1.2 !default;

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

$buttonFontWeight:   normal !default;
$buttonBorderRadius: $largeBorderRadius !default; // 5px

$buttonHeight:       oj-px-to-rem(36px, $baseFontSize: 16px) !default;
$buttonSmallHeight:  $buttonHeight * (26px/36px) !default;
$buttonLargeHeight:  $buttonHeight * (52px/36px) !default;
$buttonXlargeHeight: $buttonHeight * (62px/36px) !default;

$buttonFontSize:       oj-px-to-rem(18px, $baseFontSize: 16px) !default;
$buttonSmallFontSize:  $smallFontSize !default; // 14px when root 16px
$buttonLargeFontSize:  oj-px-to-rem(20px, $baseFontSize: 16px) !default;
$buttonXlargeFontSize: oj-px-to-rem(22px, $baseFontSize: 16px) !default;


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

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

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

// Horiz space between icon and edge of button when text also showing.
$buttonIconToEdgePadding:        oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$buttonSmallIconToEdgePadding:   oj-px-to-rem(3px, $baseFontSize: 16px) !default;
$buttonLargeIconToEdgePadding:   oj-px-to-rem(18px, $baseFontSize: 16px) !default;
$buttonXlargeIconToEdgePadding:  oj-px-to-rem(30px, $baseFontSize: 16px) !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:         $neutralColor1 !default;
$buttonIconColor:         $neutralColor1 !default;
$buttonBorderColor:       $brandColor !default;
$buttonBgImage:           none !default;
$buttonTextShadow:        none !default;
$buttonBoxShadow:         none !default;
$buttonInternalBorderColor:       $neutralColor1 !default;

// hover
$buttonBgColorHover:                  $brandColorLight1 !default;
$buttonBorderColorHover:              $brandColorLight1 !default;
$buttonTextColorHover:                $neutralColor1 !default;

// TODO: could also just inherit Common's rule, which is: $iconColorHover !default;
// but so far iOS 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 iOS spec.
$buttonIconColorHover:                $neutralColor1 !default;

// active
$buttonTextColorActive:               $buttonTextColor !default;
$buttonBgColorActive:                 $brandColorDark2 !default;
$buttonBorderColorActive:             $buttonBgColorActive !default;

// selected
$buttonBgColorSelected:               $buttonBgColorActive !default;

// selected and hovered
$buttonTextColorSelectedHover:        $contrastTextColor !default;
$buttonIconColorSelectedHover:        $buttonTextColorSelectedHover !default;
$buttonBgColorSelectedHover:          $brandColorLight2 !default;
$buttonBorderColorSelectedHover:      $buttonBgColorSelectedHover !default;

// disabled
$buttonBgColorDisabled:               $neutralColor9 !default;
$buttonBorderColorDisabled:           $buttonBgColorDisabled !default;
$buttonTextColorDisabled:             $textColorDisabled !default;
$buttonTextColorSelectedDisabled:     $neutralColor5 !default;
$buttonBgColorSelectedDisabled:       $neutralColor11 !default;
$buttonBorderColorSelectedDisabled:   $buttonBgColorSelectedDisabled !default;
// disabled and selected
// No "selected and disabled" spec, so all handling is arbitrary.
$buttonConfirmColor:                                $accentColorConfirmation5 !default;

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

// TODO: Does the following remark from Common apply to native themes?
// If so, remove the overrides of $buttonHalfChromeIconColor and
// $buttonHalfChromeIconColorDisabled.
// [1] For buttons without chrome (i.e. half-chrome buttons in the
// default, focus-only, and disabled-and-not-selected states),
// icon colors should follow the regular icon color spec instead of
// the button icon color spec, which applies to buttons with chrome.

// chroming option defaulting
$buttonChromingOptionDefault: half !default;

// half chrome

// half chrome default
$buttonHalfChromeTextColor:               $linkTextColor !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;
$buttonHalfChromeIconColorHover:          $brandColorLight1 !default;

// half chrome active
$buttonHalfChromeTextColorActive:         $buttonHalfChromeTextColor !default;
$buttonHalfChromeBgColorActive:           transparent !default;
$buttonHalfChromeOpacityActive:           0.2 !default;

// half chrome selected
$buttonHalfChromeTextColorSelected:       $buttonTextColor !default;
$buttonHalfChromeBgColorSelected:         $buttonHalfChromeTextColor !default;

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

// half chrome disabled
$buttonHalfChromeTextColorDisabled:                 $neutralColor17 !default;
$buttonHalfChromeOpacityDisabled:                   0.3 !default;
$buttonHalfChromeBgColorSelectedDisabled:           $neutralColor9 !default;
$buttonHalfChromeBorderColorSelectedDisabled:       $buttonHalfChromeBgColorSelectedDisabled !default;
$buttonHalfChromeTextColorSelectedDisabled:         $neutralColor5 !default;
$buttonHalfChromeIconColorSelectedDisabled:         $buttonHalfChromeTextColorSelectedDisabled !default;

// half chrome disabled and selected

// outlined
$buttonOutlinedChromeInternalBorderColor:           $brandColorDark1 !default;
$buttonOutlinedChromeInternalBorderColorSelectedDisabled:   $buttonBorderColorDisabled !default;
// outlined default
$buttonOutlinedChromeTextColor:               $buttonHalfChromeTextColor !default;
$buttonOutlinedChromeBorderColor:             $buttonOutlinedChromeTextColor !default;
// outlined hover
$buttonOutlinedChromeTextColorHover:          $brandColorLight1 !default;
$buttonOutlinedChromeIconColorHover:          $brandColorLight1 !default;
$buttonOutlinedChromeBorderColorHover:        $brandColorLight1 !default;
// outlined active
$buttonOutlinedChromeTextColorActive:         $buttonTextColor !default;
$buttonOutlinedChromeIconColorActive:         $buttonOutlinedChromeTextColorActive !default;
$buttonOutlinedChromeBgColorActive:           $brandColorDark2 !default;
$buttonOutlinedChromeBorderColorActive:       $brandColorDark2 !default;
$buttonOutlinedChromeInternalBorderColorActive:    $brandColorDark2 !default;
$buttonOutlinedChromeOpacityActive:           1 !default;

// outlined selected

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

// outlined disabled
$buttonOutlinedChromeOpacityDisabled:               $opacityDisabled !default;
$buttonOutlinedChromeBgColorSelectedDisabled:       $buttonHalfChromeBgColorSelectedDisabled !default;
$buttonOutlinedChromeBorderColorSelectedDisabled:   $buttonHalfChromeBgColorSelectedDisabled !default;
$buttonOutlinedChromeTextColorSelectedDisabled:     $buttonHalfChromeTextColorSelectedDisabled !default;
$buttonOutlinedChromeIconColorSelectedDisabled:     $buttonHalfChromeTextColorSelectedDisabled !default;
// outlined disabled and selected


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

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


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

$buttonsetBorderRadius: 5px !default;


// chroming
//----------------------------------

$buttonsetChromingOptionDefault: outlined !default;


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

$dialogBorderRadius:        12px !default;

$dialogHeaderPadding:       oj-px-to-rem(23px, $baseFontSize: 16px) oj-px-to-rem(14px, $baseFontSize: 16px) oj-px-to-rem(3px, $baseFontSize: 16px) !default;
$dialogBodyPadding:         oj-px-to-rem(3px, $baseFontSize: 16px) oj-px-to-rem(14px, $baseFontSize: 16px) oj-px-to-rem(14px, $baseFontSize: 16px) !default;
$dialogFooterPadding:       0 !default;

$dialogHeaderFontSize:      oj-px-to-rem(18px, $baseFontSize: 16px) !default;
$dialogHeaderTextAlign:     center !default;
$dialogHeaderBgColor:       transparent !default;

$dialogBodyTextAlign:       center !default;

// Rounded button corners are specific to iOS
$dialogFooterButtonHeight:       2.625rem !default;
$dialogFooterButtonFontWeight:   500 !default;
$dialogFooterDividerColor:      $neutralColor7 !default;
$dialogFooterIntegrateButtons:  true !default;

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


// FORM CONTROLS
//----------------------------------------------------------------
$formControlInputHeight: oj-px-to-rem(31px, $baseFontSize: 16px) !default;
$formControlTriggerHeight: $formControlInputHeight;

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

$formControlTextAlign: end !default;

// form control common
//----------------------------------
$formControlBorderRadius:    0 !default;

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

$formControlBorderWidth: 0 0 0 0 !default;

// form control states
//----------------------------------
//default
$formControlBgColor:       transparent        !default;
$formControlBorderColor:   $brandColor !default;
$formControlInputFontSize: oj-px-to-rem(17px, $baseFontSize: 16px) !default;
$formControlTriggerValueColor: $brandColorDark1 !default;

// active
$formControlTriggerBgColorActive: $brandColorLight5 !default;

// readonly
$formControlFontWeightReadOnly:  bold !default;

// placeholder
$formControlPlaceholderColor:         $textColor4 !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(10px, $baseFontSize: 16px) !default;


// form layout
//----------------------------------
// outer border
$formLayoutBorderColor:  $neutralColor8 !default;
// divider between rows
$formLayoutDividerColor: $neutralColor7 !default;

// 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: .5em !default;


$formLayoutFieldInlineAlign: end !default;
$formLayoutLabelEdgeDefault: top !default;
$formLayoutDirectionDefault: column !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
//----------------------------------------------------------------
$textAreaLineHeight:                  1.2 !default;
// INPUT DATE
$inputDateTimeConverterYearOptionDefault: 2-digit !default;
$inputDateTimeShowPickerOnDesktopOptionDefault: enabled !default;
//INPUT SEARCH
//--------------------------------------------------------------
$inputSearchBgColor:                  $neutralColor9 !default;
$inputSearchBgColorDisabled:          $inputSearchBgColor !default;
$inputSearchIconPosition:             start !default; // Possible values are 'start' and 'end'
$inputSearchIconPadding:              0 6px 0 9px !default;

// INPUT NUMBER
// the spacing between the input and the buttonset
$inputNumberInputToButtonMargin: 10px !default;

$inputNumberButtonWidth: 50px;

// the chroming of input number buttons
$inputNumberButtonChromingOptionDefault: outlined !default;

// RADIOSET AND CHECKBOXSET
// ios has input rendered as a background image and label comes before image
$radioCheckboxLabelPosition: start !default;

// radioset and checkboxset states
//------------------------------------
// default
$radioCheckboxSetBorderColor:         $neutralColor8 !default;
$radioCheckboxSetBgColor:             $neutralColor1 !default;
$radioCheckboxItemDividerColor:       $neutralColor8 !default;
// selected
$radioCheckboxLabelColorSelected:     $brandColor !default; // the blue
// active
$radioCheckboxItemBgColorActive:      $neutralColor8 !default;
$radioCheckboxItemDividerColorActive: $neutralColor11 !default;

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

//options
$selectRenderModeOptionDefault: native !default;

// picker
$selectPickerBgColor: $neutralColor1 !default;

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

//
// iOS Slider:
//   - Circular thumbs
//   - Large Active thumbs (larger than enabled thumbs).
//   - Thumbs with borders and shadows
//

// iOS slider has a 26px circular thumb.
// (the thumb height will be equal to the thumb width
//  based on the default thumb height which is set in the common def.)
$sliderThumbWidth:      26px !default;

// Active iOS slider thumbs are larger than normal (enabled) sliders.
$sliderThumbWidthActive:              34px !default;
$sliderColorPickerThumbWidthActive:   34px !default;

$sliderThumbBorderWidth:        1px !default;
$sliderThumbBoxShadow:          0 3px 1px unquote('hsla(#{$boxShadowHsl},0.05)'), 0 0 8px unquote('hsla(#{$boxShadowHsl},0.2)') !default;

// colors for enabled state
$sliderThumbBorderColor:              $neutralColor9 !default;
$sliderThumbBgColor:                  $neutralColor1 !default;
$sliderBarBgColor:                    $neutralColor11 !default;

// hover
$sliderThumbBgColorHover:             $neutralColor7 !default;

// active
$sliderThumbBorderColorActive:        $neutralColor9 !default;

// disabled
$sliderThumbBorderColorDisabled:      $neutralColor7 !default;
$sliderThumbBgColorDisabled:          $sliderThumbBgColor !default;
$sliderBarValueBgColorDisabled:       $neutralColor12 !default;
$sliderBarBgColorDisabled:            $neutralColor8 !default;

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

// CONTAINER HEIGHT/WIDTH
$switchContainerHeight: $formControlTriggerHeight !default; // 1.938rem = 31px when base font 16px
$switchContainerWidth: $formControlTriggerHeight * 1.613 !default;

// TRACK HEIGHT/WIDTH
$switchTrackHeight: $switchContainerHeight * 0.9677 !default; // 30px
$switchTrackWidth: $switchContainerHeight * 1.6452 !default; // 51px

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

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

// ENABLED OFF
$switchThumbHeight: $switchContainerHeight * 0.8387 !default; // 26px
$switchThumbWidth: $switchThumbHeight !default;
$switchThumbShadow: 0 3px 1px unquote('hsla(#{$boxShadowHsl},0.05)'), 0 0 8px unquote('hsla(#{$boxShadowHsl},0.05)') !default;

// ----- COLORS -----
$switchTrackBgColor:                     $neutralColor2 !default;
$switchTrackBorderColor:                 $neutralColor7 !default;
$switchThumbBgColor:                     $neutralColor1 !default; // #ffffff
$switchThumbBorderColor:                 $neutralColor9 !default;

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

// HOVER OFF
$switchThumbHeightHover: $switchContainerHeight * 1.0968 !default; // 34px
$switchThumbWidthHover: $switchThumbHeightHover !default;
$switchThumbBorderWidthHover: $switchThumbBorderWidth !default;
// ----- COLORS -----
$switchTrackBgColorHover:                $switchTrackBgColor !default;
$switchThumbBgColorHover:                $brandColorLight5 !default;
$switchThumbBorderColorHover:            $brandColorLight2 !default;
// HOVER ON
$switchThumbHeightSelectedHover:         $switchThumbHeightHover !default;
$switchThumbWidthSelectedHover:          $switchThumbHeightHover !default;
$switchThumbBorderWidthSelectedHover:    $switchThumbBorderWidthHover !default;
$switchTrackBorderColorHover:            $switchTrackBorderColor !default;
// ----- COLORS -----
$switchTrackBgColorSelectedHover:        $brandColor !default; // #0572ce
$switchTrackBorderColorSelectedHover:    $switchTrackBgColorSelectedHover !default; // #0572ce
$switchThumbBgColorSelectedHover:        $switchThumbBgColorHover !default; // #daeaf8
$switchThumbBorderColorSelectedHover:    $switchThumbBorderColorHover !default; // #c1d0df

// ACTIVE OFF
$switchThumbHeightActive:                 $switchThumbHeightHover !default;
$switchThumbWidthActive:                  $switchThumbHeightHover !default;
$switchThumbBorderWidthActive:            $switchThumbBorderWidthHover !default;
$switchTrackBorderColorActive:            $switchTrackBorderColor !default;

// ----- COLORS -----
$switchTrackBgColorActive:                $switchTrackBgColor !default;
$switchThumbBgColorActive:                $switchThumbBgColorHover !default; // #daeaf8
$switchThumbBorderColorActive:            $switchThumbBorderColorHover !default; // #c1d0df

// ACTIVE ON
$switchThumbHeightSelectedActive:         $switchThumbHeightHover !default;
$switchThumbWidthSelectedActive:          $switchThumbHeightHover !default;
$switchThumbBorderWidthSelectedActive:    $switchThumbBorderWidthHover !default;
// ----- COLORS -----
$switchTrackBgColorSelectedActive:        $switchTrackBgColorSelectedHover !default; // #0572ce
$switchTrackBorderColorSelectedActive:    $switchTrackBorderColorSelectedHover !default; // #0572ce
$switchThumbBgColorSelectedActive:        $switchThumbBgColorSelectedHover !default; // #daeaf8
$switchThumbBorderColorSelectedActive:    $switchThumbBorderColorSelectedHover !default; // #c1d0df

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

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

// DISABLED OFF
$switchThumbHeightDisabled: $switchThumbHeight !default;
$switchThumbWidthDisabled: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorDisabled:              $switchTrackBgColor !default;
$switchThumbBgColorDisabled:              $switchThumbBgColor !default; // #ffffff
$switchThumbBorderColorDisabled:          $switchThumbBorderColor !default; // #cfcfcf
$switchTrackBorderColorDisabled:          $switchTrackBorderColor !default;

// DISABLED ON
$switchThumbHeightSelectedDisabled: $switchThumbHeight !default;
$switchThumbWidthSelectedDisabled: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorSelectedDisabled:     $brandColor !default; // #0572ce
$switchTrackBorderColorSelectedDisabled: $switchTrackBgColorSelectedDisabled !default; // #0572ce
$switchThumbBgColorSelectedDisabled:     $neutralColor1 !default; // #ffffff
$switchThumbBorderColorSelectedDisabled: $switchThumbBgColorSelectedDisabled !default;


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

// FILM STRIP
//-----------------------------------------------------------------------------

//hover
$filmStripOverflowIndicatorHeight: 1.8125rem !default; // 29px when root is 16px


// CONVEYOR BELT
//----------------------------------------------------------------

//hover
$conveyorBeltOverflowIndicatorHeight: 1.8125rem !default; // 29px when root is 16px


// NAVIGATION LIST
//----------------------------------------
$navigationListItemLabelColorDefault:                      $secondaryTextColor !default;
$navigationListItemIconColorDefault:                       $navigationListItemLabelColorDefault !default;
$navigationListCollapsibleIconColorDefault:                $navigationListItemLabelColorDefault !default;
$navigationListItemBorderColorHover:                       $brandColorLight1 !default;
$navigationListItemBgColorHover:                           $neutralColor7 !default;
$navigationListItemIconColorHover:                         $brandColorLight1 !default;
$navigationListItemIconColorSelected:                      $brandColor !default;
$navigationListItemBgColorSelected:                        $neutralColor4 !default;
$navigationListItemLabelColorDisabled:                     $navigationListItemLabelColorDefault !default;
$navigationListIconColorDisabled:                          $navigationListItemLabelColorDefault !default;
//Contrast
$navigationListItemContrastLabelColorDefault:              $neutralColor9 !default;
$navigationListItemContrastLabelColorDisabled:             $navigationListItemContrastLabelColorDefault !default;

//Sizing
$navigationListItemStartEndPadding:                           oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$navigationListIconOnlyIconStartEndPadding:                   10px !default;
$navigationListHorizontalIconOnlyItemMargin:                  0 !default;
$navigationListHorizontalItemBorderWidth:                     0  !default;
$navigationListHorizontalMinHeight:                           oj-px-to-rem(44px, $baseFontSize: 16px)  !default;
$navigationListHorizontalStackedIconMinHeight:                oj-px-to-rem(49px, $baseFontSize: 16px)  !default;
$navigationListHorizontalFontSize:                            oj-px-to-rem(10px, $baseFontSize: 16px)  !default;
$navigationListHorizontalItemPadding:                         0 $navigationListItemStartEndPadding 0 !default;
$navigationListHorizontalIconMargin:                          5px 4px 4px;
$navigationListHorizontalItemIconColorSelected:               $brandColor !default;
$navigationListHorizontalItemContrastLabelColorSelected:      $textColor3 !default;
$navigationListHorizontalItemContrastBgColorSelected:         $neutralColor1 !default;

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

// END of NavigationList variables

// NAVIGATION TABS
//----------------------------------------
$tabBarVerticalItemSeparatorColor:                          $brandColor !default;

$tabBarItemIconColorSelected:                       $neutralColor1 !default;
//Default
$tabBarItemLabelColorDefault:                       $linkTextColor !default;
$tabBarItemIconColorDefault:                        $tabBarItemLabelColorDefault !default;
$tabBarItemBorderColor:                             $brandColor !default;
//Hover
$tabBarItemBorderColorHover:                        $brandColorLight1 !default;
$tabBarItemBgColorHover:                            $neutralColor7 !default;
$tabBarItemIconColorHover:                          $brandColorLight1 !default;
//Selected
$tabBarItemBorderColorSelected:                     $brandColor !default;
$tabBarItemBgColorSelected:                         $brandColor !default;
$tabBarItemLabelColorSelected:                      $contrastTextColor !default;
//$tabBarItemIconColorSelected:                       $contrastTextColor !default;
$tabBarIconOnlyIconColorSelected:                   $neutralColor1 !default;
//Active
$tabBarItemBgColorActive:                           $brandColorLight3 !default;
//Disabled
$tabBarItemLabelColorDisabled:                      $tabBarItemLabelColorDefault !default;
$tabBarIconColorDisabled:                           $tabBarItemLabelColorDisabled !default;
//Contrast
$tabBarItemContrastLabelColorDefault:               $neutralColor9 !default;
$tabBarItemContrastLabelColorHover:                 $neutralColor3 !default;
$tabBarItemContrastLabelColorSelected:              $neutralColor3 !default;
$tabBarItemContrastLabelColorDisabled:              $tabBarItemContrastLabelColorDefault !default;
//Sizing
$tabBarItemStartEndPadding:                         oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$tabBarVerticalIconOnlyIconStartEndPadding:         10px !default;
$tabBarItemBorderRadius:                            4px !default;

$tabBarVerticalItemBorderWidth:                     1px !default;
$tabBarVerticalIconOnlyItemBorderWidth:             1px !default;
$tabBarVerticalItemMinHeight:                       oj-px-to-rem(28px, $baseFontSize: 16px)  !default;
$tabBarVerticalItemFontSize:                        oj-px-to-rem(13px, $baseFontSize: 16px)  !default;
$tabBarVerticalItemLabelTextAlign:                  center !default;

//Horizontal
$tabBarHorizontalItemBorderColor:                     $brandColor !default;
$tabBarHorizontalItemBorderColorSelected:             $brandColor !default;
$tabBarHorizontalIconOnlyItemMargin:                  0 !default;
$tabBarHorizontalItemPadding:                         0 $tabBarItemStartEndPadding 0 !default;
$tabBarHorizontalIconMargin:                          5px 4px 4px;

$tabBarHorizontalItemBorderWidth:                     1px 1px 1px 1px !default;
$tabBarHorizontalIconOnlyItemBorderWidth:             1px 1px 1px 1px !default;
$tabBarHorizontalItemFontSize:                        oj-px-to-rem(13px, $baseFontSize: 16px)  !default;
$tabBarHorizontalItemStackedIconMinHeight:            oj-px-to-rem(63px, $baseFontSize: 16px)  !default;
$tabBarHorizontalItemMinHeight:                       oj-px-to-rem(29px, $baseFontSize: 16px)  !default;
$tabBarHorizontalItemWidthDistribution:               even !default;

$tabBarItemContrastBgColorSelected:                   $brandColor !default;
$tabBarHorizontalItemContrastBgColorSelected:         $tabBarItemContrastBgColorSelected !default;
$tabBarHorizontalItemContrastLabelColorSelected:      $neutralColor3 !default;
// END of NavigationTabs variables

// PROGRESS
//----------------------------------------------------------------
$progressBarHeight:                      2px !default;
$progressBarBgColor:                     $neutralColor8 !default;
$progressBarBorderRadius:                1px !default;

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

// LISTVIEW
//----------------------------------------------------------------
$listViewHeaderBorderWidth:          0 !default;
$listViewHeaderBorderWidthCollapsed: 0 0 1px !default;
$listViewHeaderFontSize:             $header4FontSize !default;
$listViewHeaderFontWeight:           bold !default;
$listViewDrillIconColor:             $neutralColor11 !default;
$listViewItemBorderPosition:         .5rem !default;

// DATAGRID
//----------------------------------------------------------------
$collectionBorderColor:                       $neutralColor7 !default;
$collectionBgColor:                           $neutralColor1 !default;
$collectionCellBorderColor:                   $neutralColor8 !default;
// Headers
$collectionHeaderTextColor:                   $headerTextColor !default;
$collectionHeaderFontSize:                    $smallFontSize !default;
$collectionHeaderBgColor:                     $neutralColor1 !default;
// Headers - Hover
$collectionHeaderBgColorHover:                $neutralColor4 !default;
$collectionHeaderBgColorFocus:                $brandColorLight3 !default;
// Headers - Selected
$collectionHeaderBgColorSelected:             $brandColorLight2 !default;
// Cells
$collectionCellPadding:                       oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$collectionCellFontSize:                      inherit !default;
$collectionCellJustifyContent:                center !default;
// Cells - Hover
$collectionCellBgColorHover:                  $neutralColor3 !default;
// Cells - Selected
$collectionCellBgColorSelected:               $neutralColor8 !default;
$collectionCellBorderColorSelected:           $neutralColor11 !default;
// Cells - Selected Inactive (selected but focus outside the component)
$collectionCellBgColorSelectedInactive:       $neutralColor8 !default;
$collectionCellBorderColorSelectedInactive:   $neutralColor11 !default;

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

// INDEXER
//----------------------------------------------------------------
// item width
$indexerItemWidth:      	32px !default;
// text color of prefix
$indexerTextColor:      	$brandColorDark1 !default;
$indexerTextColorDisabled:      $brandColorDark1 !default;

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

// width of the selector 
$selectorWidth:                      22px !default;
// height of the selector 
$selectorHeight:                     22px !default;
// margin of the selector 
$selectorMargin:                     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;

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

$conveyorBeltArrowVisibilityOptionDefault: visible !default;

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