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


// This is the variable file for the Oracle Alta Android 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: android !default; // targets the android 5 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.
//----------------------------------------------------------------

// background colors
//----------------------------------
$contrastBackground1Color:  $neutralColor15 !default;

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

// font
//----------------------------------
// http://www.google.com/design/spec/style/typography.html#typography-styles
$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(34px, $baseFontSize: 16px) !default;


// text colors
//----------------------------------
$formControlLabelColor:     $textColor3 !default;
$secondaryTextColor:        $textColor5 !default;
$tertiaryTextColor:         $secondaryTextColor !default;
$textColorDisabled:         $textColor7 !default;
$textColor:                 $textColor1 !default;
$headerTextColor:           $secondaryTextColor !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;

// border radius
//----------------------------------
$smallBorderRadius:  2px !default;
$mediumBorderRadius: 2px !default;
$largeBorderRadius:  3px !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:           coverUp     !default;
$animationNavParentDefault:          revealDown  !default;
$animationNavSiblingEarlierDefault:  pushEnd     !default;
$animationNavSiblingLaterDefault:    pushStart   !default;


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




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

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

// POPUP
//----------------------------------------------------------------
$popupBorderRadius: 0 !default;

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

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

$messagesGeneralOverlayMinWidth:          614px !default;
$messagesGeneralOverlayMaxWidth:          1536px !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;
$messageGeneralOverlayHeaderBgColor:      $neutralColor4 !default;
$messageGeneralOverlayBodyBgColor:        $neutralColor4 !default;

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

$messageNotificationOverlayHeaderBgColor: $neutralColor4 !default;
$messageNotificationOverlayBodyBgColor:   $neutralColor4 !default;

$messageCategoryFontSize:                 oj-px-to-rem(12px, $baseFontSize: 16px) !default;
$messageTimeFontSize:                     oj-px-to-rem(12px, $baseFontSize: 16px) !default;
$messageSummaryFontSize:                  oj-px-to-rem(14px, $baseFontSize: 16px) !default;
$messageSummaryFontWeight:                400 !default;
$messageSummaryLineHeight:                1.1 !default;
$messageDetailFontSize:                   oj-px-to-rem(14px, $baseFontSize: 16px) !default;
$messageDetailLineHeight:                 1.1 !default;


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



// HEADERS
//----------------------------------------------------------------
$header5FontSize:       $smallFontSize   !default;
$header6FontSize:       $smallFontSize   !default;
$headerFontWeight:      500 !default;
$headerBgColor:         $neutralColor6 !default;

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


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

// Controls whether "swipe down to dismiss" is supported for sheet menus.
// Note that this only applies to swipes starting on the menu, since any touch
// outside the menu will dismiss, regardless of whether it turns into a swipe.
// Valid values are "dismiss" and "none".
$menuSheetSwipeDownBehavior: "dismiss" !default;

// 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(14px, $baseFontSize: 16px) !default; // Per UX, decrease 16px spec value by 2px, so looks like 16px in UX's screen measuring tool

// 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.
// Unlike iOS, the Android spec clearly shows the 4px of spacing ((32-24)/2) NOT being a part of the margin, which is 16px in Android.
$menuIconToEdgePadding:               oj-px-to-rem(20px, $baseFontSize: 16px) !default;
$menuTextToIconPadding:               oj-px-to-rem(18px, $baseFontSize: 16px) !default; // Per UX, decrease 20px spec value by 2px, so looks like 20px in UX's screen measuring tool

// 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.  Per UX, decrease the 16px to 11px, to make it
// look like 16px in UX's screen measuring tool.  This is partly due to the fact that the submenu caret doesn't extend to the edge of the icon canvas.
$menuSubmenuIconPadding:              oj-px-to-rem(11px, $baseFontSize: 16px) !default;


// menu parts
//----------------------------------
// menus (.oj-menu), whether top-level or submenu
$menuBorderRadius:                    1px !default;
$menuPadding:                         oj-px-to-rem(8px, $baseFontSize: 16px) !default;

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

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

