@import "../utilities/oj.utilities.urls";
@import "../utilities/oj.utilities.math";
@import "../utilities/oj.utilities.units";
@import "../utilities/oj.utilities.modules";
@import "../utilities/oj.utilities.theming.vars";
@import "../utilities/oj.utilities.json";

//-----------------------------------------------------------------------------
// Variable Naming Conventions
//
// JET variable names are camel cased and use the structure
// <widget><Element><Property><State>.
//
//   - widget:
//        usually this is the component or pattern name,
//        for example 'dataGrid'.
//   - element (optional):
//        usually this is a subsection of the component,
//        for example 'Cell' or 'Header'.
//   - property:
//        for example 'BgColor', 'BorderColor', 'TextColor', etc.
//   - state (optional):
//        for example 'Hover', 'Active', 'Selected', 'Disabled', etc.
//
//
// This gives you variable names like $buttonHeight, $sliderThumbWidth,
// $collectionCellBgColorHover, $treeNodeBorderColorSelected, etc.
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// The variables in the file are (imperfectly) organized in some categories
// - LOGISTICAL:
//       these variables are about logistical things like
//       the path to your image directory or the text direction.
// - PERFORMANCE:
//       these variables let you include only the css
//       for things you are using.
// - PALETTE:
//       these can be thought of as the color palette for the
//       application. These variables are not used directly
//       in the widget files, rather they are referred to by
//       other variables.
// - TEXT:
//       these variables control text appearance and are
//       broadly used in the widget specific files. There
//       may be widget specific text variables that override
//       or refer to these variables.
// - GENERAL:
//       these variables are used to set general theme properties
//       like drag and drop colors, border radius defaults,
//       animation duration defaults, etc. These variables
//       are broadly used in the widget specific files.
// - WIDGET:
//       these variables are widget (or widget group)
//       specific, for example button or form control variables.
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
//  LOGISTICAL VARIABLES
//       these variables are about logistical things like
//       the path to your image directory or the text direction.
//-----------------------------------------------------------------------------

//$themeName:           alta !default;
//$themeTargetPlatform: android !default; // targets the android 5 look and feel

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

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

// path to (icon) fonts
//$fontDir: "fonts/" !default;

// path to common images (images shared across themes)
//$commonImageDir: "../common/images/" !default;

// DIRECTION
//----------------------------------

// Accepted values of $textDirection are null, ltr, rtl
//    - null means ouput for both directions (default)
//    - ltr means output left to right only
//    - rtl means output right to left only
//
// By default we support right to left without
// switching out the css file as long as dir="rtl"
// is set on the html tag. However if you'd prefer
// to generate one css file per direction you can
// also set "$textDirection" to either "rtl" or "ltr".
//$textDirection: null !default;

// COMPATIBILITY
//----------------------------------

// when $allowTagSelectors is true JET directly styles certain tags like
// <p> <a> <h1>, etc. However for developers trying to mix JET with other
// technologies styling these tags directly could cause issues on other parts of the page.
// In that case set $allowTagSelectors: false;.
// See the "compatibility" section of the theming documentation for more information
//$allowTagSelectors: true !default;

// INITIAL VISIBILITY
//----------------------------------

// when $initialVisiblity is hidden then visibility: hidden is set on the dom until the
// component is initialized. This reduces the unstyled dom seen by the user during page load.
//$initialVisibility: hidden !default;

//-----------------------------------------------------------------------------
//  PERFORMANCE VARIABLES
//       these variables let you include only the css
//       for things you are using.
//-----------------------------------------------------------------------------

// INCLUDES
//-----------------------------------------------------------------------------

// Optimize performance by only including the css
// for what you're using. It's recommended to
// set $includeAllClasses to false and then set
// $include[XYZ]Classes to true for each thing you're using.
// for example:
//    $includeAllClasses: false;
//    $includeButtonClasses: true;
//    $includePanelClasses: true;
//    etc

//$includeAllClasses: true !default;
//$includeNormalize: ($includeAllClasses and $allowTagSelectors) !default;

// send down value of $responsiveQuery[size] so that these
// can be used with oj.ResponsiveUtils.getFrameworkQuery();
//$includeResponsiveMediaQueryClasses: $includeAllClasses !default;

// Make our key variable values available as css variables.
// See $oj-css-var-map for the variables included.
// This can be useful for customers who want to use things like the
// current theme's colors and font sizes without using sass.
// However as of 10/14/16 css vars are not supported on
// all our supported platforms, so when using css vars
// fallback values must be used.
//$includeCssVarDefinitions: $includeAllClasses !default;

// group includes
//----------------------------------

// whether to include classes for tags like headers, links, etc
//$includeTagClasses: $includeAllClasses !default;

// whether to include dvt classes
//$includeDvtClasses: $includeAllClasses !default;

// whether to include form control classes
//$includeFormControlClasses: $includeAllClasses !default;

// widget includes
//----------------------------------

// form controls
//$includeCheckboxsetClasses: $includeFormControlClasses !default;
//$includeComboboxClasses: $includeFormControlClasses !default;
//$includeSelectSingleClasses: $includeFormControlClasses !default;
//$includeInputDateTimeClasses: $includeFormControlClasses !default;
//$includeInputNumberClasses: $includeFormControlClasses !default;
//$includeInputPasswordClasses: $includeFormControlClasses !default;
//$includeInputTextClasses: $includeFormControlClasses !default;
//$includeInputSearchClasses: $includeFormControlClasses !default;
//$includeLabelClasses: $includeFormControlClasses !default;
//$includeRadiosetClasses: $includeFormControlClasses !default;
//$includeSelectClasses: $includeFormControlClasses !default;
//$includeSliderClasses: $includeFormControlClasses !default;
//$includeSwitchClasses: $includeFormControlClasses !default;
//$includeColorPaletteClasses: $includeFormControlClasses !default;
//$includeColorSpectrumClasses: $includeFormControlClasses !default;
//$includeTextAreaClasses: $includeFormControlClasses !default;
//$includeValidationGroupClasses: $includeFormControlClasses !default;
// This is used by oj-form-layout custom element
//$includeFormLayoutElementClasses: $includeFormControlClasses !default;
//$includeLabelValueClasses: $includeFormControlClasses !default;
// Mostly used by form controls. Need the 'or' to work with
// both form control and Non form control components
//$includeOptionClasses: $includeFormControlClasses or $includeAllClasses !default;
//$includeHighlightTextClasses: $includeFormControlClasses or $includeAllClasses !default;

// dvt
//$includeChartClasses: $includeDvtClasses !default;
//$includeDiagramClasses: $includeDvtClasses !default;
//$includeGanttClasses: $includeDvtClasses !default;
//$includeGaugeClasses: $includeDvtClasses !default;
//$includeNBoxClasses: $includeDvtClasses !default;
//$includePictoChartClasses: $includeDvtClasses !default;
//$includeSunburstClasses: $includeDvtClasses !default;
//$includeTagCloudClasses: $includeDvtClasses !default;
//$includeThematicMapClasses: $includeDvtClasses !default;
//$includeTimeAxisClasses: $includeDvtClasses !default;
//$includeTimelineClasses: $includeDvtClasses !default;
//$includeTreemapClasses: $includeDvtClasses !default;

// other
//$includeAccordionClasses: $includeAllClasses !default;
//$includeActionCardClasses: $includeAllClasses !default;
//$includeAnimationClasses: $includeAllClasses !default;
//$includeAppLayoutClasses: $includeAllClasses !default;
//$includeAppLayoutHybridClasses: $includeAllClasses !default;
//$includeAppLayoutWebClasses: $includeAllClasses !default;
//$includeAvatarClasses: $includeAllClasses !default;
//$includeButtonClasses: $includeAllClasses !default;
//$includeButtonsetClasses: $includeAllClasses !default;
//$includeCollapsibleClasses: $includeAllClasses !default;
//$includeConveyorBeltClasses: $includeAllClasses !default;
//$includeDataGridClasses: $includeAllClasses !default;
//$includeDialogClasses: $includeAllClasses !default;
//$includeFilePickerClasses: $includeAllClasses !default;
//$includeFilmStripClasses: $includeAllClasses !default;
//$includeFlexClasses: $includeAllClasses !default;
//$includeMessageClasses: $includeAllClasses !default;
//$includeMessagesClasses: $includeAllClasses !default;
// This is used by the CSS based form layout approach
//$includeFormLayoutClasses: $includeAllClasses !default;
//$includeGridClasses: $includeAllClasses !default;
//$includeIconCircleClasses: $includeAllClasses !default;
//$includeIndexerClasses: $includeAllClasses !default;
//$includeListViewClasses: $includeAllClasses !default;
//$includeMasonryClasses: $includeAllClasses !default;
//$includeMasonryLayoutClasses: $includeAllClasses !default;
//$includeMenuClasses: $includeAllClasses !default;
//$includeMenuSelectManyClasses: $includeAllClasses !default;
//$includeMessagingClasses: $includeAllClasses !default;
//$includeModuleClasses: $includeAllClasses !default;
//$includeNavigationListClasses: $includeAllClasses !default;
//$includeTabBarClasses: $includeAllClasses !default;
//$includeOffcanvasClasses: $includeAllClasses !default;
//$includePagingControlClasses: $includeAllClasses !default;
//$includePanelClasses: $includeAllClasses !default;
//$includePopupClasses: $includeAllClasses !default;
//$includeProgressClasses: $includeAllClasses !default;
//$includeProgressListClasses: $includeAllClasses !default;
//$includeResponsiveHelperClasses: $includeAllClasses !default;
//$includeRefresherClasses: $includeAllClasses !default;
//$includeRowExpanderClasses: $includeAllClasses !default;
//$includeStreamListClasses: $includeAllClasses !default;
//$includeSwipeActionsClasses: $includeAllClasses !default;
//$includeSwipeToRevealClasses: $includeAllClasses !default;
//$includeSwitcherClasses: $includeAllClasses !default;
//$includeTableClasses: $includeAllClasses !default;
//$includeTabsClasses: $includeAllClasses !default;
//$includeUtilitiesClasses: $includeAllClasses !default; // for generic spacing and text classes
//$includeToolbarClasses: $includeAllClasses !default;
//$includeTrainClasses: $includeAllClasses !default;
//$includeTreeClasses: $includeAllClasses !default;
//$includeTreeViewClasses: $includeAllClasses !default;
//$includeWaterfallLayoutClasses: $includeAllClasses !default;
//$includeSelectorClasses: $includeAllClasses !default;

//-----------------------------------------------------------------------------
// PALETTE VARIABLES:
//      these can be thought of as the color palette for the
//      application. These variables are not used directly
//      in the widget files, rather they are referred to by
//      other variables.
//  BRANDING RAMP:
//      a progressive set of colors generated by tinting
//      (mixture of a color with white) and shading
//      (mixture of a color with black) a primary brand color ($brandColor).
//      In the Oracle look and feel the branding colors are blue.
//      In JET 5.0 $brandColor is the new Alta blue #027bc7 and the
//      ramp consists of a family of blue colors.
//  NEUTRAL RAMP:
//      A progressive set of neutral colors based on the same
//      hue ($neutralHue) and saturation ($neutralSaturation),
//      but varied levels of lightness. In the Oracle look and
//      feel the neutral colors are gray.
//-----------------------------------------------------------------------------

//  BRAND COLOR CONFIG:
//$brandColor:           #027bc7 !default;
//  NEUTRAL COLOR CONFIG:
//$neutralHue:           203 !default;
//$neutralSaturation:    2% !default;

//$brandColorLight5:     mix(white, $brandColor, 91) !default;
//$brandColorLight4:     mix(white, $brandColor, 88) !default;
//$brandColorLight3:     mix(white, $brandColor, 84) !default;
//$brandColorLight2:     mix(white, $brandColor, 70) !default;
//$brandColorLight1:     mix(white, $brandColor, 46) !default;
//$brandColorDark1:      mix(black, $brandColor, 20) !default;
//$brandColorDark2:      mix(black, $brandColor, 40) !default;

//$neutralColor1:   hsl($neutralHue, $neutralSaturation, 100%) !default;
//$neutralColor2:   hsl($neutralHue, $neutralSaturation, 99%) !default;
//$neutralColor3:   hsl($neutralHue, $neutralSaturation, 98%) !default;
//$neutralColor4:   hsl($neutralHue, $neutralSaturation, 97%) !default;
//$neutralColor5:   hsl($neutralHue, $neutralSaturation, 95%) !default;
//$neutralColor6:   hsl($neutralHue, $neutralSaturation, 93%) !default;
//$neutralColor7:   hsl($neutralHue, $neutralSaturation, 90%) !default;
//$neutralColor8:   hsl($neutralHue, $neutralSaturation, 88%) !default;
//$neutralColor9:   hsl($neutralHue, $neutralSaturation, 80%) !default;
//$neutralColor10:  hsl($neutralHue, $neutralSaturation, 78%) !default;
//$neutralColor11:  hsl($neutralHue, $neutralSaturation, 70%) !default;
//$neutralColor12:  hsl($neutralHue, $neutralSaturation, 55%) !default;
//$neutralColor13:  hsl($neutralHue, $neutralSaturation, 45%) !default;
//$neutralColor14:  hsl($neutralHue, $neutralSaturation, 30%) !default;
//$neutralColor15:  hsl($neutralHue, $neutralSaturation, 20%) !default;
//$neutralColor16:  hsl($neutralHue, $neutralSaturation, 15%) !default;
//$neutralColor17:  hsl($neutralHue, $neutralSaturation, 0%) !default;

//$accentColorHighlight1:    #d9f4fa !default;
//$accentColorHighlight2:    #c2eaf3 !default;

//$accentColorDanger1:       #fcf3f4 !default;
//$accentColorDanger2:       #f8d3d6 !default;
//$accentColorDanger3:       #e65a66 !default;
//$accentColorDanger4:       #de2333 !default;
//$accentColorDanger5:       #ba0006 !default;

//$accentColorAttention1:    #fef5e4 !default;
//$accentColorAttention2:    #fce7c1 !default;
//$accentColorAttention3:    #f8ca75 !default;
//$accentColorAttention4:    #f6b846 !default;
//$accentColorAttention5:    #bf552e !default;

//$accentColorInfo1:         #e9f4f8 !default;
//$accentColorInfo2:         #cae4ef !default;
//$accentColorInfo3:         #80bfd9 !default;
//$accentColorInfo4:         #2b94bf !default;
//$accentColorInfo5:         #0574a1 !default;

//$accentColorConfirmation1: #ecf5e7 !default;
//$accentColorConfirmation2: #d9eacf !default;
//$accentColorConfirmation3: #b3d69f !default;
//$accentColorConfirmation4: #81ba5f !default;
//$accentColorConfirmation5: #008230 !default;

// DVT Colors
//$accentColorDvt1:          #237bb1 !default;
//$accentColorDvt2:          #68c182 !default;
//$accentColorDvt3:          #fad55c !default;
//$accentColorDvt4:          #ed6647 !default;
//$accentColorDvt5:          #8561c8 !default;
//$accentColorDvt6:          #6ddbdb !default;
//$accentColorDvt7:          #ffb54d !default;
//$accentColorDvt8:          #e371b2 !default;
//$accentColorDvt9:          #47bdef !default;
//$accentColorDvt10:         #a2bf39 !default;
//$accentColorDvt11:         #a75dba !default;
//$accentColorDvt12:         #f7f37b !default;

// Text colors
//$textColorBase: #000;
//$textColor1: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 1) !default;
//$textColor2: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 0.85) !default;
//$textColor3: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 0.8) !default;
//$textColor4: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 0.7) !default;
//$textColor5: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 0.6) !default;
//$textColor6: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 0.55) !default;
//$textColor7: hsla(hue($textColorBase), saturation($textColorBase), lightness($textColorBase), 0.38) !default;

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

//DIVIDER

//$dividerMargin: 0.5rem;

//-----------------------------------------------------------------------------
// TEXT VARIABLES
//       these variables control text appearance and are
//       broadly used in the widget specific files. There
//       may be widget specific text variables that override
//       or refer to these variables.
//-----------------------------------------------------------------------------

// To target popular system fonts consider using the following for $fontFamily
//    system, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
//
// An informative article (with even more system fonts)
//       https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
// Discussion of more abstract way of declaring the system font
//       https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
//
// Details:
//   * -apple-system
//       targets San Francisco on Mac and ios systems that support it.
//       https://webkit.org/blog/3709/using-the-system-font-in-web-content/
//       http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
//   * BlinkMacSystemFont
//       targets San Francisco for Chrome on Mac OS X.
//   * Segoe UI
//       targets Windows and Windows Phone.
//   * Helvetica Neue
//       targets iOS pre-iOS9 and Mac OS X pre-El Capitan.
//   * Arial
//       targets Roboto on Android
//       https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
//       https://developer.android.com/about/versions/android-4.1.html   (look for 'font')
//   * sans-serif
//       is the default sans-serif fallback font.
//
//$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;

// currently browsers may or may not load font
// weights other than bold and normal and even when
// they do font weight can be inconsistent across
// browsers on the same platform. For example
// using Segoe UI on windows a particular font weight can
// look different on Chrome, IE, and FF.
//
// some known local system fonts like Segoe UI (windows),
// Helvetica Neue (iOS/mac), and Roboto (Arial on Android)
// can be normalized using @font-face
// so that the weights are consistent across
// browsers running on the same platform.
//
// When $fontWeightNormalization is set to true we look at
// the $fontFamily var to see if one of the known local system
// fonts might be used and if so attempt to normalize the font weights
//$fontWeightNormalization: false !default;

// font size

// $rootFontSize is only used on the html element
// in order to support using rem units.
//
// If you have $allowTagSelectors set to false you can
// use the class oj-html to get the JET html tag styling.
// If you are not generating classes for the html element in JET
// you can still use rem's if you can set the font size on
// the html element with your own class or inline style.
//
// The browser default font size is 16px
//$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 -
//    these variables are used broadly
//    in the widget files
//----------------------------------
//$textColor:                 $textColor1 !default;
//$primaryTextColor:          $textColor1 !default;
//$secondaryTextColor:        $textColor5 !default;
//$tertiaryTextColor:         $secondaryTextColor !default;
//$contrastTextColor:         $neutralColor1 !default;
//$textColorDisabled:         $textColor7 !default;
//$textColorError: $accentColorDanger5 !default;

//$formControlLabelColor:     $textColor3 !default;

//$headerTextColor:           $secondaryTextColor !default;

