@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: web !default;

// 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: $allowTagSelectors !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:    .875em !default;    // 14px

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

// text colors -
//    these variables are used broadly
//    in the widget files
//----------------------------------
//$textColor:                           $textColor3 !default;
//$primaryTextColor:                    $textColor1 !default;
//$secondaryTextColor:                  $textColor4 !default;
//$tertiaryTextColor:                   $textColor6 !default;
//$contrastTextColor:                   $neutralColor1 !default;
//$textColorDisabled:                   $textColor7 !default;
//$textColorError: $accentColorDanger5 !default;

//$formControlLabelColor:               $textColor5 !default;

//$headerTextColor:                     $textColor2 !default;

//$linkTextColor:                       $brandColorDark1 !default;
//$linkTextColorActive:                 $brandColorDark2 !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:          $textColor3 !default;
//$iconColorHover:    $brandColorDark1 !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:  1px !default;
//$mediumBorderRadius: 2px !default;
//$largeBorderRadius: 3px !default;

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

// // 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.4 !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: 1 !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: coverStart !default;
//$animationNavParentDefault: revealEnd !default;
//$animationNavSiblingEarlierDefault: null !default;
//$animationNavSiblingLaterDefault: null !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: underline !default;
//$linkFontWeightActive: normal !default;
//$linkBgColorActive: transparent !default;
//
//// PANEL
////-----------------------------------------------------------------------------
//
//// panel defaults:
//$panelPadding: oj-px-to-rem(12px, $baseFontSize: 14px) !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: $neutralColor8 !default;
//
//$panel2BgColor:     #e8f2fb !default;
//$panel2BorderColor: adjust-color($panel2BgColor, $lightness: $panelBorderColorLightnessAdjustment, $saturation: $panelBorderColorSaturationAdjustment) !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:     #fce8fe !default;
//$panel5BorderColor: adjust-color($panel5BgColor, $lightness: $panelBorderColorLightnessAdjustment, $saturation: $panelBorderColorSaturationAdjustment) !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: normal !default;
//
//// $header[1|2|3|4|5]FontWeight vars can be used
//// to override the default font weight, they are
//// applied to h[1|2|3|4|5] tags
//$header1FontWeight: 200   !default;
//$header2FontWeight: 300   !default;
//$header3FontWeight: 300   !default;
//$header4FontWeight: 400   !default;
//$header5FontWeight: 400   !default;
//$header6FontWeight: 400   !default;
//
//// $header[1|2|3|4|5]FontSize vars are
//// applied to h[1|2|3|4|5] tags
//$header1FontSize: oj-px-to-rem(34px, $baseFontSize: 14px) !default;
//$header2FontSize: oj-px-to-rem(24px, $baseFontSize: 14px) !default;
//$header3FontSize: $largestFontSize !default;
//$header4FontSize: $largeFontSize   !default;
//$header5FontSize: $mediumFontSize  !default;
//$header6FontSize: $mediumFontSize  !default;
//
//// the background variables below are for a header "container",
//// like the title bar of a dialog or an accordion header
//$headerBgColor: $neutralColor5 !default;
//$headerBgColorDisabled: $neutralColor3 !default;
//$headerBgImage: none !default;
//
//// WINDOW
////-----------------------------------------------------------------------------
//$windowBorderColor:   $neutralColor9 !default;
//$windowBorderWidth:   1px !default;
//$windowBgColor:       $neutralColor2 !default;
//
//// NOTE WINDOW
////-----------------------------------------------------------------------------
//$popupTailBorderColor: $windowBorderColor !default;
//$popupTailBorderWidth: $windowBorderWidth !default;
//$popupTailBgcolor: $windowBgColor !default;
//$popupTailBoxShadow: $mediumBoxShadow !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: $smallBorderRadius !default;
//$popupBoxShadow: $smallBoxShadow !default;
//
//// Placeholder for theme specific popup modality option override.
//$popupModalityOptionDefault: "modeless" !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:               calc(100% - 20px) !default;
//$messagesGeneralOverlayMinWidth: $messagesGeneralOverlayWidth !default;
//$messagesGeneralOverlayMaxWidth: $messagesGeneralOverlayWidth !default;
//$messagesGeneralOverlayBorderStyle: solid !default;
//$messagesGeneralOverlayBorderWidth:         $windowBorderWidth !default;
//$messagesGeneralOverlayBorderColor:         $neutralColor9 !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: $neutralColor1 !default;
//$messageGeneralOverlayBodyBgColor: $neutralColor1 !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:       320px !default;
//$messagesNotificationOverlayMaxWidth:       400px !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: 10px !default;
//$messageNotificationOverlayBorderStyle: solid !default;
//$messageNotificationOverlayBorderWidth:     $windowBorderWidth !default;
//$messageNotificationOverlayBorderColor:     $neutralColor9 !default;
//$messageNotificationOverlayBorderRadius: $smallBorderRadius !default;
//$messageNotificationOverlayBoxShadow: $smallBoxShadow !default;
//$messageNotificationOverlayHeaderBgColor: $neutralColor1 !default;
//$messageNotificationOverlayBodyBgColor: $neutralColor1 !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:                       36px !default;
//// valid values for messageCloseIconDisplay are none and block
//$messageCloseIconDisplay: block !default;
//$messageAutoTimeoutCloseIconDisplay:        block !default;
//$messageCategoryTextColor:                  $formControlLabelColor !default;
//$messageCategoryFontSize:                   oj-px-to-rem(12px, $baseFontSize: 14px)  !default;
//$messageCategoryFontWeight: 700 !default;
//$messageTimeTextColor:                      $textColor !default;
//$messageTimeFontSize:                       oj-px-to-rem(12px, $baseFontSize: 14px)  !default;
//$messageSummaryTextColor: $primaryTextColor !default;
//$messageSummaryFontSize: inherit !default;
//$messageSummaryFontWeight: 500 !default;
//$messageSummaryLineHeight:                  1.3 !default;
//$messageDetailTextColor:                    $textColor !default;
//$messageDetailFontSize: inherit !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:  oj-px-to-rem(10px, $baseFontSize: 16px) !default;
//
//// Header
//$appLayoutHybridHeaderTextColor: $textColor !default;
//$appLayoutHybridHeaderBorderColor: $neutralColor7 !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: 44px !default;
//$appLayoutHybridHeaderBoxShadow: none !default;
//$appLayoutHybridHeaderTitleFontSize:  oj-px-to-rem(18px, $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: none !default;
//
//// Nav Drawer
//$appLayoutHybridOffcanvasBgColor: $appLayoutWebOffcanvasBgColor !default;
//
//// OFFCANVAS
////----------------------------------------
//// options
//
//// values could be "push"(alta default/ios) or "overlay"(for android/windows)
//$offcanvasDisplayModeOptionDefault: push !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: "none" !default;
//
//// Controls whether a "glass pane" is displayed behind dropDown menus.
//// Valid values are "modal" and "modeless".
//$menuDropDownModality: "modeless" !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:   calc(#{$menuIconToEdgePadding} + #{$menuIconSize} + #{$menuTextToIconPadding}) !default; // Alta spec leaves a space for icons even if no item in the menu has an icon
//// 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:                         16px !default; // per theming discussion, force it to size required by Alta spec, but don't grow/shrink via rems in case of artifacts, and DO scale the surrounding space via rems.
//$menuIconToEdgePadding:                oj-px-to-rem(8px, $baseFontSize: 14px) !default;
//$menuTextToIconPadding:                $menuIconToEdgePadding !default;
//
//// padding on both left and right of submenu icon:
//$menuSubmenuIconPadding: 0 !default; // end-aligned per Alta spec
//
//// menu parts
////----------------------------------
//
//// menus (.oj-menu), whether top-level or submenu
//$menuBorderWidth: 1px !default;
//$menuBorderColor: $popupBorderColor !default;
//$menuBorderRadius: 0 !default;
//$menuBgColor: $popupBgColor !default;
//$menuPadding: 0 !default; // top/bottom padding
//
//// top-level menus (.oj-menu.oj-component)
//$menuBoxShadow:           $smallBoxShadow !default;
//
//// submenus (.oj-menu.oj-menu-submenu)
//$menuSubmenuBoxShadow:    $menuBoxShadow !default;
//
//// menu items (.oj-menu-item) and their anchors
//$menuItemBorderColor: transparent !default;
//$menuItemTextColor: $primaryTextColor !default;
//$menuItemLineHeight: 2.5rem !default; // 30px @12px font, per Alta spec, 35px @14px font.
//$menuItemTopBorderWidth:               0px !default;
//$menuItemBottomBorderWidth:            0px !default;
//
//// disabled menu items and their anchors
//$menuItemTextColorDisabled: $textColorDisabled !default;
//
//// focused menu items (.oj-focus) and their ancestor menu items (.oj-focus-ancestor)
//$menuItemBgColorFocus: $neutralColor6 !default;
//$menuItemBorderColorFocus: transparent !default;
//
//// menu icons (.oj-menu-item-icon), not submenu icons
//$menuIconColor: $iconColorDefault !default;
//
//// disabled menu icons, not submenu icons
//$menuIconColorDisabled:   $iconColorDisabled !default;
//$menuIconOpacityDisabled: $opacityDisabled !default;
//
//// submenu icons
//$menuSubmenuIconColor: inherit !default;
//
//// menu group dividers (.oj-menu-divider, different than the border that iOS puts between every menu item)
//$menuDividerMargin:       1px !default; // This spacing is on all 4 sides, including left/right, per Alta spec. rem not em since font-size 0.
//$menuDividerBorderWidth: 1px !default;
//$menuDividerBorderColor: $menuBorderColor !default;
//
//// sheet menus
////----------------------------------
//
//// sheet menus (.oj-menu-sheet)
//$menuSheetFontSize: $fontSize !default;
//$menuSheetBorderRadius: $menuBorderRadius !default;
//$menuSheetBgColor: $menuBgColor !default;
//$menuSheetMarginHorizontal: 0px !default;
//// $menuSheetMarginBottom value must be 0, px, or %, e.g. 0, 10px, 5%
//$menuSheetMarginBottom:   14px !default; // value must be 0, px, or %, e.g. 0, 10px, 5%
//
//// sheet menu items (.oj-menu-item) and their anchors
//$menuSheetItemBorderColor: $menuItemBorderColor !default;
//$menuSheetItemBgColor: transparent !default;
//$menuSheetItemTextColor: $menuItemTextColor !default;
//$menuSheetItemLineHeight: $menuItemLineHeight !default;
//$menuSheetItemTopBorderWidth:          0px !default;
//
//// disabled sheet menu items and their anchors
//$menuSheetItemTextColorDisabled: $menuItemTextColorDisabled !default;
//
//// focused sheet menu items (.oj-focus)
//$menuSheetItemBgColorFocus: $menuItemBgColorFocus !default;
//$menuSheetItemBorderColorFocus: $menuItemBorderColorFocus !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: normal !default;
//$buttonBorderRadius: $mediumBorderRadius !default;
//$buttonCursor: default !default;
//
//$buttonHeight:       oj-px-to-rem(32px, $baseFontSize: 14px) !default;
//$buttonSmallHeight:  2rem !default;
//$buttonLargeHeight: 3rem !default;
//$buttonXlargeHeight: 3.42857rem !default;
//
//$buttonFontSize:       $fontSize !default;
//$buttonSmallFontSize:  $buttonFontSize !default;
//$buttonLargeFontSize:  $buttonFontSize !default;
//$buttonXlargeFontSize: $buttonFontSize !default;
//
//// button padding
////----------------------------------
//// Horiz space between text and edge of button when no intervening icon.
//$buttonTextToEdgePadding:       oj-px-to-rem(13px, $baseFontSize: 14px) !default;
//$buttonSmallTextToEdgePadding:  oj-px-to-rem(11px, $baseFontSize: 14px) !default;
//$buttonLargeTextToEdgePadding: oj-px-to-rem(20px, $baseFontSize: 14px) !default;
//$buttonXlargeTextToEdgePadding: $buttonLargeTextToEdgePadding !default;
//
//// Horiz space between text and icon.
//$buttonIconToTextPadding:       oj-px-to-rem(6px, $baseFontSize: 14px) !default;
//$buttonSmallIconToTextPadding:  $buttonIconToTextPadding !default;
//$buttonLargeIconToTextPadding: $buttonIconToTextPadding !default;
//$buttonXlargeIconToTextPadding: $buttonLargeIconToTextPadding !default;
//
//// Horiz space between icon and edge of button when text also showing.
//$buttonIconToEdgePadding:       oj-px-to-rem(12px, $baseFontSize: 14px) !default;
//$buttonSmallIconToEdgePadding:  oj-px-to-rem(11px, $baseFontSize: 14px) !default;
//$buttonLargeIconToEdgePadding: oj-px-to-rem(15px, $baseFontSize: 14px) !default;
//$buttonXlargeIconToEdgePadding: $buttonLargeIconToEdgePadding !default;
//
//// Horiz space between icon and edge of button when icon only.
//$buttonIconOnlyPadding:       oj-px-to-rem(8px, $baseFontSize: 14px) !default;
//$buttonSmallIconOnlyPadding:  oj-px-to-rem(6px, $baseFontSize: 14px) !default;
//$buttonLargeIconOnlyPadding: oj-px-to-rem(12px, $baseFontSize: 14px) !default;
//$buttonXlargeIconOnlyPadding: oj-px-to-rem(14px, $baseFontSize: 14px) !default;
//
//// button states
////----------------------------------
//// default
//$buttonBgColor:                   $neutralColor6 !default;
//$buttonTextColor:                 $textColor1 !default;
//$buttonIconColor:                 $iconColorDefault !default;
//$buttonBorderColor:               $neutralColor9 !default;
//$buttonInternalBorderColor:       $neutralColor9 !default;
//$buttonBgImage:                   none !default;
//  to bottom,
//  #ffffff 0%,
//  #f1f3f4 3.64%,
//  #e8ebed 50%,
//  $buttonBgColor 100%
//) !default;
//$buttonTextShadow: none !default;
//$buttonBoxShadow: none !default;
//
//// hover
//$buttonBgColorHover:              $neutralColor4 !default;
//$buttonTextColorHover:            $brandColorDark1 !default;
//$buttonIconColorHover:            $iconColorHover !default;
//$buttonBorderColorHover:          $buttonBorderColor !default;
//$buttonBgImageHover: none !default;
//$buttonTextShadowHover: none !default;
//$buttonBoxShadowHover: $buttonBoxShadow !default;
//
//// active
//$buttonBgColorActive:             $brandColor !default;
//$buttonTextColorActive:           $neutralColor1 !default;
//$buttonIconColorActive:           $buttonTextColorActive !default;
//$buttonBorderColorActive:         $brandColor !default;
//$buttonInternalBorderColorActive: $buttonBorderColor !default;
//$buttonBgImageActive: none !default;
//$buttonTextShadowActive: none !default;
//$buttonBoxShadowActive: $buttonBoxShadow !default;
//$buttonOpacityActive: 1 !default;
//
//// selected - default to use active values
//$buttonBgColorSelected: $buttonBgColorActive !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:    $buttonIconColorHover !default;
//$buttonIconColorSelectedHover: $buttonIconColorHover !default;
//$buttonBgColorSelectedHover: $buttonBgColorActive !default;
//$buttonBorderColorSelectedHover: $buttonBorderColorActive !default;
//
//// disabled
//$buttonBgColorDisabled:           $neutralColor4 !default;
//$buttonTextColorDisabled:         $textColorDisabled !default;
//$buttonIconColorDisabled: $iconColorDisabled !default;
//$buttonBorderColorDisabled:       $neutralColor7 !default;
//$buttonOpacityDisabled:           $opacityDisabled !default;
//$buttonBoxShadowDisabled: none !default;
//
//// disabled and selected
//$buttonTextColorSelectedDisabled:            $buttonTextColorSelected !default;
//$buttonIconColorSelectedDisabled:            $buttonTextColorSelectedDisabled !default;
//$buttonBgColorSelectedDisabled:              $neutralColor9 !default;
//$buttonBorderColorSelectedDisabled: $buttonBgColorSelectedDisabled !default;
//$buttonInternalBorderColorSelectedDisabled:  $buttonBorderColorDisabled !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: full !default;
//
//// half chrome
//$buttonHalfChromeFontWeight: normal !default; // from Alta menu spec, half-chrome button section
//
//// half chrome default
//$buttonHalfChromeTextColor: $buttonTextColor !default;
//$buttonHalfChromeIconColor:           $iconColorDefault !default;
//
//// half chrome hover
//$buttonHalfChromeTextColorHover: $buttonTextColorHover !default;
//$buttonHalfChromeIconColorHover:          $buttonIconColorHover !default;
//$buttonHalfChromeBgColorHover: $buttonBgColorHover !default;
//$buttonHalfChromeBorderColorHover:        $buttonBorderColorHover !default;
//
//// half chrome active
//$buttonHalfChromeTextColorActive: $buttonTextColorActive !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: $buttonTextColorSelectedHover !default;
//$buttonHalfChromeIconColorSelectedHover: $buttonHalfChromeTextColorSelectedHover !default;
//$buttonHalfChromeBgColorSelectedHover: $buttonBgColorSelectedHover !default;
//$buttonHalfChromeBorderColorSelectedHover: $buttonBorderColorSelectedHover !default;
//
//// half chrome disabled
//$buttonHalfChromeTextColorDisabled:       $buttonTextColorDisabled !default;
//$buttonHalfChromeIconColorDisabled:       $iconColorDisabled !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:                  $buttonHalfChromeBorderColorHover !default;
//$buttonOutlinedChromeInternalBorderColor:          $neutralColor9 !default;
//
//// outlined hover
//$buttonOutlinedChromeTextColorHover: $buttonHalfChromeTextColorHover !default;
//$buttonOutlinedChromeIconColorHover: $buttonHalfChromeIconColorHover !default;
//$buttonOutlinedChromeBgColorHover: $buttonHalfChromeBgColorHover !default;
//$buttonOutlinedChromeBorderColorHover:             $buttonOutlinedChromeBorderColor !default;
//
//// outlined active
//$buttonOutlinedChromeTextColorActive: $buttonHalfChromeTextColorActive !default;
//$buttonOutlinedChromeIconColorActive: $buttonHalfChromeIconColorActive !default;
//$buttonOutlinedChromeBgColorActive: $buttonHalfChromeBgColorActive !default;
//$buttonOutlinedChromeBorderColorActive: $buttonHalfChromeBorderColorActive !default;
//$buttonOutlinedChromeInternalBorderColorActive:    $buttonInternalBorderColorActive !default;
//$buttonOutlinedChromeOpacityActive: $buttonHalfChromeOpacityActive !default;
//
//// outlined selected
//$buttonOutlinedChromeTextColorSelected: $buttonHalfChromeTextColorSelected !default;
//$buttonOutlinedChromeIconColorSelected: $buttonHalfChromeIconColorSelected !default;
//$buttonOutlinedChromeBgColorSelected: $buttonHalfChromeBgColorSelected !default;
//$buttonOutlinedChromeBorderColorSelected: $buttonHalfChromeBorderColorSelected !default;
//$buttonOutlinedChromeInternalBorderColorSelected:  $buttonInternalBorderColorSelected !default;
//
//// outlined selected and hovered
//$buttonOutlinedChromeTextColorSelectedHover: $buttonHalfChromeTextColorSelectedHover !default;
//$buttonOutlinedChromeIconColorSelectedHover: $buttonHalfChromeIconColorSelectedHover !default;
//$buttonOutlinedChromeBgColorSelectedHover: $buttonBgColorSelectedHover !default;
//$buttonOutlinedChromeBorderColorSelectedHover: $buttonBorderColorSelectedHover !default;
//
//// outlined disabled
//$buttonOutlinedChromeTextColorDisabled:       $buttonHalfChromeTextColorDisabled !default;
//$buttonOutlinedChromeIconColorDisabled:       $buttonHalfChromeIconColorDisabled !default;
//$buttonOutlinedChromeBorderColorDisabled:     $neutralColor9!default;
//$buttonOutlinedChromeOpacityDisabled: $buttonHalfChromeOpacityDisabled !default;
//
//// outlined disabled and selected
//$buttonOutlinedChromeTextColorSelectedDisabled: $buttonHalfChromeTextColorSelectedDisabled !default;
//$buttonOutlinedChromeIconColorSelectedDisabled: $buttonHalfChromeIconColorSelectedDisabled !default;
//$buttonOutlinedChromeBgColorSelectedDisabled: $buttonHalfChromeBgColorSelectedDisabled !default;
//$buttonOutlinedChromeBorderColorSelectedDisabled: $buttonHalfChromeBorderColorSelectedDisabled !default;
//$buttonOutlinedChromeInternalBorderColorSelectedDisabled:  $buttonOutlinedChromeBorderColorDisabled !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: null !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: resizable !default;
//$dialogCancelBehaviorOptionDefault: icon !default;
//$dialogDragAffordanceOptionDefault: title-bar !default;
//
//$dialogBoxShadow:           $largeBoxShadow !default;
//$dialogBorderRadius:        1px !default;
//$dialogBorderWidth: $windowBorderWidth !default;
//$dialogBorderColor: $windowBorderColor !default;
//$dialogBgColor: $windowBgColor !default;
//
//$dialogHeaderPadding: $panelPadding $panelPadding $panelPadding !default;
//$dialogBodyPadding: $panelPadding !default;
//$dialogFooterPadding: $panelPadding !default;
//
//$dialogHeaderFontSize: $header3FontSize !default;
//$dialogHeaderBorderColor:   $windowBorderColor !default;
//$dialogHeaderBgColor: $headerBgColor !default;
//$dialogHeaderTextColor: $headerTextColor !default;
//$dialogHeaderBgImage: $headerBgImage !default;
//
//// Alignment of the dialog header text.
//// Possible values are and 'center' and 'start'
//$dialogHeaderTextAlign:     startSingleRow !default;
//// Vertical position of the close icon.
//// Possible values are 'top' and 'center'
//// (the close icon is always on the right in ltr)
//$dialogCloseIconPosition:   center !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: $fontSize !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: 0.5em !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: $buttonHeight !default; // make the form controls and buttons the same height so they line up nicely
//
//// $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: 18em !default;
//$formControlMediumMaxWidth: 15em !default;
//$formControlMinWidth: 8em !default;
//
//// form control common
////----------------------------------
//$formControlBorderRadius: $mediumBorderRadius !default;
//$formControlBorderWidth: 1px 1px 1px 1px !default;
//
//// controls the horizontal padding inside an input
//$formControlPaddingHorizontal: 5px !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:             $neutralColor2 !default;
//$formControlBorderColor: $neutralColor7 !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: $formControlBgColor !default;
//
//// *****focus*****
//$formControlInputBorderColorFocus: $formControlBorderColor !default;
//$formControlInputBorderWidthFocus: $formControlBorderWidth !default;
//
//// *****readonly*****
//$formControlValueColorReadOnly: $textColor !default;
//$formControlFontSizeReadOnly: $formControlInputFontSize !default;
//$formControlFontWeightReadOnly: normal !default;
//
//// *****disabled*****
//$formControlBgColorDisabled:     $neutralColor6 !default;
//$formControlValueColorDisabled:  $textColorDisabled !default;
//$formControlBorderColorDisabled: $formControlBgColorDisabled !default;
//$formControlOpacityDisabled: 1 !default;
//
//// *****placeholder*****
//$formControlPlaceholderColor: $tertiaryTextColor !default;
//$formControlPlaceholderFontStyle: italic !default;
//
//// form control option defaults
////----------------------------------
//$formControlLabelEdgeDefault: provided !default;
//$inputFormControlReadonlyDefault: input !default;
//$formControlUseUserAssistanceOptionDefault: ignore !default;
//
//// FORM LAYOUT
////-----------------------------------------------------------------------------
//
//// outer border
//$formLayoutBorderColor: null !default;
//// divider between rows
//$formLayoutDividerColor: null !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: 0px !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: 0.4em !default;
//
//// in a form layout when the labels are inline what is the
//// default label alignment, legal values are start and end
//$formLayoutLabelInlineAlign: end !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: null !default;
//
//// INPUT NUMBER
//// the spacing between the input and the buttonset
//$inputNumberInputToButtonMargin: 0 !default;
//
////inputnumber up and down button width
//$inputNumberButtonWidth: auto !default;
//
////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: end !default;
//
//$radioCheckboxRowHeight: 1.9rem !default;
//
//// spacing between edge and the label text
//$radioCheckboxLabelToEdgePadding: 0 !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: .6rem !default;
//
//// radioset and checkboxset states
////----------------------------------
////default
//$radioCheckboxSetBorderColor: null !default;
//$radioCheckboxSetBgColor: transparent !default;
//$radioCheckboxItemDividerColor: transparent !default;
//$radioCheckboxLabelColor: $textColor !default;
//
//// active
//$radioCheckboxItemBgColorActive: transparent !default;
//$radioCheckboxItemDividerColorActive: $radioCheckboxItemDividerColor !default;
//
//// selected
//$radioCheckboxLabelColorSelected: $radioCheckboxLabelColor !default;
//
//// SELECT
////----------------------------------------
//
////options
//$selectRenderModeOptionDefault: jet !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: null !default;
//
//// INPUT TEXT, INPUT PASSWORD, TEXT AREA
////-----------------------------------------------------------------------------
//$inputTextBorderStyleDisabled: solid !default;
//$inputTextTextAlign: null !default;
//$textAreaLineHeight: 1.2 !default;
//
////INPUT SEARCH
////--------------------------------------------------------------
//$inputSearchBgColor: $formControlBgColor !default;
//$inputSearchBgColorDisabled: $formControlBgColorDisabled !default;
//$inputSearchIconPosition: end !default; // Possible values are 'start' and 'end'
//$inputSearchIconPadding: 0 $formControlPaddingHorizontal 0 0 !default;
//
//// SLIDER
////-----------------------------------------------------------------------------
//
//// Thumb dimensions used in horizontal sliders.
//$sliderThumbWidth: 24px !default;
//$sliderThumbHeight: $sliderThumbWidth !default;
//
//// Thumb dimensions for the active state.
//$sliderThumbWidthActive: $sliderThumbWidth !default;
//$sliderThumbHeightActive: $sliderThumbWidthActive !default;
//
//$sliderThumbBorderWidth: 2px !default;
//$sliderThumbBorderRadius: 50% !default;
//$sliderThumbBoxShadow: none !default;
//
//// Hit areas
//$sliderThumbHitArea: 28px !default;
//$sliderBarHitArea: 36px !default;
//
//$sliderBarThickness:            4px !default;
//
//// colors for enabled state
//$sliderThumbBgColor: $neutralColor1 !default;
//$sliderThumbBorderColor:              $neutralColor11 !default;
//$sliderBarBgColor: $neutralColor8 !default;
//$sliderBarValueBgColor: $brandColor !default;
//
//// hover
//$sliderThumbBgColorHover:       $neutralColor6 !default;
//
//// active
//$sliderThumbBgColorActive: $sliderThumbBgColorHover !default;
//$sliderThumbBorderColorActive: $sliderThumbBorderColor !default;
//$sliderBarValueBgColorActive: $sliderBarValueBgColor !default;
//
//// thumb disabled
//$sliderThumbBgColorDisabled:          $neutralColor8 !default;
//$sliderThumbBorderColorDisabled:      $sliderThumbBgColorDisabled !default;
//$sliderBarBgColorDisabled:            $sliderThumbBgColorDisabled !default;
//$sliderBarValueBgColorDisabled:       $sliderThumbBgColorDisabled !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: $sliderColorPickerThumbWidth !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; // 2.286rem = 32px when base font 14px
//$switchContainerWidth: $formControlTriggerHeight * 1.875 !default;
//
//// TRACK HEIGHT/WIDTH
//$switchTrackHeight: $switchContainerHeight !default; // 32px
//$switchTrackWidth: $switchContainerHeight * 1.625 !default; // 52px
//
//// TRACK BORDERS
//$switchTrackBorderWidth: 1px !default;
//$switchTrackBorderWidthReadonly: $switchTrackBorderWidth !default;
//
//// THUMB BORDERS
//$switchThumbBorderWidth: $switchTrackBorderWidth !default;
//$switchThumbBorderWidthReadonly: $switchTrackBorderWidthReadonly !default;
//
//// ENABLED OFF
//$switchThumbHeight: $switchContainerHeight * 0.9375 !default; // 30px
//$switchThumbWidth: $switchThumbHeight !default;
//$switchThumbShadow: 0 2px 2px -2px unquote("hsla(#{$boxShadowHsl},0.9)") !default;
//// ----- COLORS -----
//$switchTrackBgColor: $buttonBgColorHover !default;
//$switchTrackBorderColor: $neutralColor7 !default;
//$switchThumbBgColor: $neutralColor1 !default;
//$switchThumbBorderColor: $neutralColor10 !default;
//
//// ENABLED ON
//$switchThumbHeightSelected: $switchContainerHeight * 0.875 !default; // 28px
//$switchThumbWidthSelected: $switchThumbHeightSelected !default;
//$switchThumbShadowSelected: 0 2px 2px -2px unquote("hsl(#{$boxShadowHsl})") !default;
//// ----- COLORS -----
//$switchTrackBgColorSelected: $brandColor !default;
//$switchTrackBorderColorSelected: $switchTrackBgColorSelected !default;
//$switchThumbBgColorSelected: $neutralColor1 !default;
//$switchThumbBorderColorSelected: $switchThumbBgColorSelected !default;
//
//// HOVER OFF
//$switchThumbHeightHover: $switchThumbHeight !default;
//$switchThumbWidthHover: $switchThumbWidth !default;
//$switchThumbBorderWidthHover: $switchThumbBorderWidth !default;
//// ----- COLORS -----
//$switchTrackBgColorHover: $neutralColor8 !default;
//$switchTrackBorderColorHover: $switchTrackBgColorHover !default;
//$switchThumbBgColorHover: $neutralColor2 !default;
//$switchThumbBorderColorHover: $switchThumbBorderColor !default;
//
//// HOVER ON
//$switchThumbHeightSelectedHover: $switchThumbHeightSelected !default;
//$switchThumbWidthSelectedHover: $switchThumbWidthSelected !default;
//$switchThumbBorderWidthSelectedHover: $switchThumbBorderWidthHover !default;
//// ----- COLORS -----
//$switchTrackBgColorSelectedHover: $iconColorHover !default;
//$switchTrackBorderColorSelectedHover: $switchTrackBgColorSelectedHover !default;
//$switchThumbBgColorSelectedHover: $switchThumbBgColor !default;
//$switchThumbBorderColorSelectedHover: $switchThumbBgColorSelectedHover !default;
//
//// ACTIVE OFF
//$switchThumbHeightActive: $switchThumbHeight !default;
//$switchThumbWidthActive: $switchContainerHeight * 1.0625 !default; // 34px
//$switchThumbBorderWidthActive: $switchThumbBorderWidthHover !default;
//// ----- COLORS -----
//$switchTrackBgColorActive: $switchTrackBgColor !default;
//$switchTrackBorderColorActive: $switchTrackBorderColor !default;
//$switchThumbBgColorActive: $switchThumbBgColor !default;
//$switchThumbBorderColorActive: $switchThumbBorderColor !default;
//
//// ACTIVE ON
//$switchThumbHeightSelectedActive: $switchThumbHeightSelected !default;
//$switchThumbWidthSelectedActive: $switchThumbWidthActive !default;
//$switchThumbBorderWidthSelectedActive: $switchThumbBorderWidthHover !default;
//// ----- COLORS -----
//$switchTrackBgColorSelectedActive: $switchTrackBgColorSelected !default;
//$switchTrackBorderColorSelectedActive: $switchTrackBorderColorSelected !default;
//$switchThumbBgColorSelectedActive: $switchThumbBgColorSelected !default;
//$switchThumbBorderColorSelectedActive: $switchThumbBorderColorSelected !default;
//
//// READONLY OFF
//$switchThumbHeightReadonly: $switchThumbHeight !default;
//$switchThumbWidthReadonly: $switchThumbHeight !default;
//// ----- COLORS -----
//$switchTrackBgColorReadonly: transparent !default;
//$switchTrackBorderColorReadonly: $switchTrackBgColorReadonly !default;
//$switchThumbBgColorReadonly: $switchTrackBgColorReadonly !default;
//$switchThumbBorderColorReadonly: $switchTrackBgColorReadonly !default;
//
//// READONLY ON
//$switchThumbHeightSelectedReadonly: $switchThumbHeight !default;
//$switchThumbWidthSelectedReadonly: $switchThumbHeight !default;
//// ----- COLORS -----
//$switchTrackBgColorSelectedReadonly: transparent !default;
//$switchTrackBorderColorSelectedReadonly: $switchTrackBgColorSelectedReadonly !default;
//$switchThumbBgColorSelectedReadonly: $switchTrackBgColorSelectedReadonly !default;
//$switchThumbBorderColorSelectedReadonly: $switchTrackBgColorSelectedReadonly !default;
//
//// DISABLED OFF
//$switchThumbHeightDisabled: $switchThumbHeightSelected !default;
//$switchThumbWidthDisabled: $switchThumbWidthSelected !default;
//// ----- COLORS -----
//$switchTrackBgColorDisabled: $neutralColor6 !default;
//$switchTrackBorderColorDisabled: $switchTrackBgColorDisabled !default;
//$switchThumbBgColorDisabled: $iconColorDisabled !default;
//$switchThumbBorderColorDisabled: $switchThumbBgColorDisabled !default;
//
//// DISABLED ON
//$switchThumbHeightSelectedDisabled: $switchThumbHeightSelected !default;
//$switchThumbWidthSelectedDisabled: $switchThumbWidthSelected !default;
//// ----- COLORS -----
//$switchTrackBgColorSelectedDisabled: $switchThumbBgColorDisabled !default;
//$switchTrackBorderColorSelectedDisabled: $switchTrackBgColorSelectedDisabled !default;
//$switchThumbBgColorSelectedDisabled: $switchTrackBgColorDisabled !default;
//$switchThumbBorderColorSelectedDisabled: $switchThumbBgColorSelectedDisabled !default;
//
//// 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:           $neutralColor5 !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:    jet !default;
//$inputDateTimeDatePickerOptionDefault: (
//  footerLayout: "today"
//) !default;
//
//$inputDateTimeKeyboardEditOptionDefault:  enabled !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: 4px !default;
//$progressBarBgColor: $brandColor !default;
//$progressBarBgOpacity:                   0.3 !default;
//$progressBarBorderColor: $neutralColor7 !default;
//$progressBarBorderRadius: 0 !default;
//$progressBarBorderStyle: none !default;
//
//$progressBarIndeterminateOverlayImage:   "images/animated-overlay.gif" !default;
//$progressBarIndeterminateOverlayOpacity: 0 !default;
//$progressBarIndeterminateAnimationDuration: 1s !default;
//
//$progressCircleIndeterminateOverlayImage: null !default;
//$progressCircleIndeterminateOverlaySize:  null !default;
//$progressCircleIndeterminateAnimationDuration: 1s !default;
//
//$progressCircleSize: 32px !default;
//$progressCircleBgColor: $progressBarBgColor !default;
//$progressCircleBgOpacity: $progressBarBgOpacity !default;
//// TRAIN
////-----------------------------------------------------------------------------
//
//// unvisited state
//$trainBgColor:                            $neutralColor1 !default;
//$trainBorderColor:                        $iconColorDefault !default;
//$trainLabelColor:                         $textColor !default;
//$trainButtonTextColor:                    $textColor !default;
//
//// visited state
//$trainBgColorVisited:                     $trainBgColor !default;
//$trainBorderColorVisited:                 $trainBorderColor !default;
//$trainLabelColorVisited:                  $trainLabelColor !default;
//$trainButtonTextColorVisited:             $brandColor !default;
//$trainVisitedIconDisplay:                 inherit !default;
//$trainButtonTextVisitedDisplay:           none !default;
//
//// selected state
//$trainBgColorSelected:                    $brandColor !default;
//$trainBorderColorSelected:                $trainBgColorSelected !default;
//$trainButtonTextColorSelected:            $contrastTextColor !default;
//$trainLabelFontWeightSelected:            500 !default;
//
//// disabled state
//$trainBgColorDisabled:                    $trainBgColor !default;
//$trainBorderColorDisabled:                $neutralColor8 !default;
//$trainLabelColorDisabled:                 $textColorDisabled !default;
//$trainOpacityDisabled:                    $opacityDisabled !default;
//$trainButtonTextColorDisabled:            $trainLabelColorDisabled !default;
//
//// hover state
//$trainBgColorHover:                       $iconColorHover !default;
//$trainBorderColorHover:                   $trainBgColorHover !default;
//$trainButtonTextColorHover:              $contrastTextColor !default;
//
//// active state
//$trainBgColorActive:                      $trainBgColorSelected !default;
//$trainBorderColorActive:                  $trainBgColorActive !default;
//$trainLabelTextDecorationActive:          none !default;
//$trainLabelFontWeightActive:              500 !default;
//$trainButtonTextColorActive:              $trainButtonTextColorSelected !default;
//
//// button label
//$trainButtonFontSize:                     13px !default;
//
//// the default width of a step
//$trainStepWidth:                          98px !default;
//
//$trainLabelPaddingTop:                    14px !default;
//
//// $trainLabelTextWrap accepts css white-space
//// values such as normal or nowrap
//$trainLabelTextWrap: normal !default;
//
//// the diameter of the "button" representing a stop
//$trainButtonDiameter:                     28px !default;
//$trainButtonBorderWidth:                  2px !default;
//
//// message icon diameter
//$trainIconDiameter: $trainButtonDiameter !default;
//$trainButtonMessagingIconColor:           $neutralColor1 !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:                   $neutralColor7 !default;
//$trainConnectorHeight:                    2px !default;
//$trainConnectorHasFill: 0 !default;
//$trainContinuousConnectorBgColorSelected: transparent !default;
//$trainIndividualConnectorBgColorSelected: $neutralColor10 !default;
//$trainConnectorContinuousBgColor: $trainConnectorBgColor !default;
//
//// padding for individual connector
//$trainIndividualConnectorPadding: 10px !default;
//$trainIndividualConnectorPaddingSelected: 0 !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: $neutralColor2 !default;
//// Headers
//$collectionCellPadding:                 0.5em !default;
//$collectionHeaderFontWeight: $headerFontWeight !default;
//$collectionHeaderTextColor: $headerTextColor !default;
//$collectionHeaderFontSize: inherit !default;
//// Headers content alignment
//$collectionColumnHeaderJustifyContent: center !default;
//$collectionColumnHeaderAlignItems: center !default;
//$collectionRowHeaderJustifyContent: flex-start !default;
//$collectionRowHeaderAlignItems: center !default;
//// Headers - Default
//$collectionHeaderBgColor: $neutralColor4 !default;
//$collectionHeaderBorderColor: $collectionBorderColor !default;
//// Headers - Hover
//$collectionHeaderBgColorHover: $neutralColor8 !default;
//// Headers - Focus
//$collectionHeaderBgColorFocus: $brandColorLight2 !default;
//// Headers - Selected
//$collectionHeaderBgColorSelected: $brandColorLight3 !default;
//// Headers - Selected Inactive (selected but focus outside the component)
//$collectionHeaderBgColorSelectedInactive: $neutralColor5 !default;
//// Headers - Dragged
//$collectionHeaderBgColorDrag: $brandColorLight4 !default;
//$collectionHeaderDragImageBorderColor: $brandColor !default;
//
//// Cells
//$collectionCellTextColor: $textColor !default;
//$collectionCellFontSize: inherit !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: $brandColorLight5 !default;
//$collectionCellBorderColorSelected: transparent !default;
//// Cells - Selected Inactive (selected but focus outside the component)
//$collectionCellBgColorSelectedInactive: $brandColorLight5 !default;
//$collectionCellBorderColorSelectedInactive: $collectionCellBorderColor !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,
//  $formControlTriggerHeight
//) !default;
//$collectionHeaderHeight: $collectionRowHeight !default;
//$collectionColumnWidth: 4.166rem !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:         $brandColorLight4 !default;
//$treeViewItemBgColorSelectedInactive: $brandColorLight4 !default;
//
//// 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.5rem !default;
//
//// PAGING CONTROL
////-----------------------------------------------------------------------------
//// padding between various elements of the paging control
//$pagingPadding: 5px !default;
//$pagingDotSize:           10px !default;
//$pagingDotPadding:        10px !default;
//$pagingBorderColor: $neutralColor8 !default;
//
//// LISTVIEW
////-----------------------------------------------------------------------------
//
//$listViewAnimationDuration: $animationDurationMedium !default;
//$listViewHeaderBorderWidth:          1px !default;
//$listViewHeaderBorderWidthCollapsed: 1px 1px 0 !default;
//$listViewHeaderFontSize: $header4FontSize !default;
//$listViewHeaderOpacity: 1 !default;
//$listViewHeaderFontWeight: $headerFontWeight !default;
//$listViewItemBorderPosition: 0 !default;
//// the right and left margins will be flipped in rtl languanges
//$listViewCardMargin: $spacingMedium $spacingMedium 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: "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:              $linkTextColor !default;
//// text color of the prefix in the indexer in disabled state
//$indexerTextColorDisabled:      $textColorDisabled !default;
//// text decoration of the prefix in the indexer
//$indexerTextDecoration: none !default;
//// text decoration of the prefix in the indexer when hover
//$indexerTextDecorationHover:    underline !default;
//// font weight of the prefix in the indexer
//$indexerFontWeight:             normal !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: 16px !default;
//// height of the selector
//$selectorHeight: 16px !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:                         $linkTextColor !default;
//$navigationListItemIconColorDefault:                          $iconColorDefault !default;
//$navigationListCollapsibleIconColorDefault:                   $iconColorDefault !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:                        $linkTextColorDisabled !default;
//$navigationListIconColorDisabled:                             $iconColorDisabled !default;
//
//// category divider - used between categories
//$navigationListCategoryDividerColor:                          $neutralColor8 !default;
//
////sizing
//$navigationListItemMinHeight:                                 oj-px-to-rem(44px, $baseFontSize: 14px) !default;   //applies to vertical only
//  43px,
//  $baseFontSize: 16px
//) !default; // only applies to vertical navlist.
//// Not applicable to icon-only
//$navigationListItemStartEndPadding:                           oj-px-to-rem(15px, $baseFontSize: 14px) !default;
//  10px,
//  $baseFontSize: 16px
//) !default;
//$navigationListIconToTextPadding:                             oj-px-to-rem(10px, $baseFontSize: 14px) !default;
//  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:                     $neutralColor1 !default;
//
////----------NavigationList(vertical) icon only variables
//
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$navigationListIconOnlyStyle:                                 circle !default;
////Padding between items
//$navigationListIconOnlyItemPadding:                           4px 0 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:              $neutralColor11 !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:           3 !default;
//
////------Horizontal list variables----
//
//// Default
////$navigationListHorizontalItemBorderColor:                  transparent !default;
//$navigationListHorizontalItemLabelColorDefault:               $textColor4 !default;
//$navigationListHorizontalItemIconColorDefault:                $neutralColor15 !default;
//
//// divider - used between text items when horizontal
//$navigationListHorizontalItemDividerColor:                    $neutralColor7 !default;
//
//// Selected
//$navigationListHorizontalItemBgColorSelected: transparent !default;
//$navigationListHorizontalItemLabelColorSelected:              $brandColorDark1 !default;
//$navigationListHorizontalItemIconColorSelected:               $iconColorSelected !default;
//
////Sizing
//$navigationListHorizontalFontSize:                            1rem !default;
//  13px,
//  $baseFontSize: 16px
//) !default;
//$navigationListHorizontalMinHeight:                           oj-px-to-rem(38px, $baseFontSize: 14px) !default;
//  38px,
//  $baseFontSize: 16px
//) !default;
//
//// the right and left borders will be flipped in rtl languanges
//$navigationListHorizontalItemBorderWidth: 0 0
//  $navigationListItemAccentBorderWidth 0 !default;
//// the right and left will be flipped in rtl languanges
//$navigationListHorizontalItemPadding:                         0.5rem $navigationListItemStartEndPadding 4px !default;
//$navigationListHorizontalIconMargin:                          0 !default;
//$navigationListHorizontalIconToTextPadding:                   $navigationListIconToTextPadding !default;
//
////Stacked horizontal navigationlist
//$navigationListHorizontalStackedIconMinHeight:                oj-px-to-rem(60px, $baseFontSize: 14px) !default;
//  54px,
//  $baseFontSize: 16px
//) !default;
//$navigationListHorizontalStackedItemPadding: $navigationListHorizontalItemPadding !default;
//
////----------Horizontal navigationlist icon only variables
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$navigationListHorizontalIconOnlyStyle:                       circle !default;
////space between items
//$navigationListHorizontalIconOnlyItemMargin: 4px !default;
//
////----------------Horizontal navigationlist contrast variables
//$navigationListHorizontalItemContrastBgColorSelected: transparent !default;
//$navigationListHorizontalItemContrastLabelColorSelected:      $neutralColor3 !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: "none"
//) !default;
//
//// END of NavigationList variables
//
////TabBar
////----------------------------------------------------------------------
////Default
//$tabBarItemBorderColor: transparent !default;
//$tabBarItemLabelColorDefault:                         $linkTextColor !default;
//$tabBarItemIconColorDefault:                          $iconColorDefault !default;
//
////Hover
//$tabBarItemBorderColorHover:                          $iconColorHover !default;
//$tabBarItemBgColorHover:                              $neutralColor6 !default;
//$tabBarItemIconColorHover:                            $iconColorHover !default;
//$tabBarItemIconOnlyBgColorHover: $neutralColor6 !default;
//$tabBarItemLabelColorHover: $tabBarItemLabelColorDefault !default;
////selected
//$tabBarItemLabelColorSelected:                        $tabBarItemLabelColorDefault !default;
//$tabBarItemIconColorSelected:                         $brandColor !default;
//$tabBarItemBorderColorSelected:                       $brandColor !default;
//$tabBarItemBgColorSelected: transparent !default;
//$tabBarItemIconOnlyBgColorSelected: $brandColor !default;
//$tabBarIconOnlyIconColorSelected:                     $neutralColor1 !default;
//
////active
//$tabBarItemBgColorActive: $tabBarItemBgColorHover !default;
//$tabBarItemBorderColorActive: $tabBarItemBorderColorHover !default;
//
////Focus
//$tabBarItemOutlineColorFocus:                         $neutralColor14 !default;
//
////Disabled
//$tabBarItemLabelColorDisabled:                        $textColorDisabled !default;
//$tabBarIconColorDisabled:                             $textColorDisabled !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(15px, $baseFontSize: 14px) !default;
//$tabBarIconToTextPadding:                             oj-px-to-rem(10px, $baseFontSize: 14px) !default;
//$tabBarItemLabelTextWrap: nowrap !default;
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$tabBarIconOnlyStyle:                                 circle !default;
//$tabBarItemFontWeightSelected: normal !default;
//$tabBarItemBorderRadius: 0 !default;
//
////---------------Vertical tab bar variables-----------------
////Padding between items
//$tabBarVerticalIconOnlyItemPadding:                   4px 0 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 0 3px !default; // the right and left borders will be flipped in rtl languanges
//$tabBarVerticalItemMinHeight:                         oj-px-to-rem(44px, $baseFontSize: 14px) !default;   //applies to vertical only
//$tabBarVerticalItemFontSize: $fontSize !default;
////Align label of vertical tab bar, support either null or center
//$tabBarVerticalItemLabelTextAlign: null !default;
////Separator color used in vertical tabbar
//$tabBarVerticalItemSeparatorColor: transparent !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:                 transparent !default;
//$tabBarHorizontalItemBorderColorSelected:             $brandColor !default;
//
//// Hover
//$tabBarHorizontalItemLabelColorHover: $tabBarItemIconColorHover !default;
//$tabBarHorizontalItemBorderColorHover:                $tabBarItemBorderColorHover !default;
////Sizing
//$tabBarHorizontalItemBorderWidth: 0 0 3px 0 !default; //horizontal
//// the right and left will be flipped in rtl languanges
//$tabBarHorizontalItemPadding:                         0.5rem $tabBarItemStartEndPadding 4px !default;
//$tabBarHorizontalIconMargin:                          0 !default;
//$tabBarHorizontalIconToTextPadding:                   $tabBarIconToTextPadding !default;
//
//// values could be "circle"(alta default) or "none"(for android/windows/ios)
//$tabBarHorizontalIconOnlyStyle:                       circle !default;
////space between items
//$tabBarHorizontalIconOnlyItemMargin: 4px !default;
//
//$tabBarHorizontalIconOnlyItemBorderWidth: $tabBarHorizontalItemBorderWidth !default;
//$tabBarHorizontalItemFontSize: $fontSize !default;
//$tabBarHorizontalItemMinHeight:                       oj-px-to-rem(38px, $baseFontSize: 14px) !default;
//  38px,
//  $baseFontSize: 16px
//) !default;
//$tabBarHorizontalItemStackedIconMinHeight: oj-px-to-rem(
//  54px,
//  $baseFontSize: 16px
//) !default;
//$tabBarHorizontalStackedItemPadding: $tabBarHorizontalItemPadding !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:                   $brandColorLight1 !default;
//$tabBarItemContrastBgColorHover:                      $neutralColor16 !default;
//
////Active
//$tabBarItemContrastBgColorActive: $neutralColor16 !default;
//
////Selected
//$tabBarItemContrastLabelColorSelected:                $brandColorLight1 !default;
//$tabBarItemContrastBgColorSelected: transparent !default;
////Horizontal Navigation Tabs  contrast variables
//$tabBarHorizontalItemContrastBgColorSelected: transparent !default;
//$tabBarHorizontalItemContrastLabelColorSelected:      $brandColorLight1 !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: "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: 25px !default;
//
////active
//$filePickerBgColorActive: $brandColorLight2 !default;
//
////disabled
//$filePickerBgColorDisabled: $neutralColor2 !default;
//$filePickerBorderColorDisabled: $filePickerBgColorDisabled !default;
//
//// DVT
////-----------------------------------------------------------------------------
//$dvtAnimationDuration: $animationDurationLong !default;
//$dvtAxisTitleTextColor: $tertiaryTextColor !default;
//$dvtIconBgColorActive:          $neutralColor1 !default;
//$dvtIconBorderColorActive:      $neutralColor7 !default;
//$dvtMarqueeColor: rgba(255, 255, 255, 0.4) !default;
//$dvtMarqueeBorderColor: #0572ce !default;
//
//$dvtIconColorActive:            $brandColor !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: $headerTextColor !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();