// focused menu items (.oj-focus) and their ancestor menu items (.oj-focus-ancestor)
$menuItemBgColorFocus:                $neutralColor5 !default;
$menuItemBorderColorFocus:            $neutralColor11 !default; // TODO: dataGrid uses this color too, but no Android global var for it.  Should there be one?

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

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

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

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

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

// focused sheet menu items (.oj-focus)
$menuSheetItemBorderColorFocus:       transparent !default;


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

$buttonFontWeight:   500 !default; // per MDN, medium is roughly 500
$buttonBorderRadius: $mediumBorderRadius !default; // 2px
// inherit $buttonCursor: default from Common

// we set button and form control heights to the same value so they will line up nicely
$buttonHeight:       oj-px-to-rem(36px, $baseFontSize: 16px) !default;
$buttonSmallHeight:  1.5rem !default;
$buttonLargeHeight:  2.875rem !default;
$buttonXlargeHeight: 3.25rem !default;

$buttonFontSize:       1.125rem !default;
$buttonSmallFontSize:  $buttonFontSize !default; // 14px when root 16px
$buttonLargeFontSize:  1.25rem !default;
$buttonXlargeFontSize: 1.375rem !default; // not spec'd.  In AltaWeb is 2px bigger than large, so go with 22px since Android large is 20px.


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