//$linkTextColor:             $brandColorDark1 !default;
//$linkTextColorActive: $linkTextColor !default;
//$linkTextColorVisited:      $linkTextColor !default;
// note that $opacityDisabled is
// used for a disabled link in addition to color
//$linkTextColorDisabled:     $textColorDisabled !default;

//-----------------------------------------------------------------------------
// GENERAL VARIABLES
//       these variables are used to set general theme properties
//       like icon and drag and drop colors, border radius defaults,
//       animation duration defaults, etc. These variables
//       are broadly in the widget specific files.
//-----------------------------------------------------------------------------

// icon colors
//----------------------------------
// these are used to control the color of icon font icons
//$iconColor:                 $textColor !default;
// colors for clickable icons below
//$iconColorDefault:          $textColor1 !default;
//$iconColorHover:            $brandColorLight1 !default;
//$iconColorActive:           $brandColor !default;
//$iconColorSelected:         $iconColorActive !default;
// note that $opacityDisabled is
// used for a disabled icon in addition to color
//$iconColorDisabled:         $neutralColor9 !default;

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

// border color
//----------------------------------
//$borderColorError: $accentColorDanger3 !default;
//$borderColorWarning: $accentColorAttention3 !default;

// drag and drop
//----------------------------------
//$dropTarget1Color: $accentColorHighlight1 !default;
//$dropTarget2Color: $accentColorHighlight2 !default;
//$dropTargetLineColor: $brandColor !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;

// // overlay
// //----------------------------------
// // this is used for something like a modal dialog to overlay the
// // rest of the screen, indicating it's not reachable
//$overlayBgColor: unquote("hsl(#{$boxShadowHsl})") !default;
//$overlayOpacity: 0.5 !default;

// z-index hierarchy
//----------------------------------
//$defaultZindex: 1 !default;

// Used for fixed application shell elements like headers or nav bars
//$appLayoutFixedZindex: 100 !default;

// Used for offcanvas overlay mode
//$offcanvasZindex: 200 !default;

// ojDialog port from jquery resizable.  Assigned to resize grippers on the dialogs corners and edges.
//$resizableZindex: 900 !default;

// ojPopup option tail=none and popups used to collect immediate feedback: inputdatatime, menu, listbox (ojSelect, ojCombobox, ojSelect2)
//$popupZindex: 1000 !default;

//$dialogZindex: 1050 !default;

//$messagesZindex: 2000 !default;

// ojPopup option tail=simple
//$popupTailZindex: 1030 !default;

// wrappable
//----------------------------------
// this margin is needed so that if components are laid out
// next to one another and wrap onto a new line there is
// some vertical space between the "rows". For example when
// several buttons are laid out next to each other on a small screen
// some may wrap onto a new line, this puts some space
// between these buttons.
//$wrappableMarginBottom: 4px !default;

// general padding and margin
//----------------------------------
// these are general variables to separate
// content on the page, for example panels.
// They are generally used to set margin or padding
//$spacingSmall: 5px !default;
//$spacingMedium: 10px !default;
//$spacingLarge: 20px !default;

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

// animation
//----------------------------------
//$animationDurationShort: 0.25s !default;
//$animationDurationMedium: 0.4s !default;
//$animationDurationLong: 0.5s !default;
//$animationEffectRippleBgColor: $neutralColor12 !default;
// Default animation types for the oj.ModuleAnimations.navChild, navParent,
// navSiblingEarlier, and navSiblingLater implementations,
// which can be specified on the "animation" option of ojModule binding.
// These variables can be overriden in theme files to provide different
// animation types.  Valid values are the names of specific animation
// implementations in oj.ModuleAnimations such as coverStart, coverUp,
// revealEnd, revealDown, zoomIn, zoomOut.
//$animationNavChildDefault:           coverUp     !default;
//$animationNavParentDefault:          revealDown  !default;
//$animationNavSiblingEarlierDefault:  pushEnd     !default;
//$animationNavSiblingLaterDefault:    pushStart   !default;

// focus
//----------------------------------
// This variable is applicable to components and patterns that use the oj-focus-highlight class
// and do not have a component- or pattern-specific mechanism for controlling when it is applied.
//
// The oj-focus-highlight class applies focus styling that may not be desirable
// when the focus results from pointer interaction (touch or mouse), but which is
// needed for accessibility when the focus occurs by a non-pointer mechanism, for
// example keyboard or initial page load.
//
// The 3 valid values of this variable indicate for which focuses the class should be applied:
//
// - "nonPointer": the class is applied only for focuses not resulting from pointer
//   (mouse or touch) interaction.
// - "all": the class is applied for all focuses.
// - "none": the class is never applied. This value is not accessible by itself, and is
//   intended for use when the application wishes to use its own event listener to precisely
//   control when the class is applied.  The application must ensure the accessibility of the result.
//$focusHighlightPolicy: nonPointer !default;

// loading indicator
//------------------------------------
// Duration in ms before showing load indicator
// Currently this is used by collection components such as datagrid, table, listview
// but is generally applicable in places where loading indicator is used
//$loadingIndicatorDelayDuration: "250" !default;