// Horiz space between text and edge of button when no intervening icon.
$buttonTextToEdgePadding:       oj-px-to-rem(8px, $baseFontSize: 16px) !default;
$buttonSmallTextToEdgePadding:  $buttonTextToEdgePadding !default;
$buttonLargeTextToEdgePadding:  oj-px-to-rem(16px, $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:  oj-px-to-rem(12px, $baseFontSize: 16px) !default;
$buttonXlargeIconToTextPadding: oj-px-to-rem(10px, $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(8px, $baseFontSize: 16px) !default;
$buttonLargeIconToEdgePadding:  oj-px-to-rem(12px, $baseFontSize: 16px) !default;
$buttonXlargeIconToEdgePadding: oj-px-to-rem(16px, $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:                   $brandColorDark1 !default;
$buttonTextColor:                 $contrastTextColor !default;
$buttonIconColor:                 $buttonTextColor !default;
$buttonBorderColor:               $buttonBgColor!default;
$buttonBgImage:                   none !default;
$buttonTextShadow:                none !default;
$buttonBoxShadow:                 0 1px 3px unquote('hsla(#{$boxShadowHsl},0.4)') !default;

// hover
$buttonBgColorHover:              $brandColorLight1  !default;
$buttonTextColorHover:            $buttonTextColor !default;

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

$buttonBorderColorHover:          $buttonBgColorHover !default;

// active
$buttonTextColorActive:           $buttonTextColor !default;

// selected
$buttonBgColorSelected:           $brandColorDark2   !default;

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

// disabled
$buttonTextColorDisabled:         $textColorDisabled !default;
$buttonBgColorDisabled:           $neutralColor9 !default;
$buttonBoxShadowDisabled:         $buttonBoxShadow !default;
$buttonIconColorDisabled:         $buttonTextColorDisabled !default;

// disabled and selected
// No "selected and disabled" spec, so arbitrarily inherit all from Common.


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

// [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
$buttonHalfChromeFontWeight:              $buttonFontWeight !default;

// half chrome default
$buttonHalfChromeTextColor:               $buttonBgColor !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:       $textColorDisabled !default;
$buttonHalfChromeIconColorDisabled:       $buttonHalfChromeTextColorDisabled !default;

// half chrome disabled and selected

// outlined
$buttonOutlinedChromeInternalBorderColor:          $neutralColor9 !default;

// outlined default

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

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

// outlined selected

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

// outlined disabled

// outlined disabled and selected


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

//Divider
$dividerMargin: 0.5rem;

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

$dialogHeaderPadding:       oj-px-to-rem(24px, $baseFontSize: 16px) oj-px-to-rem(24px, $baseFontSize: 16px) oj-px-to-rem(5px, $baseFontSize: 16px) !default;
$dialogBodyPadding:         oj-px-to-rem(5px, $baseFontSize: 16px) oj-px-to-rem(24px, $baseFontSize: 16px) oj-px-to-rem(20px, $baseFontSize: 16px) !default;
$dialogFooterPadding:       oj-px-to-rem(8px, $baseFontSize: 16px) oj-px-to-rem(8px, $baseFontSize: 16px) oj-px-to-rem(4px, $baseFontSize: 16px) !default;

$dialogHeaderFontSize:      oj-px-to-rem(19px, $baseFontSize: 16px) !default;
$dialogHeaderTextColor:     $textColor !default;
$dialogHeaderBgColor:       transparent !default;

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


// FORM CONTROLS
//----------------------------------------------------------------
// controls the height of an input
$formControlTriggerHeight: oj-px-to-rem(32px, $baseFontSize: 16px) !default;
$formControlInputHeight:   oj-px-to-rem(28px, $baseFontSize: 16px) !default;

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

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

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

// form control states
//----------------------------------
// default
$formControlBgColor:                    transparent !default;
$formControlBorderColor:                $neutralColor11 !default;

// active
$formControlTriggerBgColorActive:       $neutralColor8 !default;

// focus
$formControlInputBorderWidthFocus:      0 0 2px 0           !default;
$formControlInputBorderColorFocus:      $brandColor  !default;

// readonly
$formControlFontWeightReadOnly:         bold !default;

// disabled
$formControlBgColorDisabled:            transparent !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:   $smallestFontSize !default;
$formControlLabelRequiredChar: "" !default;

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

// gutter (padding) between the inline label and the control
$formControlLabelInlineGutter:     1rem !default;


// form layout
//----------------------------------
// outer border
$formLayoutBorderColor:  $neutralColor7 !default;
// divider between rows
$formLayoutDividerColor: $neutralColor8 !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
//----------------------------------------------------------------
// common
$textAreaLineHeight:                  1.2 !default;


// disabled
$inputTextBorderStyleDisabled:        dotted !default;
// INPUT DATE
$inputDateTimeConverterYearOptionDefault: 2-digit !default;
$inputDateTimeShowPickerOnDesktopOptionDefault: enabled !default;
//INPUT SEARCH
//--------------------------------------------------------------
$inputSearchIconPosition: start !default; // Possible values are 'start' and 'end'
$inputSearchIconPadding: 0 8px 0 0 !default;

// INPUT NUMBER
// the spacing between the input and the buttonset
$inputNumberInputToButtonMargin: 16px !default;
//up and down button width
$inputNumberButtonWidth: 50px;

// RADIOSET AND CHECKBOXSET
// Android has input rendered as a background image and label comes before the image

$radioCheckboxLabelPosition: start !default;
$radioCheckboxRowHeight: 3rem !default;

// spacing between edge and the label text
$radioCheckboxLabelToEdgePadding: 16px !default;
// spacing between input image and edge.
// this is zero because 16px margin is built into the image itself.
$radioCheckboxInputToEdgePadding: 0 !default;
// spacing between input image and label text.
// this is zero because 16px margin is built into the image itself.
$radioCheckboxInputToLabelPadding: 0 !default;
$ojprivateRadioCheckboxMessagePadding: 0 !default;

// states
//
// default
$radioCheckboxSetBorderColor:         $neutralColor7 !default;
$radioCheckboxItemDividerColor:       $neutralColor8 !default;
$radioCheckboxSetBgColor:             $neutralColor4 !default;
// active
$radioCheckboxItemDividerColorActive: $neutralColor11 !default;

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

// options
$selectRenderModeOptionDefault: native !default;

// arrow
$selectArrowColor:              $iconColorDefault !default;

// picker
$selectPickerBgColor:           $neutralColor1 !default;

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

//
// Android Slider:
//   - Circular thumbs
//   - Large Active thumbs (larger than enabled thumbs).
//   - Thumbs without borders (except disabled thumb has a bg border)
//

// Android slider has a 12 px 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:               12px !default;

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

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

// colors for disabled state
$sliderThumbBgColorDisabled:     $neutralColor9 !default;
$sliderThumbBorderColorDisabled: $neutralColor1 !default;
$sliderBarBgColorDisabled:       $sliderBarBgColor !default;
$sliderBarValueBgColorDisabled:  $sliderBarBgColorDisabled !default;

// SWITCH
//----------------------------------------------------------------
// CONTAINER HEIGHT/WIDTH
$switchContainerHeight: $formControlTriggerHeight !default; // 2rem = 32px when base font 16px
$switchContainerWidth: $formControlTriggerHeight !default;

// TRACK HEIGHT/WIDTH
$switchTrackHeight: $switchContainerHeight * 0.4375 !default; // 14px
$switchTrackWidth: $switchContainerHeight * 1.125 !default; // 36px

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

// THUMB BORDERS
$switchThumbBorderWidth: $switchTrackBorderWidth !default;
$switchThumbBorderWidthReadonly: $switchTrackBorderWidthReadonly !default;

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

// ----- COLORS -----
$switchTrackBgColor:                     $neutralColor12  !default;
$switchThumbBgColor:                     $neutralColor5 !default;
$switchTrackBorderColor:                 $switchTrackBgColor !default; // #939393
$switchThumbBorderColor:                 $switchThumbBgColor !default; // #f1f1f1

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

// HOVER OFF
$switchThumbHeightHover: $switchContainerHeight * 1.5 !default; // 48px
$switchThumbWidthHover: $switchThumbHeightHover !default;
$switchThumbBorderWidthHover: $switchContainerHeight * 0.4375 !default; // 14px
// ----- COLORS -----
$switchTrackBgColorHover:                $switchTrackBgColor !default; // #939393
$switchTrackBorderColorHover:            $switchTrackBgColorHover !default; // #939393
$switchThumbBgColorHover:                $switchThumbBgColor !default; // #f1f1f1
$switchThumbBorderColorHover:            $neutralColor8  !default;

// HOVER ON
$switchThumbHeightSelectedHover: $switchThumbHeightHover !default;
$switchThumbWidthSelectedHover: $switchThumbHeightHover !default;
$switchThumbBorderWidthSelectedHover: $switchThumbBorderWidthHover !default;
// ----- COLORS -----
$switchTrackBgColorSelectedHover:        $brandColor !default; // #0572ce
$switchTrackBorderColorSelectedHover:    $switchTrackBgColorSelectedHover !default; // #0572ce
$switchThumbBgColorSelectedHover:        $switchTrackBgColorSelectedHover !default; // #0572ce
$switchThumbBorderColorSelectedHover:    $brandColorLight3  !default; // #c4e4ff

// ACTIVE OFF
$switchThumbHeightActive: $switchThumbHeightHover !default;
$switchThumbWidthActive: $switchThumbWidthHover !default;
$switchThumbBorderWidthActive: $switchThumbBorderWidthHover !default;
// ----- COLORS -----
$switchTrackBgColorActive:                $switchTrackBgColorHover !default; // #939393
$switchTrackBorderColorActive:            $switchTrackBorderColorHover !default; // #939393
$switchThumbBgColorActive:                $switchThumbBgColorHover !default; // #f1f1f1
$switchThumbBorderColorActive:            $switchThumbBorderColorHover !default; // #c4c4c5

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

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

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

// DISABLED OFF
$switchThumbHeightDisabled: $switchThumbHeight !default;
$switchThumbWidthDisabled: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorDisabled:             $neutralColor11 !default;
$switchThumbBgColorDisabled:             $neutralColor13 !default;
$switchTrackBorderColorDisabled:         $switchTrackBgColorDisabled !default;
$switchThumbBorderColorDisabled:         $switchThumbBgColorDisabled !default;

// DISABLED ON
$switchThumbHeightSelectedDisabled: $switchThumbHeight !default;
$switchThumbWidthSelectedDisabled: $switchThumbHeight !default;
// ----- COLORS -----
$switchTrackBgColorSelectedDisabled:     $switchTrackBgColorDisabled !default;
$switchTrackBorderColorSelectedDisabled: $switchTrackBgColorSelectedDisabled !default;
$switchThumbBgColorSelectedDisabled:     $switchThumbBgColorDisabled !default;
$switchThumbBorderColorSelectedDisabled: $switchThumbBgColorSelectedDisabled !default; // #bdbdbd

// NAVIGATION LIST
//----------------------------------------

//sizing
$navigationListItemAccentBorderWidth:                         3px !default;
$navigationListItemStartEndPadding:                           oj-px-to-rem(10px, $baseFontSize: 16px) !default;

$navigationListHorizontalItemPadding:                         2px $navigationListItemStartEndPadding 6px !default;
$navigationListHorizontalFontSize:                            oj-px-to-rem(12px, $baseFontSize: 16px)  !default;
$navigationListHorizontalMinHeight:                           oj-px-to-rem(56px, $baseFontSize: 16px) !default;
$navigationListHorizontalItemBorderWidth:                     0 !default;

$navigationListHorizontalStackedIconMinHeight:                oj-px-to-rem(56px, $baseFontSize: 16px)  !default;
$navigationListHorizontalStackedItemPadding:                  1px $navigationListItemStartEndPadding 0 !default;

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

$navigationListPointerUpAnimation:                            (effect: "ripple") !default;
$navigationListItemLabelColorSelected:                        $brandColorDark1 !default;
$navigationListHorizontalItemLabelColorSelected:              $brandColorDark1 !default;
// END of NavigationList variables

// NAVIGATIONTABS
//----------------------------------------
//Default
$tabBarItemIconColorDefault:                          $formControlLabelColor !default;
$tabBarItemLabelColorDefault:                         $formControlLabelColor !default;
//Selected
$tabBarItemBgColorSelected:                           transparent !default;
$tabBarItemLabelColorSelected:                        $brandColorDark1 !default;
//Active
$tabBarItemBgColorActive:                             $neutralColor4 !default;
$tabBarItemBorderColorActive:                         $iconColorHover !default;

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

$tabBarVerticalItemBorderWidth:                       0 0 1px 2px !default;
$tabBarVerticalItemMinHeight:                         oj-px-to-rem(47px, $baseFontSize: 16px)  !default;
$tabBarVerticalItemFontSize:                          oj-px-to-rem(14px, $baseFontSize: 16px)  !default;
$tabBarVerticalItemSeparatorColor:                    $neutralColor7 !default;
$tabBarVerticalItemLabelTextAlign:                    center !default;

$tabBarHorizontalItemPadding:                         2px $tabBarItemStartEndPadding 6px !default;
$tabBarHorizontalStackedItemPadding:                  1px $tabBarItemStartEndPadding 0 !default;

$tabBarHorizontalItemBorderWidth:                     0 0 2px 0 !default;
$tabBarHorizontalItemFontSize:                        oj-px-to-rem(14px, $baseFontSize: 16px)  !default;
$tabBarHorizontalItemStackedIconMinHeight:            oj-px-to-rem(48px, $baseFontSize: 16px)  !default;
$tabBarHorizontalItemMinHeight:                       oj-px-to-rem(48px, $baseFontSize: 16px)  !default;
$tabBarHorizontalIconOnlyItemBorderWidth:             $tabBarHorizontalItemBorderWidth !default;

$tabBarPointerUpAnimation:                            (effect: "ripple") !default;

// PROGRESS
//----------------------------------------------------------------
$progressBarHeight:                       8px !default;
$progressBarBgColor:                      $brandColorLight2 !default;

$progressCircleIndeterminateOverlayImage: $imageDir + "spinner_full_default.gif" !default;

// LISTVIEW
//----------------------------------------------------------------
$listViewHeaderBorderWidth:          0 !default;
$listViewHeaderBorderWidthCollapsed: 0 0 1px !default;
// the right and left margins will be flipped in rtl languanges
$listViewCardMargin:         8px 8px 0 0 !default;
$listViewHeaderFontSize:     $header5FontSize !default;
$listViewPointerUpAnimation: (effect: "ripple") !default;

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

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


// DATAGRID
//----------------------------------------------------------------
$collectionBorderColor:                       $neutralColor8 !default;
$collectionBgColor:                           $neutralColor1 !default;

// Headers
$collectionHeaderTextColor:                   $headerTextColor !default;
$collectionHeaderFontSize:                    $smallestFontSize !default;
$collectionHeaderBgColor:                     $neutralColor1 !default;
// Headers - Hover
$collectionHeaderBgColorHover:                $neutralColor8 !default;
$collectionHeaderBgColorFocus:                $brandColorLight2  !default;

$collectionHeaderBgColorSelectedInactive:     $neutralColor5 !default;
$collectionHeaderBgColorDrag:                 $brandColorLight4 !default;
$collectionHeaderDragImageBorderColor:        $neutralColor10 !default;

// Headers - Selected
$collectionHeaderBgColorSelected:             $neutralColor9  !default;

// Cells
$collectionCellPadding:                       oj-px-to-rem(8px, $baseFontSize: 16px) !default;
$collectionCellFontSize:                      oj-px-to-rem(13px, $baseFontSize: 16px) !default;
// Cells - Hover
$collectionCellBgColor:                       $neutralColor1 !default;
$collectionCellTextColor:                     $textColor  !default;
$collectionCellBgColorHover:                  $neutralColor5  !default;
$collectionCellBorderColorSelected:           $neutralColor11  !default;
// Cells - Selected
$collectionCellBgColorSelected:               $neutralColor8 !default;
// Cells - Selected Inactive (selected but focus outside the component)
$collectionCellBgColorSelectedInactive:       $collectionCellBgColorSelected !default;
$collectionCellBorderColorSelectedInactive:   $collectionCellBorderColorSelected !default;
$collectionStatusBgColor:                     $collectionCellBgColor !default;
// Rows - Height is now dependent on the default form control height
$collectionRowHeight:                         max($formControlInputHeight, oj-px-to-rem(47px, $baseFontSize: 16px)) !default;
$collectionHeaderHeight:                      oj-px-to-rem(55px, $baseFontSize: 16px) !default;
$collectionColumnWidth:                       oj-px-to-rem(68px, $baseFontSize: 16px) !default;

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

// APPLICATION LAYOUT - MOBILE PATTERN VARIABLES
//-------------------------------------------------------------
// Padding
$appLayoutHybridPadding: 1rem !default;
// Header
$appLayoutHybridHeaderMinHeight: 56px !default;
$appLayoutHybridHeaderBoxShadow: 0 1px 3px unquote('hsla(#{$boxShadowHsl},0.3)') !default;
$appLayoutHybridHeaderTitleFontSize: oj-px-to-rem(20px, $baseFontSize: 16px) !default;
$appLayoutHybridHeaderBorderColor: $neutralColor8 !default;
// Footer
$appLayoutHybridFooterBorderColor: $appLayoutHybridHeaderBorderColor !default;
// Nav Bar
$appLayoutHybridNavBarBoxShadow: 0 -10px 10px unquote('hsla(#{$boxShadowHsl},0.05)') !default;

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

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

// File Picker
//----------------------------------------------------------------
$filePickerBgColorActive:           $brandColorLight5 !default;
$filePickerPadding:               22.333333px !default;

//=================================================================
// default
$buttonTextColorDisabled:           $textColorDisabled !default;
$buttonInternalBorderColor:         $neutralColor10 !default;
// active
$buttonBgColorActive:               $brandColorDark1  !default;
// selected disabled
$buttonTextColorSelectedDisabled:   $neutralColor3 !default;
$buttonBgColorSelectedDisabled:     $neutralColor10  !default;

// nav list
$navigationListItemContrastLabelColorDefault:     $neutralColor10 !default;
$navigationListItemContrastLabelColorHover:       $neutralColor3 !default;
$navigationListItemContrastBgColorHover:          $neutralColor16 !default;
$navigationListItemContrastLabelColorSelected:    $neutralColor3 !default;
$navigationListItemContrastBgColorSelected:       $neutralColor16 !default;
$navigationListItemContrastLabelColorDisabled:    $neutralColor13 !default;

$tabBarItemContrastLabelColorDefault:             $neutralColor10 !default;
$tabBarItemContrastLabelColorHover:               $neutralColor3 !default;
$tabBarItemContrastBgColorHover:                  $neutralColor16 !default;
$tabBarItemContrastLabelColorSelected:            $neutralColor3 !default;
$tabBarItemContrastLabelColorDisabled:            $neutralColor13 !default;
$tabBarHorizontalItemContrastLabelColorSelected:  $neutralColor3 !default;
//=================================================================
//=================================================================

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

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