//$loadingBgImage: linear-gradient(
//  90deg,
//  $neutralColor6 0%,
//  $neutralColor3 10%,
//  $neutralColor6 20%
//) !default;
//
////-----------------------------------------------------------------------------
//// GRID LAYOUT and RESPONSIVE
////       these variables are for responsive layouts.
////-----------------------------------------------------------------------------
//
//// grid layout
////-----------------------------------------------------------------------------
//
//// the number of columns in the grid system, a number divisible by 2, 3, and 4 is preferred
//// in order to easily get columns that take up 50%, 33.3%, or 25% of the screen.
//$gridTotalColumns: 12 !default;
//
//// responsive screen sizes
////----------------------------------
//// In some apps it may be preferable to change
//// these values to rems instead of pixels.
////
//// For pixel values here is some helpful info on device sizes:
//// http://www.mydevice.io/devices/
//$screenSmallRange: 0, 767.9px !default;
//$screenMediumRange: 768px, 1023.9px !default;
//$screenLargeRange: 1024px, 1280.9px !default;
//$screenXlargeRange: 1281px, null !default;
//
//// responsive media queries
////----------------------------------
//
//// You will see "print" on some media queries below.
//// By default printing portrait is treated as a medium screen and
//// printing landscape is treated as a large screen.
//
//// the $responsiveQueryXYZ variables can be set to 'none' if
//// you don't want to render a particular set of classes,
//// for example if you don't want xlarge classes you could set:
////    $screenLargeRange:          1024px, null !default;
////    $screenXlargeRange:         none;
////    $responsiveQueryLargeOnly:  none;
////    $responsiveQueryXlargeUp:   none;
//
//$responsiveQuerySmallUp: "print, screen" !default;
//$responsiveQuerySmallOnly: "screen and (max-width: #{upper-bound($screenSmallRange)})" !default;
//
//$responsiveQueryMediumUp: "print, screen and (min-width: #{lower-bound($screenMediumRange)})" !default;
//$responsiveQueryMediumOnly: "print and (orientation: portrait), screen and (min-width: #{lower-bound($screenMediumRange)}) and (max-width: #{upper-bound($screenMediumRange)})" !default;
//$responsiveQueryMediumDown: "print and (orientation: portrait), screen and (max-width: #{upper-bound($screenMediumRange)})" !default;
//
//$responsiveQueryLargeUp: "print and (orientation: landscape), screen and (min-width: #{lower-bound($screenLargeRange)})" !default;
//$responsiveQueryLargeOnly: "print and (orientation: landscape), screen and (min-width: #{lower-bound($screenLargeRange)}) and (max-width: #{upper-bound($screenLargeRange)})" !default;
//$responsiveQueryLargeDown: "print and (orientation: landscape), screen and (max-width: #{upper-bound($screenLargeRange)})" !default;
//
//$responsiveQueryXlargeUp: "screen and (min-width: #{lower-bound($screenXlargeRange)})" !default;
//
//// by default there is no xxl screen range variable.
//// to add support for an xxl range you can do something like
//// the following in your settings file :
////
////     @import "../utilities/oj.utilities.math"; // change the path to where the utilities directory is
////     $screenXlargeRange:          1281px, 1440px;
////     $screenXXlargeRange:         1441px, null;
////     $responsiveQueryXlargeOnly:  "screen and (min-width: #{lower-bound($screenXlargeRange)}) and (max-width: #{upper-bound($screenXlargeRange)})";
////     $responsiveQueryXlargeDown:  "screen and (max-width: #{upper-bound($screenXlargeRange)})";
////     $responsiveQueryXXlargeUp:   "screen and (min-width: #{lower-bound($screenXXlargeRange)})";
//$responsiveQueryXlargeOnly: null !default;
//$responsiveQueryXlargeDown: null !default;
//$responsiveQueryXXlargeUp: null !default;
//
//// by default the print query is set to null,
//// to generate print classes change the value to "print"
//$responsiveQueryPrint: null !default;
//
//// the default point at which we consider a screen a high resolution
//// (or retina) display.
////
//// The value is set to 1.5 because as of 2014 there's a lot
//// of Android devices out there that are half-way between the
//// legacy screen resolutions and retina (aka "xhdpi" in Google's terminology)
//// they use a 1.5 factor so the default device pixel ratio is 1.5
////
//// NOTE: in order to allow stand alone use of these utility mixins
//// this variable is also defined in _oj.utilities.icons.scss.
//// Because of the !default, the actual value will be the value
//// in the file loaded first.
//$highResolutionDevicePixelRatio: 1.5 !default;
//
//// Note: you'll see "screen and .." in the media queries above.
//// we wanted to do something like
////     "(not print) and (min-width: #{$screen-xlarge})",
//// However that doesn't seem to be supported, the "not" negates the entire query.
//// So we're forced to enumerate the media types we do want to
//// support instead of exclude the ones we don't. Hence the use of
//// "screen and ..."
//
//// optimizations: variables for defaulting whether certain types of
//// responsive helper classes are generated
////
//// $responsiveGenerateHide:                  generate classes like .oj-md-hide
//// $responsiveGenerateSpacing:               generate classes like .oj-md-padding and oj-md-margin
//// $responsiveGenerateTextAlignEnd:          generate classes like .oj-md-text-align-end
//// $responsiveGenerateFloatStart:            generate classes like .oj-md-float-start
//// $responsiveGenerateFloatEnd:              generate classes like .oj-md-float-end
//$responsiveGenerateHide: true !default;
//$responsiveGenerateSpacing: true !default;
//$responsiveGenerateTextAlignEnd: true !default;
//$responsiveGenerateFloatStart: true !default;
//$responsiveGenerateFloatEnd: true !default;
//
////-----------------------------------------------------------------------------
//// WIDGET VARIABLES
////       these variables are widget (or widget group)
////       specific, for example button or form control variables.
////-----------------------------------------------------------------------------
//
//// BODY
////-----------------------------------------------------------------------------
//// to override an existing background image use $bodyBgImage: none;
//$bodyBgImage: none !default;
//$bodyBgColor: $neutralColor1 !default;
//$bodyTextColor: $textColor !default;
//
//// Platforms that support double-tap-to-zoom typically impose a ~300ms
//// delay between a user tap and the resulting click event, to avoid firing
//// a click for taps that turn into double-taps.  This makes apps feel
//// sluggish.  The solution is to eliminate double-tap-to-zoom.  Two commonly
//// recommended ways to do this are to place this tag on the page:
//// <meta name="viewport" content="width=device-width">
//// and to use "touch-action: manipulation", which JET places on the body
//// via this variable.  JET recommends doing both, since not all platforms
//// (fully) support the tag.
//$bodyTouchAction: manipulation !default;
//
//// LINK
////-----------------------------------------------------------------------------
//// link text color defined in "text colors" section, look for "$linkTextColor"
//$linkTextDecoration:      none !default;
//$linkTextDecorationHover: none !default;
//$linkFontWeightActive: normal !default;
//$linkBgColorActive:       $neutralColor9 !default;
//
//// PANEL
////-----------------------------------------------------------------------------
//
//// panel defaults:
//$panelPadding: 0.5rem !default;
//$panelBgColor: $neutralColor1 !default;
//$panelBorderColor: $neutralColor8 !default;
//$panelBorderColorSelected: $brandColor !default;
//$panelBorderRadius: $smallBorderRadius !default;
//
//// panel alternatives
//
//// using these adjustments panels can choose to
//// consistently determine their border colors by changing
//// the saturation/lightness of their background colors
//$panelBorderColorSaturationAdjustment: 5% !default;
//$panelBorderColorLightnessAdjustment: -5% !default;
//
//$panel1BgColor: $neutralColor5 !default;
//$panel1BorderColor: $neutralColor9 !default;
//
//$panel2BgColor: #dae9f5 !default;
//$panel2BorderColor: #aed8fa !default;
//
//$panel3BgColor: #fef9e8 !default;
//$panel3BorderColor: adjust-color(
//  $panel3BgColor,
//  $lightness: $panelBorderColorLightnessAdjustment,
//  $saturation: $panelBorderColorSaturationAdjustment
//) !default;
//
//$panel4BgColor: #ffe4e1 !default;
//
//// NOTE: we should be using adjust color for $panel4BorderColor like we do for $panel3BorderColor,
//// but unfortunately we're using libsass and the output on windows and linux is not the
//// same which is causing test failures, so hard coding this border color for now.
//// See libsass issue https://github.com/sass/libsass/issues/1554
//$panel4BorderColor: #ffcdc8 !default;
//
//$panel5BgColor: $neutralColor6 !default;
//$panel5BorderColor: $neutralColor9 !default;
//
//// HEADERS
////-----------------------------------------------------------------------------
//// header text color defined in "text colors" section, look for "$headerTextColor"
//$headerBorderColor: $neutralColor7 !default;
//
//// $headerFontWeight is applied to all headers and
//// is also used by components like dialog, chart etc.
//$headerFontWeight:      500 !default;
//
//// $header[1|2|3|4|5]FontWeight vars can be used
//// to override the default font weight, they are
//// applied to h[1|2|3|4|5] tags
//$header1FontWeight: $headerFontWeight !default;
//$header2FontWeight: $headerFontWeight !default;
//$header3FontWeight: $headerFontWeight !default;
//$header4FontWeight: $headerFontWeight !default;
//$header5FontWeight: $headerFontWeight !default;
//$header6FontWeight: $headerFontWeight !default;
//
//// $header[1|2|3|4|5]FontSize vars are
//// applied to h[1|2|3|4|5] tags
//$header1FontSize: $largestFontSize !default;
//$header2FontSize: $largeFontSize !default;
//$header3FontSize: $mediumFontSize !default;
//$header4FontSize: $fontSize !default;
//$header5FontSize:       $smallFontSize   !default;
//$header6FontSize:       $smallFontSize   !default;
//
//// the background variables below are for a header "container",
//// like the title bar of a dialog or an accordion header
//$headerBgColor:         $neutralColor6 !default;
//$headerBgColorDisabled: $neutralColor3 !default;
//$headerBgImage: none !default;
//
//// WINDOW
////-----------------------------------------------------------------------------
//$windowBorderColor:       $neutralColor10 !default;
//$windowBorderWidth:       1px !default;
//$windowBgColor: $neutralColor1 !default;
//
//// NOTE WINDOW
////-----------------------------------------------------------------------------
//$popupTailBorderColor: $windowBorderColor !default;
//$popupTailBorderWidth: $windowBorderWidth !default;
//$popupTailBgcolor: $windowBgColor !default;
//$popupTailBoxShadow: $smallBoxShadow !default;
//
//// tail width and height
//$popupTailSimpleWidth: 14px !default;
//$popupTailSimpleHeight: 14px !default;
//
//// To avoid strip unit function these 3 raw values added for popup svg calc.
//$popupTailBorderWidthRawValue: oj-strip-unit($popupTailBorderWidth) !default;
//$popupTailSimpleWidthRawValue: oj-strip-unit($popupTailSimpleWidth) !default;
//$popupTailSimpleHeightRawValue: oj-strip-unit($popupTailSimpleHeight) !default;
//
//// animation theme defaults
//$popupTailOpenAnimation: (
//  effect: "zoomIn",
//  transformOrigin: "#myPosition"
//) !default;
//$popupTailCloseAnimation: (
//  effect: "none"
//) !default;
//
//// POPUP
////-----------------------------------------------------------------------------
//// popups are sometimes called a "dropdown" or "inline selector"
//$popupBorderColor: $windowBorderColor !default;
//$popupBorderWidth: $windowBorderWidth !default;
//$popupBgColor: $neutralColor1 !default;
//$popupBorderRadius: 0 !default;
//$popupBoxShadow: $smallBoxShadow !default;
//
//// Placeholder for theme specific popup modality option override.
//$popupModalityOptionDefault: modal !default;
//
//// animation theme defaults
//$popupOpenAnimation: (
//  (
//    effect: "zoomIn",
//    transformOrigin: "#myPosition"
//  ),
//  "fadeIn"
//) !default;
//$popupCloseAnimation: (
//  (
//    effect: "zoomOut",
//    transformOrigin: "#myPosition"
//  ),
//  "fadeOut"
//) !default;
//
//// MESSAGES / MESSAGE
////----------------------------------
//
//// The following variables apply on styles for the oj-messages parent that has display type set
////  to 'general' with position specified.
//
//// Note that in case of smaller screen width (< 768px wide) the messages container stretches full
////  width, and in this case the following *Width/*MinWidth/*MaxWidth variables do not take effect.
//$messagesGeneralOverlayWidth: 60vw !default;
//$messagesGeneralOverlayMinWidth:          614px !default;
//$messagesGeneralOverlayMaxWidth:          1536px !default;
//$messagesGeneralOverlayBorderStyle: solid !default;
//$messagesGeneralOverlayBorderWidth: 0 !default;
//$messagesGeneralOverlayBorderColor: initial !default;
//$messagesGeneralOverlayBorderRadius:      $smallBorderRadius !default;
//$messagesGeneralOverlayBoxShadow:         $smallBoxShadow !default;
//
//// Variable to override the default position of oj-messages container
//$messagesGeneralOverlayPositionOptionDefault: (
//  my: (
//    horizontal: "center",
//    vertical: "top"
//  ),
//  at: (
//    horizontal: "center",
//    vertical: "top"
//  ),
//  of: "window",
//  collision: "none"
//) !default;
//
//// The following variables apply on individual oj-message when its oj-messages parent has display
////  type set to 'general' with position specified.
//
//// Specifies margin used for separating / spacing between two successive message boxes
//$messageGeneralOverlaySeparatorMargin:    0 !default;
//$messageGeneralOverlayBorderStyle: solid !default;
//$messageGeneralOverlayBorderWidth:        0 0 $windowBorderWidth 0 !default;
//$messageGeneralOverlayBorderColor:        $neutralColor9 !default;
//$messageGeneralOverlayBorderRadius:       null !default;
//$messageGeneralOverlayBoxShadow:          null !default;
//$messageGeneralOverlayHeaderBgColor:      $neutralColor4 !default;
//$messageGeneralOverlayBodyBgColor:        $neutralColor4 !default;
//
//// Variables to override the default animation of individual oj-message.
//$messageGeneralOverlayOpenAnimation: (
//  effect: "expand",
//  duration: "300ms"
//) !default;
//$messageGeneralOverlayCloseAnimation: (
//  effect: "collapse",
//  duration: "300ms"
//) !default;
//
//// The following variables apply on styles for the oj-messages parent that has display type set
////  to 'notification' with position specified.
//
//$messagesNotificationOverlayWidth: 30vw !default;
//$messagesNotificationOverlayMinWidth:     307px !default;
//$messagesNotificationOverlayMaxWidth:     768px !default;
//$messagesNotificationOverlayBorderStyle: solid !default;
//$messagesNotificationOverlayBorderWidth: 0 !default;
//$messagesNotificationOverlayBorderColor: initial !default;
//$messagesNotificationOverlayBorderRadius: initial !default;
//$messagesNotificationOverlayBoxShadow: initial !default;
//$messagesNotificationOverlayPositionOptionDefault: (
//  my: (
//    horizontal: "end",
//    vertical: "top"
//  ),
//  at: (
//    horizontal: "end",
//    vertical: "top"
//  ),
//  of: "window",
//  collision: "none"
//) !default;
//
//// The following variables apply on individual oj-message when its oj-messages parent has display
////  type set to 'notification' with position specified.
//
//// Specifies margin used for separating / spacing between two successive message boxes
//$messageNotificationOverlaySeparatorMargin: 8px !default;
//$messageNotificationOverlayBorderStyle: solid !default;
//$messageNotificationOverlayBorderWidth: 0 !default;
//$messageNotificationOverlayBorderColor: initial !default;
//$messageNotificationOverlayBorderRadius: $smallBorderRadius !default;
//$messageNotificationOverlayBoxShadow: $smallBoxShadow !default;
//$messageNotificationOverlayHeaderBgColor: $neutralColor4 !default;
//$messageNotificationOverlayBodyBgColor:   $neutralColor4 !default;
//$messageNotificationOverlayOpenAnimation: (
//  effect: "slideIn",
//  duration: "300ms"
//) !default;
//$messageNotificationOverlayCloseAnimation: (
//  effect: "slideOut",
//  duration: "300ms",
//  direction: "end"
//) !default;
//
//// The following variables apply on individual oj-message when its oj-messages parent does not have
////  position specified (general inline layout).
//
//$messageGeneralInlineBorderStyle: solid !default;
//$messageGeneralInlineBorderWidth: 0 0 $windowBorderWidth 0 !default;
//$messageGeneralInlineBorderColor: $neutralColor9 !default;
//
//// The following variables apply on styles for the messages displayed inline to form components.
//
//// We want to keep the background colors as they are in the UX spec and not
//// derive them from border colors since bg colors need to pass high contrast
//// mode - that is, the bg color needs to be light enough
//// so the text on them can be read easily.
//$messageComponentInlineBorderRadius: 0 !default;
//$messageComponentInlineMarginTop: 0 !default;
//$messageComponentInlineBorderTopWidth: 0 !default;
//$messageComponentInlineBorderColorLightnessAdjustment: 4% !default;
//$messageComponentInlineBgColorError: $accentColorDanger1 !default;
//$messageComponentInlineBorderColorError: $accentColorDanger2 !default;
//$messageComponentInlineBgColorWarning: $accentColorAttention1 !default;
//$messageComponentInlineBorderColorWarning: $accentColorAttention2 !default;
//$messageComponentInlineBgColorConfirmation: $accentColorConfirmation1 !default;
//$messageComponentInlineBorderColorConfirmation: $accentColorConfirmation2 !default;
//$messageComponentInlineBgColorInfo: $accentColorInfo1 !default;
//$messageComponentInlineBorderColorInfo: $accentColorInfo2 !default;
//$messageComponentInlineOpenAnimation: (
//  effect: "expand",
//  startMaxHeight: "#oldHeight"
//) !default;
//$messageComponentInlineCloseAnimation: (
//  effect: "collapse",
//  endMaxHeight: "#newHeight"
//) !default;
//
//// The following variables apply to individual oj-message regardless of the display type and
////  position of its oj-message parent
//$messageHeaderHeight: auto !default;
//// valid values for messageCloseIconDisplay are none and block
//$messageCloseIconDisplay: block !default;
//$messageAutoTimeoutCloseIconDisplay: none !default;
//$messageCategoryTextColor: $secondaryTextColor !default;
//$messageCategoryFontSize:                 oj-px-to-rem(12px, $baseFontSize: 16px) !default;
//$messageCategoryFontWeight: 700 !default;
//$messageTimeTextColor: $secondaryTextColor !default;
//$messageTimeFontSize:                     oj-px-to-rem(12px, $baseFontSize: 16px) !default;
//$messageSummaryTextColor: $primaryTextColor !default;
//$messageSummaryFontSize:                  oj-px-to-rem(14px, $baseFontSize: 16px) !default;
//$messageSummaryFontWeight:                400 !default;
//$messageSummaryLineHeight:                1.1 !default;
//$messageDetailTextColor: $secondaryTextColor !default;
//$messageDetailFontSize:                   oj-px-to-rem(14px, $baseFontSize: 16px) !default;
//$messageDetailLineHeight:                 1.1 !default;
//
//// Variable to override the default auto-timeout attribute of individual message
//$messageAutoTimeoutOptionDefault: 4000 !default;
//
//// APPLICATION LAYOUT - SHARED
////-------------------------------------------------------------
//// Offcanvas
//$appLayoutOffcanvasWidth: 90% !default;
//$appLayoutOffcanvasMaxWidth: 320px !default;
//
//// APPLICATION LAYOUT - WEB
////-------------------------------------------------------------
//// $appLayoutMaxWidth is the maximum width an application is designed for.
//// While monitors can be very large, many applications are not designed
//// to be infinitely wide. This variable is used to set the max-width property on
//// the oj-web-applayout-max-width class which can be used to restrict the maximum
//// width on any element. When the screen is larger than $appLayoutMaxWidth,
//// elements using oj-web-applayout-max-width will have empty margins on either side
//// taking up the rest of the screen.  If the application has no maximum width
//// restrictions, then set this value to 'none' or do not use the oj-web-applayout-max-width class.
//$appLayoutMaxWidth: 1440px !default;
//
//// Horizontal Padding for header/content/footer areas
//$appLayoutWebPadding: 20px !default;
//
//// Header
//$appLayoutWebHeaderBgColor: $headerBgColor !default;
//$appLayoutWebHeaderBorderColor: $neutralColor7 !default;
//$appLayoutWebHeaderTitleFontSize: $mediumFontSize !default;
//$appLayoutWebHeaderTitleFontWeight: $headerFontWeight !default;
//$appLayoutWebHeaderTextColor: $secondaryTextColor !default;
//$appLayoutWebHeaderBoxShadow: 0 3px 3px unquote("hsla(#{$boxShadowHsl},0.1)") !default;
//$appLayoutWebHeaderMinHeight: 3.143rem !default; // 44px when root 14px
//
//// Footer
//$appLayoutWebFooterBgColor: $appLayoutWebHeaderBgColor !default;
//$appLayoutWebFooterBorderColor: $appLayoutWebHeaderBorderColor !default;
//$appLayoutWebFooterMinHeight: 3.571rem !default; // 50px when root 14px
//
//// Offcanvas
//$appLayoutWebOffcanvasBgColor: $contrastBackground1Color !default;
//
//// APPLICATION LAYOUT - HYBRID
////-------------------------------------------------------------
//// Padding
//$appLayoutHybridPadding: 1rem !default;
//
//// Header
//$appLayoutHybridHeaderTextColor: $textColor !default;
//$appLayoutHybridHeaderBorderColor: $neutralColor8 !default;
//$appLayoutHybridHeaderBorderBottomWidth: 1px !default;
//$appLayoutHybridHeaderBgColor: $neutralColor5 !default;
//// We don't want header height to be relative to root font size so using a fixed px
//$appLayoutHybridHeaderMinHeight: 56px !default;
//$appLayoutHybridHeaderBoxShadow: 0 1px 3px unquote('hsla(#{$boxShadowHsl},0.3)') !default;
//$appLayoutHybridHeaderTitleFontSize: oj-px-to-rem(20px, $baseFontSize: 16px) !default;
//$appLayoutHybridHeaderTitleFontWeight: $headerFontWeight !default;
//
//// Footer
//$appLayoutHybridFooterBorderTopWidth: 1px !default;
//$appLayoutHybridFooterBorderColor: $appLayoutHybridHeaderBorderColor !default;
//$appLayoutHybridFooterBgColor: $appLayoutHybridHeaderBgColor !default;
//// We don't want footer height to be relative to root font size so using a fixed px
//$appLayoutHybridFooterMinHeight: 48px !default;
//
//// Nav Bar
//$appLayoutHybridNavBarBoxShadow: 0 -10px 10px unquote('hsla(#{$boxShadowHsl},0.05)') !default;
//
//// Nav Drawer
//$appLayoutHybridOffcanvasBgColor: $appLayoutWebOffcanvasBgColor !default;
//
//// OFFCANVAS
////----------------------------------------
//// options
//
//// values could be "push"(alta default/ios) or "overlay"(for android/windows)
//$offcanvasDisplayModeOptionDefault: overlay !default;
//
//// MENU
////-----------------------------------------------------------------------------
//
//// Controls whether sheet menus have a "Cancel" menu item automatically added.
//// Valid values are "none" and "menuItem".
//$menuSheetCancelAffordance: "none" !default;
//
//// 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;
//
//// Controls whether a "glass pane" is displayed behind dropDown menus.
//// Valid values are "modal" and "modeless".
//$menuDropDownModality: "modal" !default;
//
//// Controls whether a "glass pane" is displayed behind sheet menus.
//// Valid values are "modal" and "modeless".
//$menuSheetModality: "modal" !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
//// non-null supported values for $menuTextOnlyJustifyContent are "flex-start" and "center".
//$menuTextOnlyJustifyContent: null !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.
//$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:
//$menuSubmenuIconPadding:              oj-px-to-rem(11px, $baseFontSize: 16px) !default;
//
//// menu parts
////----------------------------------
//
//// menus (.oj-menu), whether top-level or submenu
//$menuBorderWidth: 1px !default;
//$menuBorderColor: $popupBorderColor !default;
//$menuBorderRadius:                    1px !default;
//$menuBgColor: $popupBgColor !default;
//$menuPadding:                         oj-px-to-rem(8px, $baseFontSize: 16px) !default;
//
//// top-level menus (.oj-menu.oj-component)
//$menuBoxShadow: 0 2px 5px unquote("hsla(#{$boxShadowHsl},0.25)") !default;
//
//// submenus (.oj-menu.oj-menu-submenu)
//$menuSubmenuBoxShadow: 0 3px 7px unquote("hsla(#{$boxShadowHsl},0.25)") !default;
//
//// menu items (.oj-menu-item) and their anchors
//$menuItemBorderColor:                 transparent !default;
//$menuItemTextColor:                   $primaryTextColor !default;
//$menuItemLineHeight:                  48/16+unquote('rem') !default; // 48px @16px font
//$menuItemTopBorderWidth: 1px !default;
//$menuItemBottomBorderWidth: 1px !default;
//
//// 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;
//
//// disabled menu icons, not submenu icons
//$menuIconColorDisabled:               $brandColor !default;
//$menuIconOpacityDisabled: $opacityDisabled !default;
//
//// submenu icons
//$menuSubmenuIconColor:                $iconColorDefault !default;
//
//// menu group dividers (.oj-menu-divider, different than the border that iOS puts between every menu item)
//$menuDividerMargin: 0 !default;
//$menuDividerBorderWidth: 1px !default;
//$menuDividerBorderColor: $menuBorderColor !default;
//
//// sheet menus
////----------------------------------
//
//// sheet menus (.oj-menu-sheet)
//$menuSheetFontSize:                   oj-px-to-rem(17px, $baseFontSize: 16px) !default;
//$menuSheetBorderRadius: $menuBorderRadius !default;
//$menuSheetBgColor: $menuBgColor !default;
//$menuSheetMarginHorizontal:           oj-px-to-rem(16px, $baseFontSize: 16px) !default;
//// $menuSheetMarginBottom value must be 0, px, or %, e.g. 0, 10px, 5%
//$menuSheetMarginBottom: 0 !default;
//
//// sheet menu items (.oj-menu-item) and their anchors
//$menuSheetItemBorderColor: $menuItemBorderColor !default;
//$menuSheetItemBgColor: transparent !default;
//$menuSheetItemTextColor:              $secondaryTextColor !default;
//$menuSheetItemLineHeight:             48/17+unquote('rem') !default; // 48px @17px font
//$menuSheetItemTopBorderWidth: 1px !default;
//
//// disabled sheet menu items and their anchors
//$menuSheetItemTextColorDisabled: $menuItemTextColorDisabled !default;
//
//// focused sheet menu items (.oj-focus)
//$menuSheetItemBgColorFocus: $menuItemBgColorFocus !default;
//$menuSheetItemBorderColorFocus:       transparent !default;
//
//// cancel menu item (.oj-menu-item-cancel) and its anchor
//$menuSheetItemCancelFontWeight: normal !default;
//
//// groups of sheet menu items separated by group dividers
//$menuSheetItemGroupBorderRadius: 0 !default;
//
//// sheet menu group dividers (.oj-menu-divider, different than the border that iOS puts between every menu item)
//$menuSheetDividerBorderWidth: $menuDividerBorderWidth !default;
//$menuSheetDividerBorderColor: $menuDividerBorderColor !default;
//
//// menu animation defaults
////----------------------------------
//
//// dropdown menu
//$menuDropDownOpenAnimation: (
//  effect: "zoomIn",
//  transformOrigin: "#myPosition",
//  duration: $animationDurationShort
//) !default;
//$menuDropDownCloseAnimation: (
//  effect: "none"
//) !default;
//
//// sheet menu
//$menuSheetOpenAnimation: (
//  effect: "slideIn",
//  direction: "top",
//  duration: $animationDurationShort
//) !default;
//$menuSheetCloseAnimation: (
//  effect: "slideOut",
//  direction: "bottom",
//  duration: $animationDurationShort
//) !default;
//
//// submenu
//$menuSubmenuOpenAnimation: (
//  effect: "zoomIn",
//  transformOrigin: "#myPosition",
//  duration: $animationDurationShort
//) !default;
//$menuSubmenuCloseAnimation: (
//  effect: "none"
//) !default;
//
//// BUTTONS
////-----------------------------------------------------------------------------
//
//$buttonFontWeight:   500 !default; // per MDN, medium is roughly 500
//$buttonBorderRadius: $mediumBorderRadius !default; // 2px
//$buttonCursor: default !default;
//
//$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;
//$buttonInternalBorderColor:         $neutralColor10 !default;
//$buttonBgImage:                   none !default;
//  to bottom,
//  #ffffff 0%,
//  #f1f3f4 3.64%,
//  #e8ebed 50%,
//  $buttonBgColor 100%
//) !default;
//$buttonTextShadow:                none !default;
//$buttonBoxShadow:                 0 1px 3px unquote('hsla(#{$boxShadowHsl},0.4)') !default;
//
//// hover
//$buttonBgColorHover:              $brandColorLight1  !default;
//$buttonTextColorHover:            $buttonTextColor !default;
//$buttonIconColorHover:            $buttonTextColorHover !default;
//$buttonBorderColorHover:          $buttonBgColorHover !default;
//$buttonBgImageHover: none !default;
//$buttonTextShadowHover: none !default;
//$buttonBoxShadowHover: $buttonBoxShadow !default;
//
//// active
//$buttonBgColorActive:               $brandColorDark1  !default;
//$buttonTextColorActive:           $buttonTextColor !default;
//$buttonIconColorActive: $buttonTextColorActive !default;
//$buttonBorderColorActive: $buttonBgColorActive !default;
//$buttonInternalBorderColorActive: $buttonInternalBorderColor !default;
//$buttonBgImageActive: none !default;
//$buttonTextShadowActive: none !default;
//$buttonBoxShadowActive: $buttonBoxShadow !default;
//$buttonOpacityActive: 1 !default;
//
//// selected - default to use active values
//$buttonBgColorSelected:           $brandColorDark2   !default;
//$buttonTextColorSelected: $buttonTextColorActive !default;
//$buttonIconColorSelected: $buttonIconColorActive !default;
//$buttonBorderColorSelected: $buttonBorderColorActive !default;
//$buttonInternalBorderColorSelected: $buttonInternalBorderColorActive !default;
//$buttonBgImageSelected: $buttonBgImageActive !default;
//$buttonTextShadowSelected: $buttonTextShadowActive !default;
//$buttonBoxShadowSelected: $buttonBoxShadowActive !default;
//
//// selected and hovered
//$buttonTextColorSelectedHover:    $contrastTextColor !default;
//$buttonIconColorSelectedHover:    $buttonTextColorSelectedHover !default;
//$buttonBgColorSelectedHover:      $brandColorLight2 !default;
//$buttonBorderColorSelectedHover:  $buttonBgColorSelectedHover !default;
//
//// disabled
//$buttonBgColorDisabled:           $neutralColor9 !default;
//$buttonTextColorDisabled:           $textColorDisabled !default;
//$buttonIconColorDisabled:         $buttonTextColorDisabled !default;
//$buttonBorderColorDisabled: $buttonBgColorDisabled !default;
//$buttonOpacityDisabled: $opacityDisabled !default;
//$buttonBoxShadowDisabled:         $buttonBoxShadow !default;
//
//// disabled and selected
//$buttonTextColorSelectedDisabled:   $neutralColor3 !default;
//$buttonIconColorSelectedDisabled: $buttonTextColorSelectedDisabled !default;
//$buttonBgColorSelectedDisabled:     $neutralColor10  !default;
//$buttonBorderColorSelectedDisabled: $buttonBgColorSelectedDisabled !default;
//$buttonInternalBorderColorSelectedDisabled: $buttonInternalBorderColor !default;
//
//// 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
//$buttonHalfChromeTextColorHover:          $brandColorLight1 !default;
//$buttonHalfChromeIconColorHover: $buttonHalfChromeTextColorHover !default;
//$buttonHalfChromeBgColorHover:            transparent !default;
//$buttonHalfChromeBorderColorHover: $buttonHalfChromeBgColorHover !default;
//
//// half chrome active
//$buttonHalfChromeTextColorActive:         $buttonTextColor !default;
//$buttonHalfChromeIconColorActive: $buttonHalfChromeTextColorActive !default;
//$buttonHalfChromeBgColorActive: $buttonBgColorActive !default;
//$buttonHalfChromeBorderColorActive: $buttonHalfChromeBgColorActive !default;
//$buttonHalfChromeOpacityActive: $buttonOpacityActive !default;
//
//// half chrome selected
//$buttonHalfChromeTextColorSelected:       $buttonHalfChromeTextColorActive !default;
//$buttonHalfChromeIconColorSelected: $buttonHalfChromeTextColorSelected !default;
//$buttonHalfChromeBgColorSelected: $buttonHalfChromeBgColorActive !default;
//$buttonHalfChromeBorderColorSelected: $buttonHalfChromeBgColorSelected !default;
//
//// half chrome selected and hovered
//$buttonHalfChromeTextColorSelectedHover:  $buttonTextColor !default;
//$buttonHalfChromeIconColorSelectedHover: $buttonHalfChromeTextColorSelectedHover !default;
//$buttonHalfChromeBgColorSelectedHover:    $buttonBgColorHover !default;
//$buttonHalfChromeBorderColorSelectedHover:  $buttonHalfChromeBgColorSelectedHover !default;
//
//// half chrome disabled
//$buttonHalfChromeTextColorDisabled:       $textColorDisabled !default;
//$buttonHalfChromeIconColorDisabled:       $buttonHalfChromeTextColorDisabled !default;
//$buttonHalfChromeOpacityDisabled: $buttonOpacityDisabled !default;
//
//// half chrome disabled and selected
//$buttonHalfChromeTextColorSelectedDisabled: $buttonTextColorSelectedDisabled !default;
//$buttonHalfChromeIconColorSelectedDisabled: $buttonHalfChromeTextColorSelectedDisabled !default;
//$buttonHalfChromeBgColorSelectedDisabled: $buttonBgColorSelectedDisabled !default;
//$buttonHalfChromeBorderColorSelectedDisabled: $buttonHalfChromeBgColorSelectedDisabled !default;
//
//// outlined
//$buttonOutlinedChromeFontWeight: $buttonHalfChromeFontWeight !default;
//
//// outlined default
//$buttonOutlinedChromeTextColor: $buttonHalfChromeTextColor !default;
//$buttonOutlinedChromeIconColor: $buttonHalfChromeIconColor !default;
//$buttonOutlinedChromeBorderColor: $buttonOutlinedChromeTextColor !default;
//$buttonOutlinedChromeInternalBorderColor:          $neutralColor9 !default;
//
//// outlined hover
//$buttonOutlinedChromeTextColorHover: $buttonHalfChromeTextColorHover !default;
//$buttonOutlinedChromeIconColorHover: $buttonHalfChromeIconColorHover !default;
//$buttonOutlinedChromeBgColorHover:        $buttonHalfChromeBgColorHover !default;
//$buttonOutlinedChromeBorderColorHover:    $brandColorLight1 !default;
//
//// outlined active
//$buttonOutlinedChromeTextColorActive: $buttonHalfChromeTextColorActive !default;
//$buttonOutlinedChromeIconColorActive: $buttonHalfChromeIconColorActive !default;
//$buttonOutlinedChromeBgColorActive: $buttonHalfChromeBgColorActive !default;
//$buttonOutlinedChromeBorderColorActive: $buttonHalfChromeBorderColorActive !default;
//$buttonOutlinedChromeInternalBorderColorActive:    $brandColorDark1 !default;
//$buttonOutlinedChromeOpacityActive: $buttonHalfChromeOpacityActive !default;
//
//// outlined selected
//$buttonOutlinedChromeTextColorSelected: $buttonHalfChromeTextColorSelected !default;
//$buttonOutlinedChromeIconColorSelected: $buttonHalfChromeIconColorSelected !default;
//$buttonOutlinedChromeBgColorSelected: $buttonHalfChromeBgColorSelected !default;
//$buttonOutlinedChromeBorderColorSelected: $buttonHalfChromeBorderColorSelected !default;
//$buttonOutlinedChromeInternalBorderColorSelected: $buttonInternalBorderColor !default;
//
//// outlined selected and hovered
//$buttonOutlinedChromeTextColorSelectedHover: $buttonHalfChromeTextColorSelectedHover !default;
//$buttonOutlinedChromeIconColorSelectedHover: $buttonHalfChromeIconColorSelectedHover !default;
//$buttonOutlinedChromeBgColorSelectedHover:      $buttonBgColorHover !default;
//$buttonOutlinedChromeBorderColorSelectedHover:  $buttonOutlinedChromeBgColorSelectedHover !default;
//
//// outlined disabled
//$buttonOutlinedChromeTextColorDisabled: $buttonBgColorDisabled !default;
//$buttonOutlinedChromeIconColorDisabled: $buttonBgColorDisabled !default;
//$buttonOutlinedChromeBorderColorDisabled: $buttonBgColorDisabled !default;
//$buttonOutlinedChromeOpacityDisabled: $buttonHalfChromeOpacityDisabled !default;
//
//// outlined disabled and selected
//$buttonOutlinedChromeTextColorSelectedDisabled: $buttonHalfChromeTextColorSelectedDisabled !default;
//$buttonOutlinedChromeIconColorSelectedDisabled: $buttonHalfChromeIconColorSelectedDisabled !default;
//$buttonOutlinedChromeBgColorSelectedDisabled: $buttonHalfChromeBgColorSelectedDisabled !default;
//$buttonOutlinedChromeBorderColorSelectedDisabled: $buttonHalfChromeBorderColorSelectedDisabled !default;
//$buttonOutlinedChromeInternalBorderColorSelectedDisabled: $buttonOutlinedChromeInternalBorderColorSelected !default;
//
//// cta enabled
//$buttonCallToActionChromeBgColor: $brandColor !default;
//$buttonCallToActionChromeBorderColor: transparent !default;
//$buttonCallToActionChromeTextColor: $contrastTextColor !default;
//$buttonCallToActionChromeIconColor: $contrastTextColor !default;
//$buttonCallToActionChromeBgImage: none !default;
//$buttonCallToActionChromeBoxShadow: none !default;
//
//// cta hover
//$buttonCallToActionChromeBgColorHover: $brandColor !default;
//$buttonCallToActionChromeBorderColorHover: $buttonCallToActionChromeBorderColor !default;
//$buttonCallToActionChromeTextColorHover: $contrastTextColor !default;
//$buttonCallToActionChromeIconColorHover: $contrastTextColor !default;
//$buttonCallToActionChromeBgImageHover: linear-gradient(
//  hsla(0, 0%, 100%, 0.15),
//  hsla(0, 0%, 100%, 0.15)
//) !default;
//$buttonCallToActionChromeBoxShadowHover: none !default;
//
//// cta active
//$buttonCallToActionChromeBgColorActive: $brandColor !default;
//$buttonCallToActionChromeBorderColorActive: var(
//  $buttonCallToActionChromeBorderColor
//);
//$buttonCallToActionChromeTextColorActive: $contrastTextColor !default;
//$buttonCallToActionChromeIconColorActive: $contrastTextColor !default;
//$buttonCallToActionChromeBgImageActive: linear-gradient(
//  hsla(0, 0%, 0%, 0.1),
//  hsla(0, 0%, 0%, 0.1)
//) !default;
//$buttonCallToActionChromeBoxShadowActive: none !default;
//$buttonCallToActionChromeOpacityActive: null !default;
//
//// cta disabled
//$buttonCallToActionChromeBgColorDisabled: $brandColor !default;
//$buttonCallToActionChromeBorderColorDisabled: $buttonCallToActionChromeBorderColor !default;
//$buttonCallToActionChromeTextColorDisabled: $contrastTextColor !default;
//$buttonCallToActionChromeIconColorDisabled: $contrastTextColor !default;
//$buttonCallToActionChromeBoxShadowDisabled: none !default;
//$buttonCallToActionChromeOpacityDisabled: 0.4 !default;
//
//// alternate button colors
////----------------------------------
//$buttonContrastTextColor: $contrastTextColor !default;
//$buttonPrimaryColor: $brandColor !default;
//$buttonConfirmColor: $accentColorConfirmation5 !default;
//
//// BUTTONSET
////-----------------------------------------------------------------------------
//
//$buttonsetBorderRadius: $buttonBorderRadius !default;
//
//// chroming
////----------------------------------
//
//$buttonsetChromingOptionDefault: full !default;
//
//// width
////----------------------------------
//// auto width for all buttonset chroming
//$buttonsetEqualWidthChromingList: full outlined !default; // default should be equal width buttonsets for these chroming values (auto width for all others)
//$buttonsetEqualWidthOverallWidth: 100% !default; // default width of equal width buttonsets when app doesn't supply a width
//
//// DIALOG
////-----------------------------------------------------------------------------
//
//// animation theme defaults
//$dialogOpenAnimation: (
//  (
//    effect: "zoomIn"
//  ),
//  "fadeIn"
//) !default;
//$dialogCloseAnimation: (
//  (
//    effect: "zoomOut"
//  ),
//  "fadeOut"
//) !default;
//
//// ojDialog resizeBehavior, cancelBehavior, and dragAffordance options
//// default to the programmatic settings.
//$dialogResizeBehaviorOptionDefault: none !default;
//$dialogCancelBehaviorOptionDefault: none !default;
//$dialogDragAffordanceOptionDefault: none !default;
//
//$dialogBoxShadow: $smallBoxShadow !default;
//$dialogBorderRadius: 0 !default;
//$dialogBorderWidth: $windowBorderWidth !default;
//$dialogBorderColor: $windowBorderColor !default;
//$dialogBgColor: $windowBgColor !default;
//
//$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;
//$dialogHeaderBorderColor: transparent !default;
//$dialogHeaderBgColor:       transparent !default;
//$dialogHeaderTextColor:     $textColor !default;
//$dialogHeaderBgImage: $headerBgImage !default;
//
//// Alignment of the dialog header text.
//// Possible values are and 'center' and 'start'
//$dialogHeaderTextAlign: start !default;
//// Vertical position of the close icon.
//// Possible values are 'top' and 'center'
//// (the close icon is always on the right in ltr)
//$dialogCloseIconPosition: top !default;
//$dialogCloseIconButtonMargin: 0 $buttonIconOnlyPadding !default;
//
//$dialogBodyTextAlign: start !default;
//
//$dialogFooterButtonHeight: $buttonHeight !default;
//$dialogFooterButtonFontWeight: $buttonFontWeight !default;
//
//// Integrated layout for footer buttons.
//// Possible values are 'true' or 'false'.
//// When 'false', buttons are positioned on the right side of the footer.
//// When 'true', buttons are integrated (spread) across the entire footer,
//// evenly spacing the buttons, render dividers, and round the outside
//// corners of the first and last buttons.
//$dialogFooterIntegrateButtons: false !default;
//$dialogFooterDividerColor: $dialogBorderColor !default;
//
//// TOOLBAR
////-----------------------------------------------------------------------------
//
//$toolbarBorderColor: $panelBorderColor !default;
//$toolbarBgColor: transparent !default;
//$toolbarBorderWidth: 0 !default;
//
//// chroming
////----------------------------------
//
//$toolbarChromingOptionDefault: half !default;
//
//// FORM CONTROLS
////-----------------------------------------------------------------------------
//
//// form labels
////----------------------------------
//// label text color defined in another section, look for $formControlLabelColor
//
//// label required content character.
//// If it is not needed (like you want to use pure css instead), set to ''.
//$formControlLabelRequiredChar: "" !default;
//$formControlLabelFontWeight: normal !default;
//$formControlLabelFontSize:   $smallestFontSize !default;
//
//// top aligned labels
////----------------------------------
////    by default labels are dislplay: block and therefore
////    render on top of the field. This variable controls
////    the vertical spacing between labels and fields
//$formControlLabelMarginBottom: 0.25em !default;
//
//// inline labels
////----------------------------------
//
//// gutter (padding) between the inline label and the control
//$formControlLabelInlineGutter:     1rem !default;
//
//// top margin on the inline label, generally this
//// distance is to align the label text with an input's text.
//// Note that there is an additional inline label var $formLayoutLabelInlineMarginTop
//$formControlLabelInlineMarginTop: 0.55em !default;
//
//// form control dimensions
////----------------------------------
//
//// $formControlInput* variables apply to
//// input style form controls, like input text
//$formControlInputHeight:   oj-px-to-rem(28px, $baseFontSize: 16px) !default;
//
//// $formControlTrigger* variables apply to
//// trigger style form controls, which triggers some type of picker, like a select or date
//$formControlTriggerHeight: $formControlInputHeight !default;
//
//// On form controls we use a width of 100% and then set a max and
//// min width so that when there's less room for the form control it
//// can automatically get smaller instead of overflowing its boundaries.
//// This forces us to set some sort of default max-width
//// which can be overridden on the instance by setting a style
//// or class using the rootAttributes option.
//$formControlLargeMaxWidth:  100% !default;
//$formControlMediumMaxWidth: 100% !default;
//$formControlMinWidth: 8em !default;
//
//// form control common
////----------------------------------
//$formControlBorderRadius:    0 !default;
//$formControlBorderWidth: 0 0 1px 0 !default;
//
//// controls the horizontal padding inside an input
//$formControlPaddingHorizontal: 0 !default;
//
//// messaging border
//$formControlMessagingBorderWidth: 2px 2px 2px 2px !default;
//// Message Summary Option Default:
//$formControlMessageSummaryOptionDefault: "header" !default;
//$formControlTextAlign: null !default;
//
//// On iphone safari (if zooming is not disabled) then
//// form controls auto zoom when you click on them if their
//// text size is less than 16px. This variable controls
//// setting text-size-adjust such that the font size
//// is a minimum of 16px to avoid auto zooming.
//$formControlTextSizeAdjust: true !default;
//
//// form control states
////----------------------------------
//
//// *****default*****
//$formControlBgColor:                    transparent !default;
//$formControlBorderColor:                $neutralColor11 !default;
//
//// $formControlInput* variables apply to
//// input style form controls, like input text
//$formControlInputValueColor: $textColor !default;
//$formControlInputFontSize: $fontSize !default;
//
//// $formControlTrigger* variables apply to
//// trigger style form controls, triggers some type of picker, like a select or date
//$formControlTriggerValueColor: $formControlInputValueColor !default;
//$formControlTriggerFontSize: $fontSize !default;
//
//// *****active*****
//$formControlTriggerBgColorActive:       $neutralColor8 !default;
//
//// *****focus*****
//$formControlInputBorderColorFocus:      $brandColor  !default;
//$formControlInputBorderWidthFocus:      0 0 2px 0           !default;
//
//// *****readonly*****
//$formControlValueColorReadOnly: $textColor !default;
//$formControlFontSizeReadOnly: $formControlInputFontSize !default;
//$formControlFontWeightReadOnly:         bold !default;
//
//// *****disabled*****
//$formControlBgColorDisabled:            transparent !default;
//$formControlValueColorDisabled: $formControlInputValueColor !default;
//$formControlBorderColorDisabled: $formControlBorderColor !default;
//$formControlOpacityDisabled: $opacityDisabled !default;
//
//// *****placeholder*****
//$formControlPlaceholderColor: $tertiaryTextColor !default;
//$formControlPlaceholderFontStyle: normal !default;
//
//// form control option defaults
////----------------------------------
//$formControlLabelEdgeDefault: provided !default;
//$inputFormControlReadonlyDefault: input !default;
//$formControlUseUserAssistanceOptionDefault: ignore !default;
//
//// FORM LAYOUT
////-----------------------------------------------------------------------------
//
//// outer border
//$formLayoutBorderColor:  $neutralColor7 !default;
//// divider between rows
//$formLayoutDividerColor: $neutralColor8 !default;
//
//// These variables are used to set the column-width/column-gap properties
//// in .oj-form-cols and .oj-form-cols-labels-inline.
//// These classes use css multi column layout, see:
//// http://dev.w3.org/csswg/css-multicol/
//$formLayoutColumnWidth: 18.45rem !default;
//$formLayoutColumnGap: normal !default;
//$formLayoutLabelsInlineColumnWidth: 22rem !default;
//$formLayoutLabelsInlineColumnGap: normal !default;
//// These next two variables are using redwood terminology.  The above variables are for backwards
//// compatibility and may be deprecated at some point.
//// The left/right margin is the space before the first column and after the last column of an oj-form-layout
//$formLayoutHorizontalMargin:  $formControlLabelInlineGutter !default;
//// The gutter is the space between columns of an oj-form-layout
//// This is assigned to be twice the label-inline-gutter currently
//// for backwards compatibility
//$formLayoutColumnGutter: $formControlLabelInlineGutter * 2 !default;
//
//// In a form layout this is the space expected between
//// form controls in different rows
//$formLayoutMarginBottom: 10px !default;
//
//// inline label in a oj-flex > oj-flex-item; 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;
//
//// in a form layout when the labels are inline what is the
//// default label alignment, legal values are start and end
//$formLayoutLabelInlineAlign: start !default;
//$formLayoutLabelEdgeDefault: top !default;
//$formLayoutDirectionDefault: column !default;
//
//// Default value for colspan-wrap attribute
//$formLayoutColspanWrapDefault: nowrap !default;
//
//// in a form layout when the labels are inline what is the
//// default field alignment, legal values are start and end
//$formLayoutFieldInlineAlign: end !default;
//
//// INPUT NUMBER
//// the spacing between the input and the buttonset
//$inputNumberInputToButtonMargin: 16px !default;
//
////inputnumber up and down button width
//$inputNumberButtonWidth: 50px;
//
////options
//// For option 'step'
//$inputNumberStepOptionDefault: 1 !default;
//$inputNumberButtonChromingOptionDefault: solid !default;
//
//// RADIO and CHECKBOX
//// The input html element can be hidden the radio/checkbox rendered as an image instead
//// values are 'html' and 'backgroundImage'.
//$radioCheckboxRenderInputAs: backgroundImage !default;
//// The label can be rendered before or after the input/image.
//$radioCheckboxLabelPosition: start !default;
//
//$radioCheckboxRowHeight: 3rem !default;
//
//// spacing between edge and the label text
//$radioCheckboxLabelToEdgePadding: 16px !default;
//
//// spacing between two checkbox/radio when direction is row (inline)
//$radioCheckboxDirectionRowInlinePadding: 2rem !default;
//
//// spacing between edge and the input (html input or input image)
//$radioCheckboxInputToEdgePadding: 0 !default;
//// spacing on the input (html input or input image) to give spacing between the input and the text
//$radioCheckboxInputToLabelPadding: 0 !default;
//
//// radioset and checkboxset states
////----------------------------------
////default
//$radioCheckboxSetBorderColor:         $neutralColor7 !default;
//$radioCheckboxSetBgColor:             $neutralColor4 !default;
//$radioCheckboxItemDividerColor:       $neutralColor8 !default;
//$radioCheckboxLabelColor: $textColor !default;
//
//// active
//$radioCheckboxItemBgColorActive: $brandColorLight5 !default;
//$radioCheckboxItemDividerColorActive: $neutralColor11 !default;
//
//// selected
//$radioCheckboxLabelColorSelected: $radioCheckboxLabelColor !default;
//
//// SELECT
////----------------------------------------
//
////options
//$selectRenderModeOptionDefault: native !default;
//
////arrow
//// the right and left borders of the next two properties will be flipped in rtl languages
//$selectArrowPadding: 0 5px !default;
//$selectMultipleArrowPadding: 0 1px !default;
//$selectArrowColor:              $iconColorDefault !default;
//
//// picker
//$selectPickerBgColor:           $neutralColor1 !default;
//
//// INPUT TEXT, INPUT PASSWORD, TEXT AREA
////-----------------------------------------------------------------------------
//$inputTextBorderStyleDisabled:        dotted !default;
//$inputTextTextAlign: null !default;
//$textAreaLineHeight:                  1.2 !default;
//
////INPUT SEARCH
////--------------------------------------------------------------
//$inputSearchBgColor: $formControlBgColor !default;
//$inputSearchBgColorDisabled: $formControlBgColorDisabled !default;
//$inputSearchIconPosition: start !default; // Possible values are 'start' and 'end'
//$inputSearchIconPadding: 0 8px 0 0 !default;
//
//// SLIDER
////-----------------------------------------------------------------------------
//
//// Thumb dimensions used in horizontal sliders.
//$sliderThumbWidth:               12px !default;
//$sliderThumbHeight: $sliderThumbWidth !default;
//
//// Thumb dimensions for the active state.
//$sliderThumbWidthActive:             18px !default;
//$sliderThumbHeightActive: $sliderThumbWidthActive !default;
//
//$sliderThumbBorderWidth: 2px !default;
//$sliderThumbBorderRadius: 50% !default;
//$sliderThumbBoxShadow: none !default;
//
//// Hit areas
//$sliderThumbHitArea: 28px !default;
//$sliderBarHitArea: 36px !default;
//
//$sliderBarThickness: 2px !default;
//
//// colors for enabled state
//$sliderThumbBgColor:             $brandColor !default;
//$sliderThumbBorderColor: $sliderThumbBgColor !default;
//$sliderBarBgColor:               $neutralColor11 !default;
//$sliderBarValueBgColor: $brandColor !default;
//
//// hover
//$sliderThumbBgColorHover: $sliderThumbBgColor !default;
//
//// active
//$sliderThumbBgColorActive: $sliderThumbBgColorHover !default;
//$sliderThumbBorderColorActive: $sliderThumbBorderColor !default;
//$sliderBarValueBgColorActive: $sliderBarValueBgColor !default;
//
//// thumb disabled
//$sliderThumbBgColorDisabled:     $neutralColor9 !default;
//$sliderThumbBorderColorDisabled: $neutralColor1 !default;
//$sliderBarBgColorDisabled:       $sliderBarBgColor !default;
//$sliderBarValueBgColorDisabled:  $sliderBarBgColorDisabled !default;
//
//// Color picker variables
//$sliderColorPickerBarThickness: 10px !default;
//$sliderColorPickerThumbBorderWidth: 3px !default;
//$sliderColorPickerThumbBorderRadius: 17px !default;
//$sliderColorPickerThumbBorderStyle: solid !default;
//$sliderColorPickerThumbBorderColor: $neutralColor1 !default;
//$sliderColorPickerThumbWidth: 24px !default;
//$sliderColorPickerThumbHeight: $sliderColorPickerThumbWidth !default;
//$sliderColorPickerThumbWidthActive:  34px !default;
//$sliderColorPickerThumbHeightActive: $sliderColorPickerThumbWidthActive !default;
//$sliderColorPickerThumbBoxShadow: $mediumBoxShadow !default;
//
//// COLOR SPECTRUM
////-----------------------------------------------------------------------------
//
//// Spectrum saturation/luminosity rectangle
//$colorSpectrumBorderColor: $neutralColor8 !default;
//$colorSpectrumSize: 230px !default;
//
//// Spectrum Thumb
//$colorSpectrumThumbBorderColor: $sliderColorPickerThumbBorderColor !default;
//$colorspectrumThumbBorderColorDisabled: $sliderThumbBorderColorDisabled;
//$colorSpectrumThumbSize: $sliderColorPickerThumbWidth !default;
//$colorSpectrumThumbBorderWidth: $sliderColorPickerThumbBorderWidth !default;
//$colorSpectrumThumbBoxShadow: $sliderColorPickerThumbBoxShadow !default;
//
//// COLOR PALETTE
////-----------------------------------------------------------------------------
//$colorPaletteTextColor: $textColor !default;
//$colorPaletteGridFontSize: $smallFontSize !default;
//$colorPaletteListFontSize: null !default;
//$colorPaletteSwatchInnerBorderColor: $neutralColor14 !default;
//$colorPaletteSwatchOuterBorderColorSelected: $linkTextColor !default;
//$colorPaletteGridSwatchXLargeSize: 64px !default;
//$colorPaletteGridSwatchLargeSize: 64px !default;
//$colorPaletteGridSwatchSmallSize: 29px !default;
//$colorPaletteGridSwatchXSmallSize: 22px !default;
//$colorPaletteListSwatchSmallWidth: 84px !default;
//$colorPaletteListSwatchSmallHeight: 22px !default;
//$colorPaletteListSwatchLargeWidth: 274px !default;
//$colorPaletteListSwatchLargeHeight: 22px !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;
//$switchTrackBorderColor:                 $switchTrackBgColor !default; // #939393
//$switchThumbBgColor:                     $neutralColor5 !default;
//$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;
//$switchTrackBorderColorDisabled:         $switchTrackBgColorDisabled !default;
//$switchThumbBgColorDisabled:             $neutralColor13 !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
//
//// LISTBOX
////-----------------------------------------------------------------------------
//// listbox values used in drop down for
//// inputTime, select, combobox, select2
//$listboxBgColorFocus: $neutralColor6 !default;
//
//// padding for a listbox item
//$listboxItemPadding: 5px !default;
//
//// listbox data can be a tree, meaning the item is nested.
//// this is the additional padding per nesting level
//$listboxIndentWidth: 15px !default;
//// listbox message color
//$listboxMessageTextColor: $secondaryTextColor !default;
//
//// Common values for datepicker and timepicker
////-----------------------------------------------------------------------------
//
//$dateTimePickerWidth: 275px !default;
//$dateTimePickerPadding: 15px !default;
//
//$dateTimePickerSwitcherBgColor: $neutralColor6 !default;
//$dateTimePickerSwitcherPadding: 5px $dateTimePickerPadding !default;
//
//// DATEPICKER
////-----------------------------------------------------------------------------
//
//$datepickerBgColorSelected: $buttonHalfChromeBgColorSelected !default;
//$datepickerTextColorSelected: $buttonHalfChromeTextColorSelected !default;
//$datepickerBorderColorToday: $neutralColor9 !default;
//$datepickerBgColorToday: $neutralColor5 !default;
//$datepickerBgColorHover: $brandColorLight1 !default;
//$datepickerTextColorHover: $datepickerTextColorSelected !default;
//$datepickerBorderColorFocus: $datepickerBgColorHover !default;
//
//$datepickerHeaderTextColor: $textColor6 !default;
//
//$datepickerButtonTextColor: $linkTextColor !default;
//$datepickerButtonTextColorHover: $datepickerBgColorHover !default;
//$datepickerButtonTextColorActive: $datepickerButtonTextColor !default;
//
//$datepickerWeekOfYearHeaderBgColor: $neutralColor3 !default;
//$datepickerWeekOfYearCellBgColor: $neutralColor6 !default;
//
//// INPUT DATE/TIME
////-----------------------------------------------------------------------------
////options
//// For option 'renderMode' in ojInputDate / ojInputDateTime / ojInputDate
//$inputDateTimeRenderModeOptionDefault: native !default;
//$inputDateTimeDatePickerOptionDefault: (
//  footerLayout: "today"
//) !default;
//
//$inputDateTimeKeyboardEditOptionDefault: disabled !default;
//$inputDateTimeTimePickerOptionDefault: null !default;
//$inputDateTimeConverterYearOptionDefault: 2-digit !default;
//$inputDateTimeShowPickerOnDesktopOptionDefault: enabled !default;
//
//// TIMEPICKER
////-----------------------------------------------------------------------------
//
//$timepickerItemBgColorFocus: $brandColorLight5 !default;
//
//$timepickerTextColor: $brandColor !default;
//$timepickerTextColorHover: $iconColorHover !default;
//$timepickerTextColorActive: $timepickerTextColor !default;
//
//// COLLAPSIBLE
////-----------------------------------------------------------------------------
//
//$collapsibleAnimationDuration: $animationDurationMedium !default;
//
//// TABS
////-----------------------------------------------------------------------------
//
//// tabs content area
////----------------------------------
//$tabsPanelBgColor: $panelBgColor !default;
//$tabsPanelBorderColor: $panelBorderColor !default;
//
//// individual tabs
////----------------------------------
//$tabsNavTextColor: $linkTextColor !default;
//$tabsNavBorderRadius: 0 !default;
//
//// selected
//$tabsNavBorderColorSelected: $neutralColor9 !default;
//
//// this color and border width are used at the top
//// of the selected tab when the tabs are horizontal
//// (or on the start side when the tabs are vertical)
//$tabsNavAccentBorderColorSelected: $brandColor !default;
//$tabsNavAccentBorderWidthSelected: 3px !default;
//
//// PROGRESS
////-----------------------------------------------------------------------------
//$progressValueBgColor: $brandColor !default;
//$progressBarHeight:                       8px !default;
//$progressBarBgColor:                      $brandColorLight2 !default;
//$progressBarBgOpacity: 1 !default;
//$progressBarBorderColor: $neutralColor7 !default;
//$progressBarBorderRadius: 0 !default;
//$progressBarBorderStyle: none !default;
//
//$progressBarIndeterminateOverlayImage: $imageDir + "animated-overlay.gif" !default;
//$progressBarIndeterminateOverlayOpacity: 1 !default;
//$progressBarIndeterminateAnimationDuration: 1s !default;
//
//$progressCircleIndeterminateOverlayImage: $imageDir + "spinner_full_default.gif" !default;
//$progressCircleIndeterminateOverlaySize: auto !default;
//$progressCircleIndeterminateAnimationDuration: 1s !default;
//
//$progressCircleSize: 32px !default;
//$progressCircleBgColor: $progressBarBgColor !default;
//$progressCircleBgOpacity: $progressBarBgOpacity !default;
//// TRAIN
////-----------------------------------------------------------------------------
//
//// unvisited state
//$trainBgColor: $neutralColor13 !default;
//$trainBorderColor: $trainBgColor !default;
//$trainLabelColor: $secondaryTextColor !default;
//$trainButtonTextColor: $contrastTextColor !default;
//
//// visited state
//$trainBgColorVisited: $brandColor !default;
//$trainBorderColorVisited: $trainBgColorVisited !default;
//$trainLabelColorVisited: $secondaryTextColor !default;
//$trainButtonTextColorVisited: $contrastTextColor !default;
//$trainVisitedIconDisplay: none !default;
//$trainButtonTextVisitedDisplay: inherit !default;
//
//// selected state
//$trainBgColorSelected: $brandColor !default;
//$trainBorderColorSelected: $trainBgColorSelected !default;
//$trainButtonTextColorSelected: $contrastTextColor !default;
//$trainLabelFontWeightSelected: bold !default;
//
//// disabled state
//$trainBgColorDisabled: $neutralColor9 !default;
//$trainBorderColorDisabled: $trainBgColorDisabled !default;
//$trainLabelColorDisabled: $textColor !default;
//$trainOpacityDisabled: $opacityDisabled !default;
//$trainButtonTextColorDisabled: $contrastTextColor !default;
//
//// hover state
//$trainBgColorHover: $iconColorHover !default;
//$trainBorderColorHover: $trainBgColorHover !default;
//$trainButtonTextColorHover: $contrastTextColor !default;
//
//// active state
//$trainBgColorActive: $neutralColor7 !default;
//$trainBorderColorActive: $brandColor !default;
//$trainLabelTextDecorationActive: none !default;
//$trainLabelFontWeightActive: bold !default;
//$trainButtonTextColorActive: $trainBgColorVisited !default;
//
//// button label
//$trainButtonFontSize: 12px !default;
//
//// the default width of a step
//$trainStepWidth:                          112px !default;
//
//$trainLabelPaddingTop: 13px !default;
//
//// $trainLabelTextWrap accepts css white-space
//// values such as normal or nowrap
//$trainLabelTextWrap: normal !default;
//
//// the diameter of the "button" representing a stop
//$trainButtonDiameter: 24px !default;
//$trainButtonBorderWidth: 1px !default;
//
//// message icon diameter
//$trainIconDiameter: $trainButtonDiameter !default;
//$trainButtonMessagingIconColor: $trainButtonTextColor !default;
//
//$trainConfirmationBgColor: $accentColorConfirmation4 !default;
//$trainErrorBgColor: $accentColorDanger4 !default;
//$trainWarningBgColor: $accentColorAttention4 !default;
//$trainInfoBgColor: $accentColorInfo4 !default;
//$trainIconFontSize: unset !default; //Don't override icon font size
//// connector variables
//// step connector type. Valid values are 'individual' or 'continuous. A 'continuous'
//// connector is a single shape behind all of the step buttons while the 'individual'
//// connector renders seperate shapes between each step.
//$trainConnectorBgColor: $neutralColor9 !default;
//$trainConnectorHeight: 1px !default;
//$trainConnectorHasFill: 0 !default;
//$trainContinuousConnectorBgColorSelected: transparent !default;
//$trainIndividualConnectorBgColorSelected: $trainConnectorBgColor !default;
//$trainConnectorContinuousBgColor: $trainConnectorBgColor !default;
//
//// padding for individual connector
//$trainIndividualConnectorPadding: 10px !default;
//$trainIndividualConnectorPaddingSelected: $trainIndividualConnectorPadding !default;
//
//// the diameter of the connector circle around the button in the continuous
//// connector design
//$trainButtonContinuousConnectorDiameter: $trainButtonDiameter !default;
//$trainButtonTextIsNumeric: 1 !default;
//$trainButtonTextDisplay: inherit !default;
//
////TREE
////-----------------------------------------------------------------------------
//
//$treeAnimationDuration: $collapsibleAnimationDuration !default;
//
//// text
//$treeTextColor: $linkTextColor !default;
//
//// node bg
//$treeNodeBgColorHover: transparent !default;
//$treeNodeBgColorSelected: $brandColorLight4 !default;
//$treeNodeBgColorHoverSelected: $brandColorLight4 !default;
//$treeNodeBgColorSelectedInactive: $brandColorLight5 !default;
//
//// node text border
//$treeNodeBorderColorHover: $neutralColor14 !default;
//$treeNodeBorderColorSelected: $treeNodeBgColorSelected !default;
//$treeNodeBorderColorHoverSelected: $treeTextColor !default;
//$treeNodeBorderColorSelectedInactive: $brandColorLight3 !default;
//
//// Dnd
//$treeDndMarkerLineColor: $brandColor !default;
//
//// Collection (ALSO USED BY TABLE, DATAGRID AND LIST VIEW)
////-----------------------------------------------------------------------------
//// Default
//$collectionBorderColor:                       $neutralColor8 !default;
//$collectionBgColor:                           $neutralColor1 !default;
//// Headers
//$collectionCellPadding:                       oj-px-to-rem(8px, $baseFontSize: 16px) !default;
//$collectionHeaderFontWeight: $headerFontWeight !default;
//$collectionHeaderTextColor:                   $headerTextColor !default;
//$collectionHeaderFontSize:                    $smallestFontSize !default;
//// Headers content alignment
//$collectionColumnHeaderJustifyContent: center !default;
//$collectionColumnHeaderAlignItems: center !default;
//$collectionRowHeaderJustifyContent: flex-start !default;
//$collectionRowHeaderAlignItems: center !default;
//// Headers - Default
//$collectionHeaderBgColor:                     $neutralColor1 !default;
//$collectionHeaderBorderColor: $collectionBorderColor !default;
//// Headers - Hover
//$collectionHeaderBgColorHover:                $neutralColor8 !default;
//// Headers - Focus
//$collectionHeaderBgColorFocus:                $brandColorLight2  !default;
//// Headers - Selected
//$collectionHeaderBgColorSelected:             $neutralColor9  !default;
//// Headers - Selected Inactive (selected but focus outside the component)
//$collectionHeaderBgColorSelectedInactive:     $neutralColor5 !default;
//// Headers - Dragged
//$collectionHeaderBgColorDrag:                 $brandColorLight4 !default;
//$collectionHeaderDragImageBorderColor:        $neutralColor10 !default;
//
//// Cells
//$collectionCellTextColor:                     $textColor  !default;
//$collectionCellFontSize:                      oj-px-to-rem(13px, $baseFontSize: 16px) !default;
//// Cells content alignment
//$collectionCellJustifyContent: flex-end !default;
//$collectionCellAlignItems: center !default;
//// Cells - Default
//$collectionCellBorderColor: $neutralColor8 !default;
//$collectionCellBgColor:                       $neutralColor1 !default;
//$collectionCellBandedBgColor: $neutralColor3 !default;
//// Cells - Hover
//$collectionCellBgColorHover:                  $neutralColor5  !default;
//$collectionCellBorderColorHover: $collectionCellBorderColor !default;
//// Cells - Focus
//$collectionCellBgColorFocus: $brandColorLight4 !default;
//$collectionCellBorderColorFocus: $collectionCellBorderColor !default;
//// Cells - Selected
//$collectionCellBgColorSelected:               $neutralColor8 !default;
//$collectionCellBorderColorSelected:           $neutralColor11  !default;
//// Cells - Selected Inactive (selected but focus outside the component)
//$collectionCellBgColorSelectedInactive:       $collectionCellBgColorSelected !default;
//$collectionCellBorderColorSelectedInactive:   $collectionCellBorderColorSelected !default;
//// Cells - Dragged
//$collectionCellBgColorDrag: $brandColorLight5 !default;
//$collectionCellDragImageBorderColor: transparent !default;
//// Cells - Editable, will be added when editing is enabled on the datagrid
//$collectionEditableCellBorderColorFocus: $neutralColor17 !default;
//// Color applied to cells that are read only when editing is enabled on the datagrid
//$collectionEditableCellBgColorReadOnly: $neutralColor5 !default;
//
//// Rows - Height is now dependent on the default form control height
//$collectionRowHeight:                         max($formControlInputHeight, oj-px-to-rem(47px, $baseFontSize: 16px)) !default;
//  $formControlInputHeight,
//$formControlTriggerHeight: oj-px-to-rem(32px, $baseFontSize: 16px) !default;
//) !default;
//$collectionHeaderHeight:                      oj-px-to-rem(55px, $baseFontSize: 16px) !default;
//$collectionColumnWidth:                       oj-px-to-rem(68px, $baseFontSize: 16px) !default;
//
//// Status Text
//$collectionStatusBgColor:                     $collectionCellBgColor !default;
//
//// Touch Selection Affordances
//$collectionSelectionAffordanceBorderColor: $brandColor !default;
//
//// TREEVIEW
////-----------------------------------------------------------------------------
//
//// animations
//$treeViewExpandAnimation: (
//  effect: "expand"
//) !default;
//$treeViewCollapseAnimation: (
//  effect: "collapse"
//) !default;
//
//// text
//$treeViewTextColor: $linkTextColor !default;
//
//// node background color
//$treeViewItemBgColorHover: $collectionCellBgColorHover !default;
//$treeViewItemBgColorSelected: $collectionCellBgColorSelected !default;
//$treeViewItemBgColorSelectedInactive: $collectionCellBgColorSelected !default; // BgColorSelectedInactive is too light
//
//// dnd
//$treeViewDropLineColor: $dropTargetLineColor !default;
//
//// spacer
//$treeViewSpacerWidth: 24px !default;
//$treeViewSpacerHeight: 30px !default;
//
//// load indicator
//$treeViewLoadIndicator: none !default;
//
//// checkboxes
//$treeViewMultipleSelectionAffordance: none !default;
//
//// data animation fade in time
//$treeViewDataFadeInDuration: 0s !default;
//
//$treeViewDropItemBackground: $dropTarget1Color !default;
//
//// TABLE
////-----------------------------------------------------------------------------
//// Table Rows - Height
//$tableRowHeight: 2.75em !default;
//
//// Table Headers
//$tableHeaderPadding: 1em !default;
//
////  $tableHeaderBorderColor is used when display=list,
////  when display=grid $collectionHeaderBorderColor is used instead
//$tableHeaderBorderColor: $neutralColor7 !default;
//
//// Table Cells
//$tableCellPadding: $tableHeaderPadding;
//
//// Table Display Option Default
//$tableDisplayOptionDefault: "list" !default;
//
//// Table horizontal grid visible
//$tableHorizontalGridVisibleOptionDefault: "enabled" !default;
//
//// Table selector for multiple selection
//$tableEnableSelector: false !default;
//
//// Table sticky layouts
//$tableEnableSticky: false !default;
//
//$tableAddAnimation: (
//  (
//    effect: "slideIn",
// 
//    direction: "bottom"
//  ),
//  "fadeIn"
//) !default;
//$tableRemoveAnimation: (
//  (
//    effect: "slideOut",
//    direction: "top"
//  ),
//  "fadeOut"
//) !default;
//$tableUpdateAnimation: (
//  effect: "fadeIn"
//) !default;
//
//// load indicator
//$tableLoadIndicator: icon !default;
//
//// ROWEXPANDER
////-----------------------------------------------------------------------------
//$rowExpanderIndentWidth: 16px !default;
//$rowExpanderSpacerWidth:  1.25rem !default;
//
//// PAGING CONTROL
////-----------------------------------------------------------------------------
//// padding between various elements of the paging control
//$pagingPadding: 5px !default;
//$pagingDotSize: 7px !default;
//$pagingDotPadding: 8px !default;
//$pagingBorderColor: $neutralColor8 !default;
//
//// LISTVIEW
////-----------------------------------------------------------------------------
//
//$listViewAnimationDuration: $animationDurationMedium !default;
//$listViewHeaderBorderWidth:          0 !default;
//$listViewHeaderBorderWidthCollapsed: 0 0 1px !default;
//$listViewHeaderFontSize:     $header5FontSize !default;
//$listViewHeaderOpacity: 1 !default;
//$listViewHeaderFontWeight: $headerFontWeight !default;
//$listViewItemBorderPosition: 0 !default;
//// the right and left margins will be flipped in rtl languanges
//$listViewCardMargin:         8px 8px 0 0 !default;
//$listViewCardWidth: 240px !default;
//$listViewCardHeight: auto !default;
//$listViewDrillIconColor: $iconColorDefault !default;
//// animations
//$listViewAddAnimation: (
//  (
//    effect: "expand"
//  ),
//  "fadeIn"
//) !default;
//$listViewRemoveAnimation: (
//  (
//    effect: "collapse"
//  ),
//  "fadeOut"
//) !default;
//$listViewUpdateAnimation: (
//  effect: "fadeIn"
//) !default;
//$listViewExpandAnimation: (
//  effect: "expand"
//) !default;
//$listViewCollapseAnimation: (
//  effect: "collapse"
//) !default;
//$listViewPointerUpAnimation: (effect: "ripple") !default;
//  effect: "none"
//) !default;
//
//// gridlines option defaulting
//$listViewGridlinesItemOptionDefault: visible !default;
//$listViewGridlinesTopOptionDefault: visible !default;
//$listViewGridlinesBottomOptionDefault: visible !default;
//// load indicator
//$listViewLoadIndicator: icon !default;
//
//// PULL TO REFRESH
////-----------------------------------------------------------------------------
//
//// pull to refresh panel background color
//$refresherBgColor: $neutralColor5 !default;
//// duration of pull to refresh transition
//$refresherAnimationDuration: $animationDurationMedium !default;
//
//// SWIPE TO REVEAL
////-----------------------------------------------------------------------------
//// duration of swipe to reveal transition
//$swipeActionsAnimationDuration: $animationDurationMedium !default;
//// text color applied to all action items
//$swipeActionsTextColor: $neutralColor1 !default;
//// background color applied when no action type style class is specified
//$swipeActionsDefaultBgColor: $brandColor !default;
//
//$swipeActionsNeutralBgColor: $neutralColor13 !default;
//$swipeActionsAttentionBgColor: $accentColorAttention5 !default;
//$swipeActionsDangerBgColor: $accentColorDanger5 !default;
//
//// width of action item
//$swipeActionsItemWidth: 75px !default;
//// padding between icon and text in action item
//$swipeActionsIconToTextPadding: oj-px-to-rem(
//  10px,
//  $baseFontSize: 16px
//) !default;
//
//// INDEXER
////-----------------------------------------------------------------------------
//// height of each item in the indexer
//$indexerItemHeight: 18px !default;
//// width of each item in the indexer
//$indexerItemWidth: 22px !default;
//// height of each item
//$indexerAbbrItemHeight: 14px !default;
//// text color of the prefix in the indexer
//$indexerTextColor: $secondaryTextColor !default;
//// text color of the prefix in the indexer in disabled state
//$indexerTextColorDisabled: $secondaryTextColor !default;
//// text decoration of the prefix in the indexer
//$indexerTextDecoration: none !default;
//// text decoration of the prefix in the indexer when hover
//$indexerTextDecorationHover: none !default;
//// font weight of the prefix in the indexer
//$indexerFontWeight: bold !default;
//
//// MASONRY
////-----------------------------------------------------------------------------
//// width of each item in the indexer
//$masonryItemWidth: 240px !default;
//$masonryAnimationDuration: $animationDurationMedium !default;
//$masonryInsertAnimation: (
//  (
//    effect: "expand"
//  ),
//  "fadeIn"
//) !default;
//$masonryRemoveAnimation: (
//  (
//    effect: "collapse"
//  ),
//  "fadeOut"
//) !default;
//
//// MASONRY LAYOUT
////-----------------------------------------------------------------------------
//
//// duration of a masonryLayout animation
//$masonryLayoutAnimationDuration: $animationDurationShort !default;
//// duration of a faster masonryLayout animation
//$masonryLayoutAnimationDurationFast: $masonryLayoutAnimationDuration * 0.8 !default;
//// margin around a masonryLayout tile
//$masonryLayoutTileMargin: $spacingSmall !default;
//// width of a 1x1 masonryLayout tile, not including margin
//$masonryLayoutTileWidth: 150px !default;
//// height of a 1x1 masonryLayout tile, not including margin
//$masonryLayoutTileHeight: 150px !default;
//
//// animation theme variables
//$masonryLayoutInsertAnimation: (
//  (
//    effect: "zoomIn",
//    duration: $masonryLayoutAnimationDuration,
//    timingFunction: "ease-in-out"
//  ),
//  "fadeIn"
//) !default;
//$masonryLayoutRemoveAnimation: (
//  (
//    effect: "zoomOut",
//    duration: $masonryLayoutAnimationDuration,
//    timingFunction: "ease-in-out"
//  ),
//  "fadeOut"
//) !default;
//$masonryLayoutMoveAnimation: (
//  effect: "addTransition",
//  duration: $masonryLayoutAnimationDuration,
//  timingFunction: "ease-in-out",
//  transitionProperties: (
//    "width",
//    "height",
//    "top",
//    "left",
//    "right"
//  )
//) !default;
//$masonryLayoutResizeAnimation: (
//  effect: "addTransition",
//  duration: $masonryLayoutAnimationDuration,
//  timingFunction: "ease-in-out",
//  transitionProperties: (
//    "width",
//    "height",
//    "top",
//    "left",
//    "right"
//  )
//) !default;
//$masonryLayoutReorderAnimation: (
//  effect: "addTransition",
//  duration: $masonryLayoutAnimationDurationFast,
//  timingFunction: "ease-in-out",
//  transitionProperties: (
//    "width",
//    "height",
//    "top",
//    "left",
//    "right"
//  )
//) !default;
//
//// WATERFALL LAYOUT
////-----------------------------------------------------------------------------
//
//// width of each item in the waterfall layout
//$waterfallLayoutItemWidth: 240px !default;
//// width of the horizontal and vertical gutter
//$waterfallLayoutGutterWidth: 24px !default;
//// animations
//$waterfallLayoutEntranceAnimation: (
//  (
//    effect: "fadeIn",
//    duration: "300ms",
//    timingFunction: "cubic-bezier(0, 0, 0.2, 1)"
//  ),
//  (
//    effect: "slideIn",
//    direction: "top",
//    offsetY: "300px",
//    duration: "300ms",
//    timingFunction: "cubic-bezier(0, 0, 0.2, 1)"
//  )
//) !default;
//$waterfallLayoutExitAnimation: (
//  effect: "fadeOut",
//  duration: "200ms",
//  timingFunction: "cubic-bezier(0, 0, 0.2, 1)"
//) !default;
//
//// SELECTOR WIDTH
////-----------------------------------------------------------------------------
//
//// width of the selector
//$selectorWidth:                      18px !default;
//// height of the selector
//$selectorHeight:                     18px !default;
//// margin of the selector
//$selectorMargin:                     10px !default;
//
//// FILM STRIP
////-----------------------------------------------------------------------------
//
//// opacity of arrows
//$filmStripArrowOpacity: 1 !default;
//// border radius of arrows
//$filmStripArrowBorderRadius: $buttonBorderRadius !default;
////hover
//$filmStripOverflowIndicatorHeight: $buttonHeight !default;
//
//// CONVEYOR BELT
////-----------------------------------------------------------------------------
//
////hover
//$conveyorBeltOverflowIndicatorHeight: $buttonHeight !default;
//
//$conveyorBeltArrowVisibilityOptionDefault: visible !default;
//
//// NAVIGATIONLIST
////-----------------------------------------------------------------------------
//
////---Common variables----
//
////Default
//$navigationListItemLabelColorDefault: $secondaryTextColor !default;
//$navigationListItemIconColorDefault: $navigationListItemLabelColorDefault !default;
//$navigationListCollapsibleIconColorDefault: $navigationListItemLabelColorDefault !default;
//
////Hover
//$navigationListItemBorderColorHover: $iconColorHover !default;
//$navigationListItemBgColorHover: $neutralColor6 !default;
//$navigationListItemIconColorHover: $iconColorHover !default;
//
////Selected
//$navigationListItemLabelColorSelected:                        $brandColorDark1 !default;
//$navigationListItemBorderColorSelected: $brandColor !default;
//$navigationListItemIconColorSelected: $iconColorSelected !default;
//$navigationListItemBgColorSelected: $neutralColor5 !default; // only applies to vertical navlist
//
////Focus
//$navigationListItemOutlineColorFocus: $neutralColor14 !default;
//
////Disabled
//$navigationListItemLabelColorDisabled: $navigationListItemLabelColorDefault !default;
//$navigationListIconColorDisabled: $navigationListItemLabelColorDefault !default;
//
//// category divider - used between categories
//$navigationListCategoryDividerColor: $neutralColor8 !default;
//
////sizing
//$navigationListItemMinHeight: oj-px-to-rem(
//  43px,
//  $baseFontSize: 16px
//) !default; // only applies to vertical navlist.
//// Not applicable to icon-only
//$navigationListItemStartEndPadding:                           oj-px-to-rem(10px, $baseFontSize: 16px) !default;
//  10px,
//  $baseFontSize: 16px
//) !default;
//$navigationListIconToTextPadding: oj-px-to-rem(
//  10px,
//  $baseFontSize: 16px
//) !default;
//$navigationListItemAccentBorderWidth:                         3px !default;
//$navigationListItemLabelTextWrap: nowrap !default;
//$navigationListItemBorderWidth: 0 0 0 $navigationListItemAccentBorderWidth !default; // the right and left borders will be flipped in rtl languanges
//
////----------Common icon only variables
//
////Hover
//$navigationListItemIconOnlyBgColorHover: $neutralColor6 !default;
//
////Selected
//$navigationListItemIconOnlyBgColorSelected: $brandColor !default;
//$navigationListIconOnlyIconColorSelected: $brandColor !default;
//
////----------NavigationList(vertical) icon only variables
//
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$navigationListIconOnlyStyle: none !default;
////Padding between items
//$navigationListIconOnlyItemPadding: 0 !default;
////Only applicable when icon only style is "none".
//$navigationListIconOnlyIconStartEndPadding: 16px !default;
//
////This value will be ignored when $navigationListIconOnlyStyle is set to 'circle'.
//$navigationListIconOnlyItemBorderWidth: 0 0 0
//$navigationListItemAccentBorderWidth !default; // the right and left borders will be flipped in rtl languanges
////This value will be ignored when $navigationListIconOnlyStyle is set to 'circle'.
//
////-------Navlist Contrast variables--------------
//
////Default
//$navigationListItemContrastLabelColorDefault:     $neutralColor10 !default;
//
////Hover
//$navigationListItemContrastLabelColorHover:       $neutralColor3 !default;
//$navigationListItemContrastBgColorHover:          $neutralColor16 !default;
//
////Selected
//$navigationListItemContrastLabelColorSelected:    $neutralColor3 !default;
//$navigationListItemContrastBgColorSelected:       $neutralColor16 !default;
//
////Disabled
//$navigationListItemContrastLabelColorDisabled:    $neutralColor13 !default;
//
//// NOTE: for the sliding toolbar and hierarchical menu area
//// navigationList uses various $toolbar*,$buttonHalfChrome*,$tree*,$menu* and $header3FontSize variables
//
////------Options----------------
//$navigationListHierarchyMenuThresholdOptionDefault: -1 !default;
//
////------Horizontal list variables----
//
//// Default
////$navigationListHorizontalItemBorderColor:                  transparent !default;
//$navigationListHorizontalItemLabelColorDefault: $navigationListItemLabelColorDefault !default;
//$navigationListHorizontalItemIconColorDefault: $navigationListItemIconColorDefault !default;
//
//// divider - used between text items when horizontal
//$navigationListHorizontalItemDividerColor: $neutralColor7 !default;
//
//// Selected
//$navigationListHorizontalItemBgColorSelected: transparent !default;
//$navigationListHorizontalItemLabelColorSelected:              $brandColorDark1 !default;
//$navigationListHorizontalItemIconColorSelected: $navigationListItemIconColorSelected !default;
//
////Sizing
//$navigationListHorizontalFontSize:                            oj-px-to-rem(12px, $baseFontSize: 16px)  !default;
//  13px,
//  $baseFontSize: 16px
//) !default;
//$navigationListHorizontalMinHeight:                           oj-px-to-rem(56px, $baseFontSize: 16px) !default;
//  38px,
//  $baseFontSize: 16px
//) !default;
//
//// the right and left borders will be flipped in rtl languanges
//$navigationListHorizontalItemBorderWidth:                     0 !default;
//  $navigationListItemAccentBorderWidth 0 !default;
//// the right and left will be flipped in rtl languanges
//$navigationListHorizontalItemPadding:                         2px $navigationListItemStartEndPadding 6px !default;
//$navigationListHorizontalIconMargin: 4px !default;
//$navigationListHorizontalIconToTextPadding: 2px !default;
//
////Stacked horizontal navigationlist
//$navigationListHorizontalStackedIconMinHeight:                oj-px-to-rem(56px, $baseFontSize: 16px)  !default;
//  54px,
//  $baseFontSize: 16px
//) !default;
//$navigationListHorizontalStackedItemPadding:                  1px $navigationListItemStartEndPadding 0 !default;
//
////----------Horizontal navigationlist icon only variables
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$navigationListHorizontalIconOnlyStyle: none !default;
////space between items
//$navigationListHorizontalIconOnlyItemMargin: 4px !default;
//
////----------------Horizontal navigationlist contrast variables
//$navigationListHorizontalItemContrastBgColorSelected:         $neutralColor1 !default;
//$navigationListHorizontalItemContrastLabelColorSelected:      $textColor3 !default;
//
////---------------Animations-------------------
//$navigationListHorizontalAddAnimation: (
//  (
//    effect: "expand",
//    direction: "width"
//  ),
//  "fadeIn"
//) !default;
//$navigationListHorizontalRemoveAnimation: (
//  (
//    effect: "collapse",
//    direction: "width",
//    persist: "all"
//  ),
//  "fadeOut"
//) !default;
//$navigationListAddAnimation: (
//  (
//    effect: "expand"
//  ),
//  "fadeIn"
//) !default;
//$navigationListRemoveAnimation: (
//  (
//    effect: "collapse"
//  ),
//  "fadeOut"
//) !default;
//$navigationListUpdateAnimation: (
//  effect: "fadeIn"
//) !default;
//$navigationListExpandAnimation: (
//  effect: "expand"
//) !default;
//$navigationListCollapseAnimation: (
//  effect: "collapse"
//) !default;
//$navigationListSliderExpandAnimation: (
//  effect: "slideIn",
//  direction: "start",
//  duration: "400ms"
//) !default;
//$navigationListSliderCollapseAnimation: (
//  effect: "slideIn",
//  direction: "end",
//  duration: "400ms"
//) !default;
//$navigationListPointerUpAnimation:                            (effect: "ripple") !default;
//  effect: "none"
//) !default;
//
//// END of NavigationList variables
//
////TabBar
////----------------------------------------------------------------------
////Default
//$tabBarItemBorderColor: transparent !default;
//$tabBarItemLabelColorDefault:                         $formControlLabelColor !default;
//$tabBarItemIconColorDefault:                          $formControlLabelColor !default;
//
////Hover
//$tabBarItemBorderColorHover: $iconColorHover !default;
//$tabBarItemBgColorHover: $neutralColor6 !default;
//$tabBarItemIconColorHover: $iconColorHover !default;
//$tabBarItemIconOnlyBgColorHover: $neutralColor6 !default;
//$tabBarItemLabelColorHover: $tabBarItemLabelColorDefault !default;
////selected
//$tabBarItemLabelColorSelected:                        $brandColorDark1 !default;
//$tabBarItemIconColorSelected: $brandColor !default;
//$tabBarItemBorderColorSelected: $brandColor !default;
//$tabBarItemBgColorSelected:                           transparent !default;
//$tabBarItemIconOnlyBgColorSelected: $brandColor !default;
//$tabBarIconOnlyIconColorSelected: $brandColor !default;
//
////active
//$tabBarItemBgColorActive:                             $neutralColor4 !default;
//$tabBarItemBorderColorActive:                         $iconColorHover !default;
//
////Focus
//$tabBarItemOutlineColorFocus: $neutralColor14 !default;
//
////Disabled
//$tabBarItemLabelColorDisabled: $tabBarItemLabelColorDefault !default;
//$tabBarIconColorDisabled: $tabBarItemLabelColorDefault !default;
//
//// category divider - used between categories
//$tabBarCategoryDividerColor: $neutralColor8 !default;
//
////sizing
//
////minimum label width ensured during progressive truncation
//$tabBarTruncatedLabelMinWidth: 3rem !default;
//// Not applicable to icon-only
//$tabBarItemStartEndPadding:                           oj-px-to-rem(10px, $baseFontSize: 16px) !default;
//$tabBarIconToTextPadding: oj-px-to-rem(10px, $baseFontSize: 16px) !default;
//$tabBarItemLabelTextWrap: nowrap !default;
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$tabBarIconOnlyStyle: none !default;
//$tabBarItemFontWeightSelected: normal !default;
//$tabBarItemBorderRadius: 0 !default;
//
////---------------Vertical tab bar variables-----------------
////Padding between items
//$tabBarVerticalIconOnlyItemPadding: 0 !default;
////Only applicable when icon only style is "none".
//$tabBarVerticalIconOnlyIconStartEndPadding: 16px !default;
////This value will be ignored when $tabBarIconOnlyStyle is set to 'circle'.
//$tabBarVerticalIconOnlyItemBorderWidth: 0 0 0 3px !default; // the right and left borders will be flipped in rtl languanges
//$tabBarVerticalItemBorderWidth:                       0 0 1px 2px !default;
//$tabBarVerticalItemMinHeight:                         oj-px-to-rem(47px, $baseFontSize: 16px)  !default;
//$tabBarVerticalItemFontSize:                          oj-px-to-rem(14px, $baseFontSize: 16px)  !default;
////Align label of vertical tab bar, support either null or center
//$tabBarVerticalItemLabelTextAlign:                    center !default;
////Separator color used in vertical tabbar
//$tabBarVerticalItemSeparatorColor:                    $neutralColor7 !default;
//
////------Horizontal Tab Bar variables----
//
//// Default
//$tabBarHorizontalItemBorderColor: transparent !default;
//
//// divider - used between text items when horizontal
//$tabBarHorizontalItemDividerColor: $neutralColor7 !default;
//
////selected
//$tabBarHorizontalItemLabelColorSelected: $tabBarItemLabelColorSelected !default;
//$tabBarHorizontalItemIconColorSelected: $tabBarItemIconColorSelected !default;
//$tabBarHorizontalItemBgColorSelected: $tabBarItemBgColorSelected !default;
//$tabBarHorizontalItemBorderColorSelected: $brandColor !default;
//
//// Hover
//$tabBarHorizontalItemLabelColorHover: $tabBarItemIconColorHover !default;
//$tabBarHorizontalItemBorderColorHover: $tabBarItemBorderColorHover !default;
////Sizing
//$tabBarHorizontalItemBorderWidth:                     0 0 2px 0 !default;
//// the right and left will be flipped in rtl languanges
//$tabBarHorizontalItemPadding:                         2px $tabBarItemStartEndPadding 6px !default;
//$tabBarHorizontalIconMargin: 4px !default;
//$tabBarHorizontalIconToTextPadding: 2px !default;
//
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$tabBarHorizontalIconOnlyStyle: none !default;
////space between items
//$tabBarHorizontalIconOnlyItemMargin: 4px !default;
//
//$tabBarHorizontalIconOnlyItemBorderWidth:             $tabBarHorizontalItemBorderWidth !default;
//$tabBarHorizontalItemFontSize:                        oj-px-to-rem(14px, $baseFontSize: 16px)  !default;
//$tabBarHorizontalItemMinHeight:                       oj-px-to-rem(48px, $baseFontSize: 16px)  !default;
//  38px,
//  $baseFontSize: 16px
//) !default;
//$tabBarHorizontalItemStackedIconMinHeight:            oj-px-to-rem(48px, $baseFontSize: 16px)  !default;
//  54px,
//  $baseFontSize: 16px
//) !default;
//$tabBarHorizontalStackedItemPadding:                  1px $tabBarItemStartEndPadding 0 !default;
////Valid values are either null or even which ensures equal size for all tabs
//$tabBarHorizontalItemWidthDistribution: null !default;
////-------Tab Bar Contrast variables--------------
////Default
//$tabBarItemContrastLabelColorDefault:             $neutralColor10 !default;
//
////Hover
//$tabBarItemContrastLabelColorHover:               $neutralColor3 !default;
//$tabBarItemContrastBgColorHover:                  $neutralColor16 !default;
//
////Active
//$tabBarItemContrastBgColorActive: $neutralColor16 !default;
//
////Selected
//$tabBarItemContrastLabelColorSelected:            $neutralColor3 !default;
//$tabBarItemContrastBgColorSelected: transparent !default;
////Horizontal Navigation Tabs  contrast variables
//$tabBarHorizontalItemContrastBgColorSelected: transparent !default;
//$tabBarHorizontalItemContrastLabelColorSelected:  $neutralColor3 !default;
//
////Disabled
//$tabBarItemContrastLabelColorDisabled:            $neutralColor13 !default;
//
////----------Animations------------
//$tabBarHorizontalAddAnimation: (
//  (
//    effect: "expand",
//    direction: "width"
//  ),
//  "fadeIn"
//) !default;
//$tabBarHorizontalRemoveAnimation: (
//  (
//    effect: "collapse",
//    direction: "width",
//    persist: "all"
//  ),
//  "fadeOut"
//) !default;
//$tabBarAddAnimation: (
//  (
//    effect: "expand"
//  ),
//  "fadeIn"
//) !default;
//$tabBarRemoveAnimation: (
//  (
//    effect: "collapse"
//  ),
//  "fadeOut"
//) !default;
//$tabBarUpdateAnimation: (
//  effect: "fadeIn"
//) !default;
//$tabBarPointerUpAnimation:                            (effect: "ripple") !default;
//  effect: "none"
//) !default;
//
//// END of TabBar variables
//
//// File picker
////-----------------------------------------------------------------------------
//
////oj-file-picker
//$filePickerBgColor: $formControlBgColor !default;
//$filePickerBorderColor: $formControlBorderColor !default;
//$filePickerBorderWidth: 2px !default;
//$filePickerBorderRadius: $formControlBorderRadius !default;
//$filePickerBorderStyle: dashed !default;
//$filePickerTextColor: $linkTextColor !default;
//$filePickerTextFontSize: 1.25rem !default;
//$filePickerTextFontWeight: 500 !default;
//$filePickerSecondaryTextColor: $linkTextColor !default;
//$filePickerSecondaryTextFontSize: 0.875rem !default;
//$filePickerSecondaryTextFontWeight: 400 !default;
//$filePickerPadding:               22.333333px !default;
//
////active
//$filePickerBgColorActive:           $brandColorLight5 !default;
//
////disabled
//$filePickerBgColorDisabled: $neutralColor2 !default;
//$filePickerBorderColorDisabled: $filePickerBgColorDisabled !default;
//
//// DVT
////-----------------------------------------------------------------------------
//$dvtAnimationDuration: $animationDurationLong !default;
//$dvtAxisTitleTextColor: $tertiaryTextColor !default;
//$dvtIconBgColorActive: $buttonBgColorActive !default;
//$dvtIconBorderColorActive: $buttonBorderColorActive !default;
//$dvtMarqueeColor: rgba(255, 255, 255, 0.4) !default;
//$dvtMarqueeBorderColor: #0572ce !default;
//
//$dvtIconColorActive: $buttonIconColorActive !default;
//
//// attribute group colors
////----------------------------------
//$dvtCategory1Color: $accentColorDvt1 !default;
//$dvtCategory2Color: $accentColorDvt2 !default;
//$dvtCategory3Color: $accentColorDvt3 !default;
//$dvtCategory4Color: $accentColorDvt4 !default;
//$dvtCategory5Color: $accentColorDvt5 !default;
//$dvtCategory6Color: $accentColorDvt6 !default;
//$dvtCategory7Color: $accentColorDvt7 !default;
//$dvtCategory8Color: $accentColorDvt8 !default;
//$dvtCategory9Color: $accentColorDvt9 !default;
//$dvtCategory10Color: $accentColorDvt10 !default;
//$dvtCategory11Color: $accentColorDvt11 !default;
//$dvtCategory12Color: $accentColorDvt12 !default;
//
//// gauge threshold colors
////----------------------------------
//// used for the first threshold on a gauge, typically represents a low value
//$dvtThreshold1Color: $accentColorDvt4 !default;
//// used for the second threshold on a gauge, typically represents a medium value
//$dvtThreshold2Color: $accentColorDvt3 !default;
//// used for the third threshold on a gauge, typically represents a high value
//$dvtThreshold3Color: $accentColorDvt2 !default;
////-----------------------------------
//// ratinggauge state fill and stroke color
//$ratingGaugeBorderColorHover: transparent;
//$ratingGaugeBorderColorSelected: transparent;
//$ratingGaugeBorderColorChanged: transparent;
//$ratingGaugeBorderColorUnselected: transparent;
//$ratingGaugeBorderColorSelectedDisabled: transparent;
//$ratingGaugeBorderColorUnselectedDisabled: transparent;
//
//$ratingGaugeColorHover: #007cc8 !default;
//$ratingGaugeColorSelected: #f8c15a !default;
//$ratingGaugeColorChanged: #ed2c02 !default;
//$ratingGaugeColorUnselected: #c4ced7 !default;
//$ratingGaugeColorSelectedDisabled: $neutralColor8;
//$ratingGaugeColorUnselectedDisabled: $neutralColor5;
//$statusMeterGaugePlotAreaBorderColor: #d6dfe6;
//$statusMeterGaugePlotAreaColor: #e4e8ea;
//
//// background
////----------------------------------
//$dvtComponentBgColor: $neutralColor1 !default;
//$dvtComponentBg2Color: $neutralColor8 !default;
//$dvtTooltipBgColor: $windowBgColor !default;
//
//// border
////----------------------------------
//$dvtBorderColor: $neutralColor17 !default;
//$dvtBorder2Color: $neutralColor1 !default;
//$dvtPanelBorderColor: $neutralColor7 !default;
//
//// no data message
////----------------------------------
//$dvtNoDataMessageColor: $textColor !default;
//$dvtNoDataMessageFontSize: $smallFontSize !default;
//
//// charts
////----------------------------------
//$dvtChartStockFallingBgColor: $dvtThreshold1Color !default;
//$dvtChartStockRangeBgColor: $neutralColor10 !default;
//$dvtChartStockRisingBgColor: $neutralColor13 !default;
//$dvtChartSubtitleTextColor: $secondaryTextColor !default;
//$dvtChartTitleTextColor: $headerTextColor !default;
//$dvtChartAnimationRisingIconColor: #0099ff !default;
//$dvtChartAnimationFallingIconColor: #ff3300 !default;
//$dvtChartAnimationMarkerColor: #ffff2b !default;
//$dvtChartDataLabelFontSize: $smallFontSize !default;
//
//// diagram
////----------------------------------
//$dvtDiagramNodeBorderColorHover: $neutralColor11 !default;
//$dvtDiagramLinkBorderColorHover: $dvtDiagramNodeBorderColorHover !default;
//$dvtDiagramLinkColor: $dvtDiagramNodeBorderColorHover !default;
//$dvtDiagramLinkPadding: 10px !default;
//
//$dvtDiagramOverviewBgColor: $neutralColor7 !default;
//$dvtDiagramOverviewPadding: 0px !default;
//$dvtDiagramOverviewContentPadding: 10px !default;
//$dvtDiagramOverviewWindowBgColor: $neutralColor1 !default;
//$dvtDiagramOverviewWindowBorderColor: $neutralColor14 !default;
//$dvtDiagramOverviewNodeBgColor: $neutralColor14 !default;
//
//// nbox
////----------------------------------
//$dvtNBoxCellBgColor: $neutralColor5 !default;
//$dvtNBoxCellBgColorMinimized: $dvtNBoxCellBgColor !default;
//$dvtNBoxCellBgColorMaximized: $dvtComponentBg2Color !default;
//$dvtNBoxDialogBorderColor: $neutralColor10 !default;
//
//// pictochart
////----------------------------------
//$dvtPictoChartItemBgColor: $neutralColor11 !default;
//
//// thematic map
////----------------------------------
//$dvtMapBgColor: $neutralColor7 !default;
//$dvtMapMarkerBgColor: $neutralColor15 !default;
//$dvtMapLinkColor: $dvtDiagramLinkColor !default;
//
//// timeline
////----------------------------------
//
//$dvtTimelineBorderColor: $dvtPanelBorderColor !default;
//$dvtTimelineItemBgColor: $dvtComponentBgColor !default;
//$dvtTimelineItemBorderColor: $neutralColor12 !default;
//$dvtTimelineItemBorderColorHover: $brandColorLight1 !default;
//$dvtTimelineItemBorderColorSelected: $dvtBorderColor !default;
//$dvtTimelineItemDescriptionColor: $textColor !default;
//$dvtTimelineItemTitleColor: $secondaryTextColor !default;
//
//$dvtTimelineMajorAxisLabelColor: $secondaryTextColor !default;
//$dvtTimelineMajorAxisSeparatorColor: $neutralColor10 !default;
//$dvtTimelineMinorAxisSeparatorColor: $dvtTimelineMajorAxisSeparatorColor !default;
//$dvtTimelineMinorAxisBgColor: $neutralColor5 !default;
//$dvtTimelineMinorAxisBorderColor: $neutralColor7 !default;
//$dvtTimelineMinorAxisLabelColor: $textColor !default;
//
//$dvtTimelineOverviewBgColor: $neutralColor7 !default;
//$dvtTimelineOverviewLabelColor: $secondaryTextColor !default;
//$dvtTimelineOverviewWindowBgColor: $neutralColor1 !default;
//$dvtTimelineOverviewWindowBorderColor: $neutralColor14 !default;
//
//$dvtTimelineSeriesBgColor: $neutralColor3 !default;
//$dvtTimelineSeriesLabelColor: $headerTextColor !default;
//$dvtTimelineSeriesEmptyTextColor: $dvtNoDataMessageColor !default;
//
//$dvtTimelineReferenceObjectColor: $accentColorDvt4 !default;
//
//// treemap
////----------------------------------
//$dvtTreemapNodeHeaderBorderColor: $headerBorderColor !default;
//$dvtTreemapNodeHeaderBorderColorHover: $neutralColor8 !default;
//$dvtTreemapNodeHeaderBgColor: $brandColorLight3 !default;
//$dvtTreemapNodeBorderColorHover: $neutralColor6 !default;
//$dvtTreemapDrillTextColor: $linkTextColor !default;
//$dvtTreemapLabelFontSize: $smallFontSize !default;
//$dvtTreemapHeaderFontSize: $smallFontSize !default;
//
//// sunburst
////----------------------------------
//$dvtSunburstNodeBorderColorHover: $dvtTreemapNodeBorderColorHover !default;
//$dvtSunburstDrillTextColor: $linkTextColor !default;
//$dvtSunburstLabelFontSize: $smallFontSize !default;
//
//// timeaxis
////----------------------------------
//$dvtTimeAxisBgColor: transparent !default;
//$dvtTimeAxisBorderColor: $neutralColor7 !default;
//$dvtTimeAxisLabelColor: $textColor !default;
//$dvtTimeAxisSeparatorColor: $neutralColor7 !default;
//
//// gantt
////----------------------------------
//$dvtGanttBgColor: $collectionBgColor !default;
//$dvtGanttBorderColor: $collectionBorderColor !default;
//$dvtGanttHorizontalGridlineColor: $collectionCellBorderColor !default;
//$dvtGanttVerticalGridlineColor: $neutralColor10 !default;
//$dvtGanttEmptyTextColor: $dvtNoDataMessageColor !default;
//$dvtGanttDependencyLineColor: $neutralColor14 !default;
//
//$dvtGanttRowBgColor: $collectionCellBgColor !default;
//$dvtGanttTaskBgColor: $accentColorDvt1 !default;
//$dvtGanttMilestoneBgColor: $neutralColor13 !default;
//$dvtGanttSummaryBgColor: $iconColorDefault !default;
//$dvtGanttTaskBorderColorSelected: $dvtBorderColor !default;
//$dvtGanttTaskDragImageBorderColor: $neutralColor15 !default;
//
//$dvtGanttMajorAxisBgColor: $collectionHeaderBgColor !default;
//$dvtGanttMajorAxisBorderColor: $collectionHeaderBorderColor !default;
//$dvtGanttMajorAxisLabelColor: $collectionHeaderTextColor !default;
//$dvtGanttMajorAxisSeparatorColor: $collectionHeaderBorderColor !default;
//
//$dvtGanttMinorAxisBgColor: $dvtGanttMajorAxisBgColor !default;
//$dvtGanttMinorAxisBorderColor: $dvtGanttMajorAxisBorderColor !default;
//$dvtGanttMinorAxisLabelColor: $collectionCellTextColor !default;
//$dvtGanttMinorAxisSeparatorColor: $dvtGanttMajorAxisSeparatorColor !default;
//
////icon
////----------------------------------
//$iconCircleInnerBgColor: $neutralColor13 !default;
//$iconCircleFontColor: $neutralColor1 !default;
//
//$iconCircleXxsInnerSize: 32px !default;
//$iconCircleXsInnerSize: 48px !default;
//$iconCircleSmInnerSize: 64px !default;
//$iconCircleMdInnerSize: 96px !default;
//$iconCircleLgInnerSize: 144px !default;
//$iconCircleXlInnerSize: 192px !default;
//$iconCircleXxlInnerSize: 256px !default;
//
////Font size for the icon font
//$iconCircleXxsFontSize: calc(#{$iconCircleXxsInnerSize} / 2) !default;
//$iconCircleXsFontSize: calc(#{$iconCircleXsInnerSize} / 2) !default;
//$iconCircleSmFontSize: calc(#{$iconCircleSmInnerSize} / 2) !default;
//$iconCircleMdFontSize: calc(#{$iconCircleMdInnerSize} / 2) !default;
//$iconCircleLgFontSize: calc(#{$iconCircleLgInnerSize} / 2) !default;
//$iconCircleXlFontSize: calc(#{$iconCircleXlInnerSize} / 2) !default;
//$iconCircleXxlFontSize: calc(#{$iconCircleXxlInnerSize} / 2) !default;
//
//$iconCircleGreen: #005a1c;
//$iconCirclePurple: #920083;
//$iconCircleRed: #e4001e;
//$iconCircleTeal: #008179;
//$iconCircleOrange: #be4800;
//$iconCircleForest: #008323;
//$iconCirclePink: #c44591;
//$iconCircleMauve: #754b9a;
//$iconCircleLilac: #a15ea1;
//$iconCircleBlue: #2c5967;
//$iconCircleGray: #6f757e;
//$iconCircleSlate: #687878;
//
////avatar
////----------------------------------
//$avatarInnerBgColor: $iconCircleInnerBgColor !default;
//$avatarBorderColor: $avatarInnerBgColor !default;
//$avatarTextColor: $iconCircleFontColor !default;
//$avatarShapeOptionDefault: 'circle' !default;
//
////Width of the inner circle
//$avatarXxsInnerSize: 32px !default;
//$avatarXsInnerSize: 36px !default;
//$avatarSmInnerSize: 54px !default;
//$avatarMdInnerSize: 72px !default;
//$avatarLgInnerSize: 104px !default;
//$avatarXlInnerSize: 192px !default;
//$avatarXxlInnerSize: 256px !default;
//
////Font size for the initials
//$avatarXxsInitialsFontSize: 12px !default;
//$avatarXsInitialsFontSize: 14px !default;
//$avatarSmInitialsFontSize: 18px !default;
//$avatarMdInitialsFontSize: 24px !default;
//$avatarLgInitialsFontSize: 36px !default;
//$avatarXlInitialsFontSize: 72px !default;
//$avatarXxlInitialsFontSize: 96px !default;
//
////Outside border width
////border used for xxs, xs, sm, md, lg
//$avatarXxsBorderWidth: 1px !default;
////lg border used for xl, xxl
//$avatarXlBorderWidth: 2px !default;
//
////Scaling factor of placeholder image
////Placeholder images are in svg sprite, at size 32px, these scale factors will
////scale the placeholder image to the proper size
//$avatarXxsPlaceholderScale: 1 !default;
//$avatarXsPlaceholderScale: 1.125 !default;
//$avatarSmPlaceholderScale: 1.6875 !default;
//$avatarMdPlaceholderScale: 2.25 !default;
//$avatarLgPlaceholderScale: 3.25 !default;
//$avatarXlPlaceholderScale: 6 !default;
//$avatarXxlPlaceholderScale: 8 !default;
//
////Opacity of the black filter put on the background/border to meet contrast
////ratio requirements for smaller text sizes
//$avatarInitialsShadeOpacity: 0.189 !default;
//
////Other Background colors
//$avatarPurple: #920083 !default;
//$avatarOrange: #be4800 !default;
//$avatarRed: #e4001e !default;
//$avatarTeal: #008179 !default;
//$avatarGreen: #005a1c !default;
//$avatarForest: #008323 !default;
//$avatarPink: #c44591 !default;
//$avatarMauve: #754b9a !default;
//$avatarSlate: #687878 !default;
//$avatarBlue: #2c5967 !default;
//$avatarLilac: #a15ea1 !default;
//$avatarGray: #6f757e !default;
//
////card
////----------------------------------
//$actioncardBgColor: #ffffff !default;
//$actionCardScaleSizeHover: 1.02;
//
////-----------------------------------------------------------------------------
//// OPTIMIZATION VARIABLES
////-----------------------------------------------------------------------------
//
//// Please search for the term "optimizations" to find other
//// variables related to optimizing output
//
//// SLOW CSS
////-----------------------------------------------------------------------------
//// IE has two rendering modes, GPU and software rendering mode.
//// There is no known way for JET to detect which rendering
//// mode is being used. Performance for border radius, box-shadow,
//// and gradient used to be quite slow in software rendering mode,
//// however as of JET 1.3 the browsers we support seem to have acceptable
//// performance.
////
//// However if you find you want to suppress these you can do the following:
////
//// 1.  in your javascript check the user agent and put the
////     following classes on the html element.
////
////       - oj-slow-borderradius
////       - oj-slow-boxshadow,
////       - oj-slow-cssgradients
////
////     This is similar to what modernizr does with classes like no-borderradius
////     for browsers that don't support border radius.
////
////
////  2. Set the variables $borderRadiusGeneration, $boxShadowGeneration,
////     and $gradientGeneration to 'slowOverride', see below for more information
////
////      In the CSS you will see code like this:
////
////      .oj-button {
////          border-radius: 2px;
////      }
////
////      html.oj-slow-borderradius .oj-button {
////          border-radius: 0;
////      }
////
////
//// You may control output of the overrides, or choose not to generate
//// border-radius/gradients/box-shadows at all, with the variables below.
////
//// Valid values for the variables below are
////
////    - slowOverride: generate the regular value, but in addition generate
////            overrides for slow browsers to remove
////            border-radius/gradient/box-shadow on slow browsers.
////    - on: no overrides, generate only the regular value
////    - off: don't write out any value at all. If you wanted to generate
////            an IE only style sheet you might want to use "off" to
////            just not write out any  border-radius/gradient/box-shadow
////            values in the first place.
//$borderRadiusGeneration: on !default;
//$boxShadowGeneration: on !default;
//$gradientGeneration: on !default;
//
//// see the comments for $includeCssVarDefinitions
//// for more information
//$oj-css-var-map: (
//  "--oj-brand-color-light5": $brandColorLight5,
//  "--oj-brand-color-light4": $brandColorLight4,
//  "--oj-brand-color-light3": $brandColorLight3,
//  "--oj-brand-color-light2": $brandColorLight2,
//  "--oj-brand-color-light1": $brandColorLight1,
//  "--oj-brand-color": $brandColor,
//  "--oj-brand-color-dark1": $brandColorDark1,
//  "--oj-brand-color-dark2": $brandColorDark2,
//  "--oj-neutral-color1": $neutralColor1,
//  "--oj-neutral-color2": $neutralColor2,
//  "--oj-neutral-color3": $neutralColor3,
//  "--oj-neutral-color4": $neutralColor4,
//  "--oj-neutral-color5": $neutralColor5,
//  "--oj-neutral-color6": $neutralColor6,
//  "--oj-neutral-color7": $neutralColor7,
//  "--oj-neutral-color8": $neutralColor8,
//  "--oj-neutral-color9": $neutralColor9,
//  "--oj-neutral-color10": $neutralColor10,
//  "--oj-neutral-color11": $neutralColor11,
//  "--oj-neutral-color12": $neutralColor12,
//  "--oj-neutral-color13": $neutralColor13,
//  "--oj-neutral-color14": $neutralColor14,
//  "--oj-neutral-color15": $neutralColor15,
//  "--oj-neutral-color16": $neutralColor16,
//  "--oj-neutral-color17": $neutralColor17,
//  "--oj-contrast-background-1-color": $contrastBackground1Color,
//  "--oj-font-size": $fontSize,
//  "--oj-smallest-font-size": $smallestFontSize,
//  "--oj-small-font-size": $smallFontSize,
//  "--oj-medium-font-size": $mediumFontSize,
//  "--oj-large-font-size": $largeFontSize,
//  "--oj-largest-font-size": $largestFontSize,
//  "--oj-text-color": $textColor,
//  "--oj-primary-text-color": $primaryTextColor,
//  "--oj-secondary-text-color": $secondaryTextColor,
//  "--oj-tertiary-text-color": $tertiaryTextColor,
//  "--oj-contrast-text-color": $contrastTextColor,
//  "--oj-text-color-disabled": $textColorDisabled,
//  "--oj-form-control-label-color": $formControlLabelColor,
//  "--oj-link-text-color": $linkTextColor,
//  "--oj-link-text-color-active": $linkTextColorActive,
//  "--oj-link-text-color-visited": $linkTextColorVisited,
//  "--oj-link-text-color-disabled": $linkTextColorDisabled,
//  "--oj-link-text-decoration": $linkTextDecoration,
//  "--oj-link-text-decoration-hover": $linkTextDecorationHover,
//  "--oj-link-font-weight-active": $linkFontWeightActive,
//  "--oj-link-bg-color-active": $linkBgColorActive,
//  "--oj-icon-color": $iconColor,
//  "--oj-icon-color-default": $iconColorDefault,
//  "--oj-icon-color-hover": $iconColorHover,
//  "--oj-icon-color-active": $iconColorActive,
//  "--oj-icon-color-selected": $iconColorSelected,
//  "--oj-icon-color-disabled": $iconColorDisabled,
//  "--oj-drop-target-1-color": $dropTarget1Color,
//  "--oj-drop-target-2-color": $dropTarget2Color,
//  "--oj-color-required": $brandColorDark1
//);

// Map of Option default css vars
//$oj-css-option-defaults-map: (
//
//  --oj-private-core-global-dropdown-offset: 0,
//
//  --oj-private-avatar-global-shape-default: $avatarShapeOptionDefault,
//
//  --oj-private-conveyor-belt-global-arrow-visibility-default: $conveyorBeltArrowVisibilityOptionDefault,
//  
//  --oj-private-table-global-add-animation:  oj-json($tableAddAnimation),
//  --oj-private-table-global-remove-animation:  oj-json($tableRemoveAnimation),
//  --oj-private-table-global-update-animation:  oj-json($tableUpdateAnimation),
//  --oj-private-table-global-display-default:           $tableDisplayOptionDefault,
//  --oj-private-table-global-display-list-horizontal-grid-visible-default:    $tableHorizontalGridVisibleOptionDefault,
//  --oj-private-table-global-load-indicator-default:       $tableLoadIndicator,
//  --oj-private-table-global-enable-selector-default:       $tableEnableSelector,
//  --oj-private-table-global-sticky-default:       $tableEnableSticky,
//
//  --oj-private-core-global-loading-indicator-delay-duration: $loadingIndicatorDelayDuration,
//
//  --oj-private-button-global-chroming-default:   $buttonChromingOptionDefault,
//  --oj-private-buttonset-global-chroming-default: $buttonsetChromingOptionDefault,
//
//  --oj-private-toolbar-global-chroming-default: $toolbarChromingOptionDefault,
//  
//  --oj-private-off-canvas-global-display-mode-default: $offcanvasDisplayModeOptionDefault,
//
//  --oj-private-tree-view-global-expand-animation:                 oj-json($treeViewExpandAnimation),
//  --oj-private-tree-view-global-collapse-animation:               oj-json($treeViewCollapseAnimation),
//  --oj-private-tree-view-global-data-fadein-duration:             $treeViewDataFadeInDuration,
//  --oj-private-tree-view-global-selection-affordance-default:     $treeViewMultipleSelectionAffordance,
//  --oj-private-tree-view-global-load-indicator-default:   $treeViewLoadIndicator,
//
//  --oj-private-popup-global-modality-default: $popupModalityOptionDefault,
//
//  --oj-private-popup-global-open-animation-default: oj-json($popupOpenAnimation),
//  --oj-private-popup-global-close-animation-default: oj-json($popupCloseAnimation),
//  
//  --oj-private-menu-global-drop-down-open-animation:  oj-json($menuDropDownOpenAnimation),
//  --oj-private-menu-global-drop-down-close-animation:  oj-json($menuDropDownCloseAnimation),
//  --oj-private-menu-global-sheet-open-animation:  oj-json($menuSheetOpenAnimation),
//  --oj-private-menu-global-sheet-close-animation:  oj-json($menuSheetCloseAnimation),
//  --oj-private-menu-global-submenu-open-animation:  oj-json($menuSubmenuOpenAnimation),
//  --oj-private-menu-global-submenu-close-animation:  oj-json($menuSubmenuCloseAnimation),
//  --oj-private-menu-global-sheet-cancel-affordance: $menuSheetCancelAffordance,
//  --oj-private-menu-global-sheet-swipe-down-behavior: $menuSheetSwipeDownBehavior,
//  --oj-private-menu-global-drop-down-modality: $menuDropDownModality,
//  --oj-private-menu-global-sheet-modality: $menuSheetModality,
//  --oj-private-menu-global-sheet-margin-bottom: $menuSheetMarginBottom,
//
//  --oj-private-input-number-button-global-chroming-default: $inputNumberButtonChromingOptionDefault,
//  --oj-private-input-number-global-step-default: $inputNumberStepOptionDefault,
//  --oj-private-list-view-global-load-indicator-default: $listViewLoadIndicator,
//
//  --oj-private-list-view-global-add-animation-default: oj-json($listViewAddAnimation),
//  --oj-private-list-view-global-remove-animation-default: oj-json($listViewRemoveAnimation),
//  --oj-private-list-view-global-update-animation-default: oj-json($listViewUpdateAnimation),
//  --oj-private-list-view-global-expand-animation-default: oj-json($listViewExpandAnimation),
//  --oj-private-list-view-global-collapse-animation-default: oj-json($listViewCollapseAnimation),
//  --oj-private-list-view-global-pointerUp-animation-default: oj-json($listViewPointerUpAnimation),
//  
//  --oj-private-list-view-global-gridlines-item-default: $listViewGridlinesItemOptionDefault,
//  --oj-private-list-view-global-gridlines-top-default: $listViewGridlinesTopOptionDefault,
//  --oj-private-list-view-global-gridlines-bottom-default: $listViewGridlinesBottomOptionDefault,
//    
//  --oj-private-navigation-list-global-horizontal-add-animation-default: oj-json($navigationListHorizontalAddAnimation),
//  --oj-private-navigation-list-global-horizontal-remove-animation-default: oj-json($navigationListHorizontalRemoveAnimation),
//  --oj-private-navigation-list-global-add-animation-default: oj-json($navigationListAddAnimation),
//  --oj-private-navigation-list-global-remove-animation-default: oj-json($navigationListRemoveAnimation),
//  --oj-private-navigation-list-global-update-animation-default: oj-json($navigationListUpdateAnimation),
//  --oj-private-navigation-list-global-expand-animation-default: oj-json($navigationListExpandAnimation),
//  --oj-private-navigation-list-global-collapse-animation-default: oj-json($navigationListCollapseAnimation),
//  --oj-private-navigation-list-global-slider-expand-animation-default: oj-json($navigationListSliderExpandAnimation),
//  --oj-private-navigation-list-global-slider-collapse-animation-default: oj-json($navigationListSliderCollapseAnimation),
//  --oj-private-navigation-list-global-pointer-up-animation-default: oj-json($navigationListPointerUpAnimation),
//    
//  --oj-private-navigation-list-global-hierarchy-menu-threshold-default: $navigationListHierarchyMenuThresholdOptionDefault,
//  
//  --oj-private-tab-bar-global-horizontal-add-animation-default:  oj-json($tabBarHorizontalAddAnimation),
//  --oj-private-tab-bar-global-horizontal-remove-animation-default: oj-json($tabBarHorizontalRemoveAnimation),
//  --oj-private-tab-bar-global-add-animation-default: oj-json($tabBarAddAnimation),
//  --oj-private-tab-bar-global-remove-animation-default: oj-json($tabBarRemoveAnimation),
//  --oj-private-tab-bar-global-update-animation-default: oj-json($tabBarUpdateAnimation),
//  --oj-private-tab-bar-global-pointerUp-animation-default: oj-json($tabBarPointerUpAnimation)
//  
//);

// For quiet forms
//$formControlInsideInputHeight: 2.75rem !default;

/* This padding is needed to bring the text field below the label, so that the label and the text inside the text field don't overlap. */
//$formControlInsidePaddingTop: 0.85rem !default;
//$formControlInsideTextareaMarginTop: 1.25rem !default;
//$formControlInsideLabelFontSize: $smallFontSize !default;
//$formControlInsideLabelFontWeight: $formControlLabelFontWeight !default;
//$formControlInsideLabelLineHeight: normal !default;
//$formControlInsideLabelFontSize: $smallestFontSize !default;
//$formControlInsideBorderRightWidth: 1px !default; //TODO: use oj-shorthand-property-value-bottom($formControlBorderWidth)
//$formControlInsideBorderLeftWidth: 1px !default;
//$formControlInsideBorderBottomWidth: 1px !default;
//$formControlInsideBorderTopWidth: 1px !default;

// check for vars that have been renamed but the old var name is defined,
// if any are found an error will be thrown
@include oj-theming-vars-renamed();
// check for vars that have been removed but still defined somewhere, if found throw error
@include oj-theming-vars-removed();