// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

@import "../utilities/oj.utilities.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: null !default;
$themeTargetPlatform: null !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: null !default;
//  NEUTRAL COLOR CONFIG:
$neutralHue: null !default;
$neutralSaturation: null !default;

$brandColorLight5: null !default;
$brandColorLight4: null !default;
$brandColorLight3: null !default;
$brandColorLight2: null !default;
$brandColorLight1: null !default;
$brandColorDark1: null !default;
$brandColorDark2: null !default;

$neutralColor1: null !default;
$neutralColor2: null !default;
$neutralColor3: null !default;
$neutralColor4: null !default;
$neutralColor5: null !default;
$neutralColor6: null !default;
$neutralColor7: null !default;
$neutralColor8: null !default;
$neutralColor9: null !default;
$neutralColor10: null !default;
$neutralColor11: null !default;
$neutralColor12: null !default;
$neutralColor13: null !default;
$neutralColor14: null !default;
$neutralColor15: null !default;
$neutralColor16: null !default;
$neutralColor17: null !default;

$accentColorHighlight1: null !default;
$accentColorHighlight2: null !default;

$accentColorDanger1: null !default;
$accentColorDanger2: null !default;
$accentColorDanger3: null !default;
$accentColorDanger4: null !default;
$accentColorDanger5: null !default;

$accentColorAttention1: null !default;
$accentColorAttention2: null !default;
$accentColorAttention3: null !default;
$accentColorAttention4: null !default;
$accentColorAttention5: null !default;

$accentColorInfo1: null !default;
$accentColorInfo2: null !default;
$accentColorInfo3: null !default;
$accentColorInfo4: null !default;
$accentColorInfo5: null !default;

$accentColorConfirmation1: null !default;
$accentColorConfirmation2: null !default;
$accentColorConfirmation3: null !default;
$accentColorConfirmation4: null !default;
$accentColorConfirmation5: null !default;

// DVT Colors
$accentColorDvt1: null !default;
$accentColorDvt2: null !default;
$accentColorDvt3: null !default;
$accentColorDvt4: null !default;
$accentColorDvt5: null !default;
$accentColorDvt6: null !default;
$accentColorDvt7: null !default;
$accentColorDvt8: null !default;
$accentColorDvt9: null !default;
$accentColorDvt10: null !default;
$accentColorDvt11: null !default;
$accentColorDvt12: null !default;

// Text colors
$textColorBase: null !default;
$textColor1: null !default;
$textColor2: null !default;
$textColor3: null !default;
$textColor4: null !default;
$textColor5: null !default;
$textColor6: null !default;
$textColor7: null !default;

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

//DIVIDER

$dividerMargin: 0.5rem;

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

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

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

// font size

// $rootFontSize is only used on the html element
// in order to support using rem units.
//
// If you have $allowTagSelectors set to false you can
// use the class oj-html to get the JET html tag styling.
// If you are not generating classes for the html element in JET
// you can still use rem's if you can set the font size on
// the html element with your own class or inline style.
//
// The browser default font size is 16px
$rootFontSize: null !default;

$fontSize: null !default;
$smallestFontSize: null !default;
$smallFontSize: null !default;
$mediumFontSize: null !default;
$largeFontSize: null !default;
$largestFontSize: null !default;

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

$formControlLabelColor: null !default;

$headerTextColor: null !default;

$linkTextColor: null !default;
$linkTextColorActive: $linkTextColor !default;
$linkTextColorVisited: $linkTextColor !default;
// note that $opacityDisabled is
// used for a disabled link in addition to color
$linkTextColorDisabled: $linkTextColor !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: $neutralColor12 !default;
$iconColorHover: $brandColorLight1 !default;
$iconColorActive: $brandColor !default;
$iconColorSelected: $iconColorActive !default;
// note that $opacityDisabled is
// used for a disabled icon in addition to color
$iconColorDisabled: $iconColorDefault !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.5 !default;

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

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

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

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

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

$dialogZindex: 1050 !default;

$messagesZindex: 2000 !default;

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

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

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

// disabled
//----------------------------------
// opacity is often used to indicate something is disabled
$opacityDisabled: 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: 0.5rem !default;
$panelBgColor: $neutralColor1 !default;
$panelBorderColor: $neutralColor8 !default;
$panelBorderColorSelected: $brandColor !default;
$panelBorderRadius: $smallBorderRadius !default;

// panel alternatives

// using these adjustments panels can choose to
// consistently determine their border colors by changing
// the saturation/lightness of their background colors
$panelBorderColorSaturationAdjustment: 5% !default;
$panelBorderColorLightnessAdjustment: -5% !default;

$panel1BgColor: $neutralColor5 !default;
$panel1BorderColor: $neutralColor9 !default;

$panel2BgColor: #dae9f5 !default;
$panel2BorderColor: #aed8fa !default;

$panel3BgColor: #fef9e8 !default;
$panel3BorderColor: adjust-color(
  $panel3BgColor,
  $lightness: $panelBorderColorLightnessAdjustment,
  $saturation: $panelBorderColorSaturationAdjustment
) !default;

$panel4BgColor: #ffe4e1 !default;

// NOTE: we should be using adjust color for $panel4BorderColor like we do for $panel3BorderColor,
// but unfortunately we're using libsass and the output on windows and linux is not the
// same which is causing test failures, so hard coding this border color for now.
// See libsass issue https://github.com/sass/libsass/issues/1554
$panel4BorderColor: #ffcdc8 !default;

$panel5BgColor: $neutralColor6 !default;
$panel5BorderColor: $neutralColor9 !default;

// HEADERS
//-----------------------------------------------------------------------------
// header text color defined in "text colors" section, look for "$headerTextColor"
$headerBorderColor: $neutralColor7 !default;

// $headerFontWeight is applied to all headers and
// is also used by components like dialog, chart etc.
$headerFontWeight: 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: $headerFontWeight !default;
$header2FontWeight: $headerFontWeight !default;
$header3FontWeight: $headerFontWeight !default;
$header4FontWeight: $headerFontWeight !default;
$header5FontWeight: $headerFontWeight !default;
$header6FontWeight: $headerFontWeight !default;

// $header[1|2|3|4|5]FontSize vars are
// applied to h[1|2|3|4|5] tags
$header1FontSize: $largestFontSize !default;
$header2FontSize: $largeFontSize !default;
$header3FontSize: $mediumFontSize !default;
$header4FontSize: $fontSize !default;
$header5FontSize: $smallFontSize !default;
$header6FontSize: $smallFontSize !default;

// the background variables below are for a header "container",
// like the title bar of a dialog or an accordion header
$headerBgColor: $neutralColor5 !default;
$headerBgColorDisabled: $neutralColor3 !default;
$headerBgImage: none !default;

// WINDOW
//-----------------------------------------------------------------------------
$windowBorderColor: $neutralColor8 !default;
$windowBorderWidth: 1px !default;
$windowBgColor: $neutralColor1 !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: 60vw !default;
$messagesGeneralOverlayMinWidth: $messagesGeneralOverlayWidth !default;
$messagesGeneralOverlayMaxWidth: $messagesGeneralOverlayWidth !default;
$messagesGeneralOverlayBorderStyle: solid !default;
$messagesGeneralOverlayBorderWidth: 0 !default;
$messagesGeneralOverlayBorderColor: initial !default;
$messagesGeneralOverlayBorderRadius: initial !default;
$messagesGeneralOverlayBoxShadow: initial !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: 8px !default;
$messageGeneralOverlayBorderStyle: solid !default;
$messageGeneralOverlayBorderWidth: 0 !default;
$messageGeneralOverlayBorderColor: initial !default;
$messageGeneralOverlayBorderRadius: $smallBorderRadius !default;
$messageGeneralOverlayBoxShadow: $smallBoxShadow !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: $messagesNotificationOverlayWidth !default;
$messagesNotificationOverlayMaxWidth: $messagesNotificationOverlayWidth !default;
$messagesNotificationOverlayBorderStyle: solid !default;
$messagesNotificationOverlayBorderWidth: 0 !default;
$messagesNotificationOverlayBorderColor: initial !default;
$messagesNotificationOverlayBorderRadius: initial !default;
$messagesNotificationOverlayBoxShadow: initial !default;
$messagesNotificationOverlayPositionOptionDefault: (
  my: (
    horizontal: "end",
    vertical: "top"
  ),
  at: (
    horizontal: "end",
    vertical: "top"
  ),
  of: "window",
  collision: "none"
) !default;

// The following variables apply on individual oj-message when its oj-messages parent has display
//  type set to 'notification' with position specified.

// Specifies margin used for separating / spacing between two successive message boxes
$messageNotificationOverlaySeparatorMargin: 8px !default;
$messageNotificationOverlayBorderStyle: solid !default;
$messageNotificationOverlayBorderWidth: 0 !default;
$messageNotificationOverlayBorderColor: initial !default;
$messageNotificationOverlayBorderRadius: $smallBorderRadius !default;
$messageNotificationOverlayBoxShadow: $smallBoxShadow !default;
$messageNotificationOverlayHeaderBgColor: $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: auto !default;
// valid values for messageCloseIconDisplay are none and block
$messageCloseIconDisplay: block !default;
$messageAutoTimeoutCloseIconDisplay: none !default;
$messageCategoryTextColor: $secondaryTextColor !default;
$messageCategoryFontSize: inherit !default;
$messageCategoryFontWeight: 700 !default;
$messageTimeTextColor: $secondaryTextColor !default;
$messageTimeFontSize: inherit !default;
$messageSummaryTextColor: $primaryTextColor !default;
$messageSummaryFontSize: inherit !default;
$messageSummaryFontWeight: 500 !default;
$messageSummaryLineHeight: 1.3 !default;
$messageDetailTextColor: $secondaryTextColor !default;
$messageDetailFontSize: inherit !default;
$messageDetailLineHeight: 1.3 !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: null !default;

// Header
$appLayoutHybridHeaderTextColor: $textColor !default;
$appLayoutHybridHeaderBorderColor: transparent !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: null !default;
$appLayoutHybridHeaderTitleFontWeight: $headerFontWeight !default;

// Footer
$appLayoutHybridFooterBorderTopWidth: 1px !default;
$appLayoutHybridFooterBorderColor: transparent !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: "modal" !default;

// Controls whether a "glass pane" is displayed behind sheet menus.
// Valid values are "modal" and "modeless".
$menuSheetModality: "modal" !default;

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

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

// applies to menu items in a text-only menu, i.e. a menu where no item has a start icon (but might have a submenu icon) :
$menuTextToEdgePadding: null !default; // ignored when $menuTextOnlyJustifyContent is center
// 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: 0 2px 5px unquote("hsla(#{$boxShadowHsl},0.25)") !default;

// submenus (.oj-menu.oj-menu-submenu)
$menuSubmenuBoxShadow: 0 3px 7px unquote("hsla(#{$boxShadowHsl},0.25)") !default;

// menu items (.oj-menu-item) and their anchors
$menuItemBorderColor: transparent !default;
$menuItemTextColor: $primaryTextColor !default;
$menuItemLineHeight: 2.5rem !default; // 30px @12px font, per Alta spec, 35px @14px font.
$menuItemTopBorderWidth: 1px !default;
$menuItemBottomBorderWidth: 1px !default;

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

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

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

// disabled menu icons, not submenu icons
$menuIconColorDisabled: null !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: 0 !default;
$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: 0 !default;

// sheet menu items (.oj-menu-item) and their anchors
$menuSheetItemBorderColor: $menuItemBorderColor !default;
$menuSheetItemBgColor: transparent !default;
$menuSheetItemTextColor: $menuItemTextColor !default;
$menuSheetItemLineHeight: $menuItemLineHeight !default;
$menuSheetItemTopBorderWidth: 1px !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: null !default;
$buttonLargeFontSize: null !default;
$buttonXlargeFontSize: $mediumFontSize !default;

// button padding
//----------------------------------
// Horiz space between text and edge of button when no intervening icon.
$buttonTextToEdgePadding: oj-px-to-rem(12px, $baseFontSize: 14px) !default;
$buttonSmallTextToEdgePadding: $buttonTextToEdgePadding !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(10px, $baseFontSize: 14px) !default;
$buttonSmallIconToEdgePadding: $buttonIconToEdgePadding !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(7px, $baseFontSize: 14px) !default;
$buttonSmallIconOnlyPadding: oj-px-to-rem(5px, $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: $brandColor !default;
$buttonTextColor: $primaryTextColor !default;
$buttonIconColor: $iconColorDefault !default;
$buttonBorderColor: $neutralColor9 !default;
$buttonInternalBorderColor: $neutralColor9 !default;
$buttonBgImage: linear-gradient(
  to bottom,
  #ffffff 0%,
  #f1f3f4 3.64%,
  #e8ebed 50%,
  $buttonBgColor 100%
) !default;
$buttonTextShadow: none !default;
$buttonBoxShadow: none !default;

// hover
$buttonBgColorHover: $neutralColor4 !default;
$buttonTextColorHover: $brandColor !default;
$buttonIconColorHover: $iconColorHover !default;
$buttonBorderColorHover: $buttonBorderColor !default;
$buttonBgImageHover: none !default;
$buttonTextShadowHover: none !default;
$buttonBoxShadowHover: $buttonBoxShadow !default;

// active
$buttonBgColorActive: $brandColor !default;
$buttonTextColorActive: $contrastTextColor !default;
$buttonIconColorActive: $buttonTextColorActive !default;
$buttonBorderColorActive: $buttonBgColorActive !default;
$buttonInternalBorderColorActive: $buttonInternalBorderColor !default;
$buttonBgImageActive: none !default;
$buttonTextShadowActive: none !default;
$buttonBoxShadowActive: $buttonBoxShadow !default;
$buttonOpacityActive: 1 !default;

// selected - default to use active values
$buttonBgColorSelected: $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: $contrastTextColor !default;
$buttonIconColorSelectedHover: $buttonIconColorHover !default;
$buttonBgColorSelectedHover: $buttonBgColorActive !default;
$buttonBorderColorSelectedHover: $buttonBorderColorActive !default;

// disabled
$buttonBgColorDisabled: $neutralColor6 !default;
$buttonTextColorDisabled: $textColorDisabled !default;
$buttonIconColorDisabled: $iconColorDisabled !default;
$buttonBorderColorDisabled: $buttonBgColorDisabled !default;
$buttonOpacityDisabled: $opacityDisabled !default;
$buttonBoxShadowDisabled: none !default;

// disabled and selected
$buttonTextColorSelectedDisabled: $buttonTextColor !default;
$buttonIconColorSelectedDisabled: $buttonTextColorSelectedDisabled !default;
$buttonBgColorSelectedDisabled: $brandColorLight4 !default;
$buttonBorderColorSelectedDisabled: $buttonBgColorSelectedDisabled !default;
$buttonInternalBorderColorSelectedDisabled: $buttonInternalBorderColor !default;

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

// [1] For buttons without chrome (i.e. half-chrome buttons in the
// default, focus-only, and disabled-and-not-selected states),
// icon colors should follow the regular icon color spec instead of
// the button icon color spec, which applies to buttons with chrome.

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

// half chrome
$buttonHalfChromeFontWeight: normal !default; // from Alta menu spec, half-chrome button section

// half chrome default
$buttonHalfChromeTextColor: $buttonTextColor !default;
$buttonHalfChromeIconColor: $iconColorDefault !default; // see [1]

// half chrome hover
$buttonHalfChromeTextColorHover: $buttonTextColorHover !default;
$buttonHalfChromeIconColorHover: $buttonHalfChromeTextColorHover !default;
$buttonHalfChromeBgColorHover: $buttonBgColorHover !default;
$buttonHalfChromeBorderColorHover: $buttonHalfChromeBgColorHover !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: $buttonHalfChromeTextColor !default;
$buttonHalfChromeIconColorDisabled: $iconColorDisabled !default; // see [1]
$buttonHalfChromeOpacityDisabled: $buttonOpacityDisabled !default;

// half chrome disabled and selected
$buttonHalfChromeTextColorSelectedDisabled: $buttonTextColorSelectedDisabled !default;
$buttonHalfChromeIconColorSelectedDisabled: $buttonHalfChromeTextColorSelectedDisabled !default;
$buttonHalfChromeBgColorSelectedDisabled: $buttonBgColorSelectedDisabled !default;
$buttonHalfChromeBorderColorSelectedDisabled: $buttonHalfChromeBgColorSelectedDisabled !default;

// outlined
$buttonOutlinedChromeFontWeight: $buttonHalfChromeFontWeight !default;

// outlined default
$buttonOutlinedChromeTextColor: $buttonHalfChromeTextColor !default;
$buttonOutlinedChromeIconColor: $buttonHalfChromeIconColor !default;
$buttonOutlinedChromeBorderColor: $buttonOutlinedChromeTextColor !default;
$buttonOutlinedChromeInternalBorderColor: null !default;

// outlined hover
$buttonOutlinedChromeTextColorHover: $buttonHalfChromeTextColorHover !default;
$buttonOutlinedChromeIconColorHover: $buttonHalfChromeIconColorHover !default;
$buttonOutlinedChromeBgColorHover: $buttonHalfChromeBgColorHover !default;
$buttonOutlinedChromeBorderColorHover: $buttonOutlinedChromeTextColorHover !default;

// outlined active
$buttonOutlinedChromeTextColorActive: $buttonHalfChromeTextColorActive !default;
$buttonOutlinedChromeIconColorActive: $buttonHalfChromeIconColorActive !default;
$buttonOutlinedChromeBgColorActive: $buttonHalfChromeBgColorActive !default;
$buttonOutlinedChromeBorderColorActive: $buttonHalfChromeBorderColorActive !default;
$buttonOutlinedChromeInternalBorderColorActive: null !default;
$buttonOutlinedChromeOpacityActive: $buttonHalfChromeOpacityActive !default;

// outlined selected
$buttonOutlinedChromeTextColorSelected: $buttonHalfChromeTextColorSelected !default;
$buttonOutlinedChromeIconColorSelected: $buttonHalfChromeIconColorSelected !default;
$buttonOutlinedChromeBgColorSelected: $buttonHalfChromeBgColorSelected !default;
$buttonOutlinedChromeBorderColorSelected: $buttonHalfChromeBorderColorSelected !default;
$buttonOutlinedChromeInternalBorderColorSelected: $buttonInternalBorderColor !default;

// outlined selected and hovered
$buttonOutlinedChromeTextColorSelectedHover: $buttonHalfChromeTextColorSelectedHover !default;
$buttonOutlinedChromeIconColorSelectedHover: $buttonHalfChromeIconColorSelectedHover !default;
$buttonOutlinedChromeBgColorSelectedHover: $buttonBgColorSelectedHover !default;
$buttonOutlinedChromeBorderColorSelectedHover: $buttonBorderColorSelectedHover !default;

// outlined disabled
$buttonOutlinedChromeTextColorDisabled: $buttonBgColorDisabled !default;
$buttonOutlinedChromeIconColorDisabled: $buttonBgColorDisabled !default;
$buttonOutlinedChromeBorderColorDisabled: $buttonBgColorDisabled !default;
$buttonOutlinedChromeOpacityDisabled: $buttonHalfChromeOpacityDisabled !default;

// outlined disabled and selected
$buttonOutlinedChromeTextColorSelectedDisabled: $buttonHalfChromeTextColorSelectedDisabled !default;
$buttonOutlinedChromeIconColorSelectedDisabled: $buttonHalfChromeIconColorSelectedDisabled !default;
$buttonOutlinedChromeBgColorSelectedDisabled: $buttonHalfChromeBgColorSelectedDisabled !default;
$buttonOutlinedChromeBorderColorSelectedDisabled: $buttonHalfChromeBorderColorSelectedDisabled !default;
$buttonOutlinedChromeInternalBorderColorSelectedDisabled: $buttonOutlinedChromeInternalBorderColorSelected !default;

// cta enabled
$buttonCallToActionChromeBgColor: $brandColor !default;
$buttonCallToActionChromeBorderColor: transparent !default;
$buttonCallToActionChromeTextColor: $contrastTextColor !default;
$buttonCallToActionChromeIconColor: $contrastTextColor !default;
$buttonCallToActionChromeBgImage: none !default;
$buttonCallToActionChromeBoxShadow: none !default;

// cta hover
$buttonCallToActionChromeBgColorHover: $brandColor !default;
$buttonCallToActionChromeBorderColorHover: $buttonCallToActionChromeBorderColor !default;
$buttonCallToActionChromeTextColorHover: $contrastTextColor !default;
$buttonCallToActionChromeIconColorHover: $contrastTextColor !default;
$buttonCallToActionChromeBgImageHover: linear-gradient(
  hsla(0, 0%, 100%, 0.15),
  hsla(0, 0%, 100%, 0.15)
) !default;
$buttonCallToActionChromeBoxShadowHover: none !default;

// cta active
$buttonCallToActionChromeBgColorActive: $brandColor !default;
$buttonCallToActionChromeBorderColorActive: var(
  $buttonCallToActionChromeBorderColor
);
$buttonCallToActionChromeTextColorActive: $contrastTextColor !default;
$buttonCallToActionChromeIconColorActive: $contrastTextColor !default;
$buttonCallToActionChromeBgImageActive: linear-gradient(
  hsla(0, 0%, 0%, 0.1),
  hsla(0, 0%, 0%, 0.1)
) !default;
$buttonCallToActionChromeBoxShadowActive: none !default;
$buttonCallToActionChromeOpacityActive: null !default;

// cta disabled
$buttonCallToActionChromeBgColorDisabled: $brandColor !default;
$buttonCallToActionChromeBorderColorDisabled: $buttonCallToActionChromeBorderColor !default;
$buttonCallToActionChromeTextColorDisabled: $contrastTextColor !default;
$buttonCallToActionChromeIconColorDisabled: $contrastTextColor !default;
$buttonCallToActionChromeBoxShadowDisabled: none !default;
$buttonCallToActionChromeOpacityDisabled: 0.4 !default;

// alternate button colors
//----------------------------------
$buttonContrastTextColor: $contrastTextColor !default;
$buttonPrimaryColor: $brandColor !default;
$buttonConfirmColor: $accentColorConfirmation5 !default;

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

$buttonsetBorderRadius: $buttonBorderRadius !default;

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

$buttonsetChromingOptionDefault: full !default;

// width
//----------------------------------
// auto width for all buttonset chroming
$buttonsetEqualWidthChromingList: 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: none !default;
$dialogCancelBehaviorOptionDefault: none !default;
$dialogDragAffordanceOptionDefault: none !default;

$dialogBoxShadow: $smallBoxShadow !default;
$dialogBorderRadius: 0 !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: transparent !default;
$dialogHeaderBgColor: $headerBgColor !default;
$dialogHeaderTextColor: $headerTextColor !default;
$dialogHeaderBgImage: $headerBgImage !default;

// Alignment of the dialog header text.
// Possible values are and 'center' and 'start'
$dialogHeaderTextAlign: start !default;
// Vertical position of the close icon.
// Possible values are 'top' and 'center'
// (the close icon is always on the right in ltr)
$dialogCloseIconPosition: top !default;
$dialogCloseIconButtonMargin: 0 $buttonIconOnlyPadding !default;

$dialogBodyTextAlign: start !default;

$dialogFooterButtonHeight: $buttonHeight !default;
$dialogFooterButtonFontWeight: $buttonFontWeight !default;

// Integrated layout for footer buttons.
// Possible values are 'true' or 'false'.
// When 'false', buttons are positioned on the right side of the footer.
// When 'true', buttons are integrated (spread) across the entire footer,
// evenly spacing the buttons, render dividers, and round the outside
// corners of the first and last buttons.
$dialogFooterIntegrateButtons: false !default;
$dialogFooterDividerColor: $dialogBorderColor !default;

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

$toolbarBorderColor: $panelBorderColor !default;
$toolbarBgColor: transparent !default;
$toolbarBorderWidth: 0 !default;

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

$toolbarChromingOptionDefault: half !default;

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

// form labels
//----------------------------------
// label text color defined in another section, look for $formControlLabelColor

// label required content character.
// If it is not needed (like you want to use pure css instead), set to ''.
$formControlLabelRequiredChar: "*" !default;
$formControlLabelFontWeight: normal !default;
$formControlLabelFontSize: $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: "none" !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: $neutralColor1 !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: $formControlBgColor !default;
$formControlValueColorDisabled: $formControlInputValueColor !default;
$formControlBorderColorDisabled: $formControlBorderColor !default;
$formControlOpacityDisabled: $opacityDisabled !default;

// *****placeholder*****
$formControlPlaceholderColor: $tertiaryTextColor !default;
$formControlPlaceholderFontStyle: normal !default;

// form control option defaults
//----------------------------------
$formControlLabelEdgeDefault: inside !default;
$inputFormControlReadonlyDefault: div !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: start !default;
$formLayoutLabelEdgeDefault: top !default;
$formLayoutDirectionDefault: column !default;

// Default value for colspan-wrap attribute
$formLayoutColspanWrapDefault: wrap !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: 2.6rem !default;

// spacing between edge and the label text
$radioCheckboxLabelToEdgePadding: 10px !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: $radioCheckboxLabelToEdgePadding !default;
// spacing on the input (html input or input image) to give spacing between the input and the text
$radioCheckboxInputToLabelPadding: $radioCheckboxLabelToEdgePadding !default;

// radioset and checkboxset states
//----------------------------------
//default
$radioCheckboxSetBorderColor: null !default;
$radioCheckboxSetBgColor: transparent !default;
$radioCheckboxItemDividerColor: transparent !default;
$radioCheckboxLabelColor: $textColor !default;

// active
$radioCheckboxItemBgColorActive: $brandColorLight5 !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: 2px !default;

// colors for enabled state
$sliderThumbBgColor: $neutralColor1 !default;
$sliderThumbBorderColor: $sliderThumbBgColor !default;
$sliderBarBgColor: $neutralColor8 !default;
$sliderBarValueBgColor: $brandColor !default;

// hover
$sliderThumbBgColorHover: $sliderThumbBgColor !default;

// active
$sliderThumbBgColorActive: $sliderThumbBgColorHover !default;
$sliderThumbBorderColorActive: $sliderThumbBorderColor !default;
$sliderBarValueBgColorActive: $sliderBarValueBgColor !default;

// thumb disabled
$sliderThumbBgColorDisabled: $textColorDisabled !default;
$sliderThumbBorderColorDisabled: $sliderThumbBgColorDisabled !default;
$sliderBarBgColorDisabled: $neutralColor8 !default;
$sliderBarValueBgColorDisabled: $textColorDisabled !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: $neutralColor6 !default;
$dateTimePickerSwitcherPadding: 5px $dateTimePickerPadding !default;

// DATEPICKER
//-----------------------------------------------------------------------------

$datepickerBgColorSelected: $buttonHalfChromeBgColorSelected !default;
$datepickerTextColorSelected: $buttonHalfChromeTextColorSelected !default;
$datepickerBorderColorToday: $neutralColor9 !default;
$datepickerBgColorToday: $neutralColor5 !default;
$datepickerBgColorHover: $brandColorLight1 !default;
$datepickerTextColorHover: $datepickerTextColorSelected !default;
$datepickerBorderColorFocus: $datepickerBgColorHover !default;

$datepickerHeaderTextColor: $textColor6 !default;

$datepickerButtonTextColor: $linkTextColor !default;
$datepickerButtonTextColorHover: $datepickerBgColorHover !default;
$datepickerButtonTextColorActive: $datepickerButtonTextColor !default;

$datepickerWeekOfYearHeaderBgColor: $neutralColor3 !default;
$datepickerWeekOfYearCellBgColor: $neutralColor6 !default;

// INPUT DATE/TIME
//-----------------------------------------------------------------------------
//options
// For option 'renderMode' in ojInputDate / ojInputDateTime / ojInputDate
$inputDateTimeRenderModeOptionDefault: native !default;
$inputDateTimeDatePickerOptionDefault: (
  footerLayout: "today"
) !default;

$inputDateTimeKeyboardEditOptionDefault: disabled !default;
$inputDateTimeTimePickerOptionDefault: null !default;
$inputDateTimeConverterYearOptionDefault: numeric !default;
$inputDateTimeShowPickerOnDesktopOptionDefault: disabled !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: 1 !default;
$progressBarBorderColor: $neutralColor7 !default;
$progressBarBorderRadius: 0 !default;
$progressBarBorderStyle: none !default;

$progressBarIndeterminateOverlayImage: $imageDir + "animated-overlay.gif" !default;
$progressBarIndeterminateOverlayOpacity: 1 !default;
$progressBarIndeterminateAnimationDuration: 1s !default;

$progressCircleIndeterminateOverlayImage: $imageDir + "spinner_full.gif" !default;
$progressCircleIndeterminateOverlaySize: auto !default;
$progressCircleIndeterminateAnimationDuration: 1s !default;

$progressCircleSize: 32px !default;
$progressCircleBgColor: $progressBarBgColor !default;
$progressCircleBgOpacity: $progressBarBgOpacity !default;
// TRAIN
//-----------------------------------------------------------------------------

// unvisited state
$trainBgColor: $neutralColor13 !default;
$trainBorderColor: $trainBgColor !default;
$trainLabelColor: $secondaryTextColor !default;
$trainButtonTextColor: $contrastTextColor !default;

// visited state
$trainBgColorVisited: $brandColor !default;
$trainBorderColorVisited: $trainBgColorVisited !default;
$trainLabelColorVisited: $secondaryTextColor !default;
$trainButtonTextColorVisited: $contrastTextColor !default;
$trainVisitedIconDisplay: none !default;
$trainButtonTextVisitedDisplay: inherit !default;

// selected state
$trainBgColorSelected: $brandColor !default;
$trainBorderColorSelected: $trainBgColorSelected !default;
$trainButtonTextColorSelected: $contrastTextColor !default;
$trainLabelFontWeightSelected: bold !default;

// disabled state
$trainBgColorDisabled: $neutralColor9 !default;
$trainBorderColorDisabled: $trainBgColorDisabled !default;
$trainLabelColorDisabled: $textColor !default;
$trainOpacityDisabled: $opacityDisabled !default;
$trainButtonTextColorDisabled: $contrastTextColor !default;

// hover state
$trainBgColorHover: $iconColorHover !default;
$trainBorderColorHover: $trainBgColorHover !default;
$trainButtonTextColorHover: $contrastTextColor !default;

// active state
$trainBgColorActive: $neutralColor7 !default;
$trainBorderColorActive: $brandColor !default;
$trainLabelTextDecorationActive: none !default;
$trainLabelFontWeightActive: bold !default;
$trainButtonTextColorActive: $trainBgColorVisited !default;

// button label
$trainButtonFontSize: 12px !default;

// the default width of a step
$trainStepWidth: 7rem !default;

$trainLabelPaddingTop: 13px !default;

// $trainLabelTextWrap accepts css white-space
// values such as normal or nowrap
$trainLabelTextWrap: normal !default;

// the diameter of the "button" representing a stop
$trainButtonDiameter: 24px !default;
$trainButtonBorderWidth: 1px !default;

// message icon diameter
$trainIconDiameter: $trainButtonDiameter !default;
$trainButtonMessagingIconColor: $trainButtonTextColor !default;

$trainConfirmationBgColor: $accentColorConfirmation4 !default;
$trainErrorBgColor: $accentColorDanger4 !default;
$trainWarningBgColor: $accentColorAttention4 !default;
$trainInfoBgColor: $accentColorInfo4 !default;
$trainIconFontSize: unset !default; //Don't override icon font size
// connector variables
// step connector type. Valid values are 'individual' or 'continuous. A 'continuous'
// connector is a single shape behind all of the step buttons while the 'individual'
// connector renders seperate shapes between each step.
$trainConnectorBgColor: $neutralColor9 !default;
$trainConnectorHeight: 1px !default;
$trainConnectorHasFill: 0 !default;
$trainContinuousConnectorBgColorSelected: transparent !default;
$trainIndividualConnectorBgColorSelected: $trainConnectorBgColor !default;
$trainConnectorContinuousBgColor: $trainConnectorBgColor !default;

// padding for individual connector
$trainIndividualConnectorPadding: 10px !default;
$trainIndividualConnectorPaddingSelected: $trainIndividualConnectorPadding !default;

// the diameter of the connector circle around the button in the continuous
// connector design
$trainButtonContinuousConnectorDiameter: $trainButtonDiameter !default;
$trainButtonTextIsNumeric: 1 !default;
$trainButtonTextDisplay: inherit !default;

//TREE
//-----------------------------------------------------------------------------

$treeAnimationDuration: $collapsibleAnimationDuration !default;

// text
$treeTextColor: $linkTextColor !default;

// node bg
$treeNodeBgColorHover: transparent !default;
$treeNodeBgColorSelected: $brandColorLight4 !default;
$treeNodeBgColorHoverSelected: $brandColorLight4 !default;
$treeNodeBgColorSelectedInactive: $brandColorLight5 !default;

// node text border
$treeNodeBorderColorHover: $neutralColor14 !default;
$treeNodeBorderColorSelected: $treeNodeBgColorSelected !default;
$treeNodeBorderColorHoverSelected: $treeTextColor !default;
$treeNodeBorderColorSelectedInactive: $brandColorLight3 !default;

// Dnd
$treeDndMarkerLineColor: $brandColor !default;

// Collection (ALSO USED BY TABLE, DATAGRID AND LIST VIEW)
//-----------------------------------------------------------------------------
// Default
$collectionBorderColor: $neutralColor8 !default;
$collectionBgColor: $neutralColor2 !default;
// Headers
$collectionCellPadding: 0.375em !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: $collectionCellBgColorSelected !default;
$treeViewItemBgColorSelectedInactive: $collectionCellBgColorSelected !default; // BgColorSelectedInactive is too light

// dnd
$treeViewDropLineColor: $dropTargetLineColor !default;

// spacer
$treeViewSpacerWidth: 24px !default;
$treeViewSpacerHeight: 30px !default;

// load indicator
$treeViewLoadIndicator: none !default;

// checkboxes
$treeViewMultipleSelectionAffordance: none !default;

// data animation fade in time
$treeViewDataFadeInDuration: 0s !default;

$treeViewDropItemBackground: $dropTarget1Color !default;

// TABLE
//-----------------------------------------------------------------------------
// Table Rows - Height
$tableRowHeight: 2.75em !default;

// Table Headers
$tableHeaderPadding: 1em !default;

//  $tableHeaderBorderColor is used when display=list,
//  when display=grid $collectionHeaderBorderColor is used instead
$tableHeaderBorderColor: $neutralColor7 !default;

// Table Cells
$tableCellPadding: $tableHeaderPadding;

// Table Display Option Default
$tableDisplayOptionDefault: "list" !default;

// Table horizontal grid visible
$tableHorizontalGridVisibleOptionDefault: "enabled" !default;

// Table selector for multiple selection
$tableEnableSelector: false !default;

// Table sticky layouts
$tableEnableSticky: false !default;

$tableAddAnimation: (
  (
    effect: "slideIn",
 
    direction: "bottom"
  ),
  "fadeIn"
) !default;
$tableRemoveAnimation: (
  (
    effect: "slideOut",
    direction: "top"
  ),
  "fadeOut"
) !default;
$tableUpdateAnimation: (
  effect: "fadeIn"
) !default;

// load indicator
$tableLoadIndicator: icon !default;

// ROWEXPANDER
//-----------------------------------------------------------------------------
$rowExpanderIndentWidth: 16px !default;
$rowExpanderSpacerWidth: 1.5rem !default;

// PAGING CONTROL
//-----------------------------------------------------------------------------
// padding between various elements of the paging control
$pagingPadding: 5px !default;
$pagingDotSize: 7px !default;
$pagingDotPadding: 8px !default;
$pagingBorderColor: $neutralColor8 !default;

// LISTVIEW
//-----------------------------------------------------------------------------

$listViewAnimationDuration: $animationDurationMedium !default;
$listViewHeaderBorderWidth: 0 0 1px !default;
$listViewHeaderBorderWidthCollapsed: $listViewHeaderBorderWidth !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: $secondaryTextColor !default;
// text color of the prefix in the indexer in disabled state
$indexerTextColorDisabled: $secondaryTextColor !default;
// text decoration of the prefix in the indexer
$indexerTextDecoration: none !default;
// text decoration of the prefix in the indexer when hover
$indexerTextDecorationHover: none !default;
// font weight of the prefix in the indexer
$indexerFontWeight: bold !default;

// MASONRY
//-----------------------------------------------------------------------------
// width of each item in the indexer
$masonryItemWidth: 240px !default;
$masonryAnimationDuration: $animationDurationMedium !default;
$masonryInsertAnimation: (
  (
    effect: "expand"
  ),
  "fadeIn"
) !default;
$masonryRemoveAnimation: (
  (
    effect: "collapse"
  ),
  "fadeOut"
) !default;

// MASONRY LAYOUT
//-----------------------------------------------------------------------------

// duration of a masonryLayout animation
$masonryLayoutAnimationDuration: $animationDurationShort !default;
// duration of a faster masonryLayout animation
$masonryLayoutAnimationDurationFast: $masonryLayoutAnimationDuration * 0.8 !default;
// margin around a masonryLayout tile
$masonryLayoutTileMargin: $spacingSmall !default;
// width of a 1x1 masonryLayout tile, not including margin
$masonryLayoutTileWidth: 150px !default;
// height of a 1x1 masonryLayout tile, not including margin
$masonryLayoutTileHeight: 150px !default;

// animation theme variables
$masonryLayoutInsertAnimation: (
  (
    effect: "zoomIn",
    duration: $masonryLayoutAnimationDuration,
    timingFunction: "ease-in-out"
  ),
  "fadeIn"
) !default;
$masonryLayoutRemoveAnimation: (
  (
    effect: "zoomOut",
    duration: $masonryLayoutAnimationDuration,
    timingFunction: "ease-in-out"
  ),
  "fadeOut"
) !default;
$masonryLayoutMoveAnimation: (
  effect: "addTransition",
  duration: $masonryLayoutAnimationDuration,
  timingFunction: "ease-in-out",
  transitionProperties: (
    "width",
    "height",
    "top",
    "left",
    "right"
  )
) !default;
$masonryLayoutResizeAnimation: (
  effect: "addTransition",
  duration: $masonryLayoutAnimationDuration,
  timingFunction: "ease-in-out",
  transitionProperties: (
    "width",
    "height",
    "top",
    "left",
    "right"
  )
) !default;
$masonryLayoutReorderAnimation: (
  effect: "addTransition",
  duration: $masonryLayoutAnimationDurationFast,
  timingFunction: "ease-in-out",
  transitionProperties: (
    "width",
    "height",
    "top",
    "left",
    "right"
  )
) !default;

// WATERFALL LAYOUT
//-----------------------------------------------------------------------------

// width of each item in the waterfall layout
$waterfallLayoutItemWidth: 240px !default;
// width of the horizontal and vertical gutter
$waterfallLayoutGutterWidth: 24px !default;
// animations
$waterfallLayoutEntranceAnimation: (
  (
    effect: "fadeIn",
    duration: "300ms",
    timingFunction: "cubic-bezier(0, 0, 0.2, 1)"
  ),
  (
    effect: "slideIn",
    direction: "top",
    offsetY: "300px",
    duration: "300ms",
    timingFunction: "cubic-bezier(0, 0, 0.2, 1)"
  )
) !default;
$waterfallLayoutExitAnimation: (
  effect: "fadeOut",
  duration: "200ms",
  timingFunction: "cubic-bezier(0, 0, 0.2, 1)"
) !default;

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

// width of the selector
$selectorWidth: 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: $secondaryTextColor !default;
$navigationListItemIconColorDefault: $navigationListItemLabelColorDefault !default;
$navigationListCollapsibleIconColorDefault: $navigationListItemLabelColorDefault !default;

//Hover
$navigationListItemBorderColorHover: $iconColorHover !default;
$navigationListItemBgColorHover: $neutralColor6 !default;
$navigationListItemIconColorHover: $iconColorHover !default;

//Selected
$navigationListItemLabelColorSelected: $brandColorDark1 !default;
$navigationListItemBorderColorSelected: $brandColor !default;
$navigationListItemIconColorSelected: $iconColorSelected !default;
$navigationListItemBgColorSelected: $neutralColor5 !default; // only applies to vertical navlist

//Focus
$navigationListItemOutlineColorFocus: $neutralColor14 !default;

//Disabled
$navigationListItemLabelColorDisabled: $navigationListItemLabelColorDefault !default;
$navigationListIconColorDisabled: $navigationListItemLabelColorDefault !default;

// category divider - used between categories
$navigationListCategoryDividerColor: $neutralColor8 !default;

//sizing
$navigationListItemMinHeight: oj-px-to-rem(
  43px,
  $baseFontSize: 16px
) !default; // only applies to vertical navlist.
// Not applicable to icon-only
$navigationListItemStartEndPadding: oj-px-to-rem(
  10px,
  $baseFontSize: 16px
) !default;
$navigationListIconToTextPadding: oj-px-to-rem(
  10px,
  $baseFontSize: 16px
) !default;
$navigationListItemAccentBorderWidth: 3px !default;
$navigationListItemLabelTextWrap: nowrap !default;
$navigationListItemBorderWidth: 0 0 0 $navigationListItemAccentBorderWidth !default; // the right and left borders will be flipped in rtl languanges

//----------Common icon only variables

//Hover
$navigationListItemIconOnlyBgColorHover: $neutralColor6 !default;

//Selected
$navigationListItemIconOnlyBgColorSelected: $brandColor !default;
$navigationListIconOnlyIconColorSelected: $brandColor !default;

//----------NavigationList(vertical) icon only variables

// values could be "circle"(alta default) or "none"(for android/windows/ios)
$navigationListIconOnlyStyle: none !default;
//Padding between items
$navigationListIconOnlyItemPadding: 0 !default;
//Only applicable when icon only style is "none".
$navigationListIconOnlyIconStartEndPadding: 16px !default;

//This value will be ignored when $navigationListIconOnlyStyle is set to 'circle'.
$navigationListIconOnlyItemBorderWidth: 0 0 0
$navigationListItemAccentBorderWidth !default; // the right and left borders will be flipped in rtl languanges
//This value will be ignored when $navigationListIconOnlyStyle is set to 'circle'.

//-------Navlist Contrast variables--------------

//Default
$navigationListItemContrastLabelColorDefault: $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: -1 !default;

//------Horizontal list variables----

// Default
//$navigationListHorizontalItemBorderColor:                  transparent !default;
$navigationListHorizontalItemLabelColorDefault: $navigationListItemLabelColorDefault !default;
$navigationListHorizontalItemIconColorDefault: $navigationListItemIconColorDefault !default;

// divider - used between text items when horizontal
$navigationListHorizontalItemDividerColor: $neutralColor7 !default;

// Selected
$navigationListHorizontalItemBgColorSelected: transparent !default;
$navigationListHorizontalItemLabelColorSelected: $navigationListItemLabelColorSelected !default;
$navigationListHorizontalItemIconColorSelected: $navigationListItemIconColorSelected !default;

//Sizing
$navigationListHorizontalFontSize: oj-px-to-rem(
  13px,
  $baseFontSize: 16px
) !default;
$navigationListHorizontalMinHeight: oj-px-to-rem(
  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: 4px $navigationListItemStartEndPadding 4px !default;
$navigationListHorizontalIconMargin: 4px !default;
$navigationListHorizontalIconToTextPadding: 2px !default;

//Stacked horizontal navigationlist
$navigationListHorizontalStackedIconMinHeight: oj-px-to-rem(
  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: none !default;
//space between items
$navigationListHorizontalIconOnlyItemMargin: 4px !default;

//----------------Horizontal navigationlist contrast variables
$navigationListHorizontalItemContrastBgColorSelected: transparent !default;
$navigationListHorizontalItemContrastLabelColorSelected: $navigationListItemContrastLabelColorSelected !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: $secondaryTextColor !default;
$tabBarItemIconColorDefault: $tabBarItemLabelColorDefault !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: $brandColor !default;

//active
$tabBarItemBgColorActive: $tabBarItemBgColorHover !default;
$tabBarItemBorderColorActive: $tabBarItemBorderColorHover !default;

//Focus
$tabBarItemOutlineColorFocus: $neutralColor14 !default;

//Disabled
$tabBarItemLabelColorDisabled: $tabBarItemLabelColorDefault !default;
$tabBarIconColorDisabled: $tabBarItemLabelColorDefault !default;

// category divider - used between categories
$tabBarCategoryDividerColor: $neutralColor8 !default;

//sizing

//minimum label width ensured during progressive truncation
$tabBarTruncatedLabelMinWidth: 3rem !default;
// Not applicable to icon-only
$tabBarItemStartEndPadding: oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$tabBarIconToTextPadding: oj-px-to-rem(10px, $baseFontSize: 16px) !default;
$tabBarItemLabelTextWrap: nowrap !default;
// values could be "circle"(alta default) or "none"(for android/windows/ios)
$tabBarIconOnlyStyle: none !default;
$tabBarItemFontWeightSelected: normal !default;
$tabBarItemBorderRadius: 0 !default;

//---------------Vertical tab bar variables-----------------
//Padding between items
$tabBarVerticalIconOnlyItemPadding: 0 !default;
//Only applicable when icon only style is "none".
$tabBarVerticalIconOnlyIconStartEndPadding: 16px !default;
//This value will be ignored when $tabBarIconOnlyStyle is set to 'circle'.
$tabBarVerticalIconOnlyItemBorderWidth: 0 0 0 3px !default; // the right and left borders will be flipped in rtl languanges
$tabBarVerticalItemBorderWidth: 0 0 0 3px !default; // the right and left borders will be flipped in rtl languanges
$tabBarVerticalItemMinHeight: oj-px-to-rem(43px, $baseFontSize: 16px) !default;
$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: $tabBarItemBgColorSelected !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: 4px $tabBarItemStartEndPadding 4px !default;
$tabBarHorizontalIconMargin: 4px !default;
$tabBarHorizontalIconToTextPadding: 2px !default;

// values could be "circle"(alta default) or "none"(for android/windows/ios)
$tabBarHorizontalIconOnlyStyle: none !default;
//space between items
$tabBarHorizontalIconOnlyItemMargin: 4px !default;

$tabBarHorizontalIconOnlyItemBorderWidth: $tabBarHorizontalItemBorderWidth !default;
$tabBarHorizontalItemFontSize: $fontSize !default;
$tabBarHorizontalItemMinHeight: oj-px-to-rem(
  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: $tabBarItemContrastLabelColorSelected !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: $buttonBgColorActive !default;
$dvtIconBorderColorActive: $buttonBorderColorActive !default;
$dvtMarqueeColor: rgba(255, 255, 255, 0.4) !default;
$dvtMarqueeBorderColor: #0572ce !default;

$dvtIconColorActive: $buttonIconColorActive !default;

// attribute group colors
//----------------------------------
$dvtCategory1Color: $accentColorDvt1 !default;
$dvtCategory2Color: $accentColorDvt2 !default;
$dvtCategory3Color: $accentColorDvt3 !default;
$dvtCategory4Color: $accentColorDvt4 !default;
$dvtCategory5Color: $accentColorDvt5 !default;
$dvtCategory6Color: $accentColorDvt6 !default;
$dvtCategory7Color: $accentColorDvt7 !default;
$dvtCategory8Color: $accentColorDvt8 !default;
$dvtCategory9Color: $accentColorDvt9 !default;
$dvtCategory10Color: $accentColorDvt10 !default;
$dvtCategory11Color: $accentColorDvt11 !default;
$dvtCategory12Color: $accentColorDvt12 !default;

// gauge threshold colors
//----------------------------------
// used for the first threshold on a gauge, typically represents a low value
$dvtThreshold1Color: $accentColorDvt4 !default;
// used for the second threshold on a gauge, typically represents a medium value
$dvtThreshold2Color: $accentColorDvt3 !default;
// used for the third threshold on a gauge, typically represents a high value
$dvtThreshold3Color: $accentColorDvt2 !default;
//-----------------------------------
// ratinggauge state fill and stroke color
$ratingGaugeBorderColorHover: transparent;
$ratingGaugeBorderColorSelected: transparent;
$ratingGaugeBorderColorChanged: transparent;
$ratingGaugeBorderColorUnselected: transparent;
$ratingGaugeBorderColorSelectedDisabled: transparent;
$ratingGaugeBorderColorUnselectedDisabled: transparent;

$ratingGaugeColorHover: #007cc8 !default;
$ratingGaugeColorSelected: #f8c15a !default;
$ratingGaugeColorChanged: #ed2c02 !default;
$ratingGaugeColorUnselected: #c4ced7 !default;
$ratingGaugeColorSelectedDisabled: $neutralColor8;
$ratingGaugeColorUnselectedDisabled: $neutralColor5;
$statusMeterGaugePlotAreaBorderColor: #d6dfe6;
$statusMeterGaugePlotAreaColor: #e4e8ea;

// background
//----------------------------------
$dvtComponentBgColor: $neutralColor1 !default;
$dvtComponentBg2Color: $neutralColor8 !default;
$dvtTooltipBgColor: $windowBgColor !default;

// border
//----------------------------------
$dvtBorderColor: $neutralColor17 !default;
$dvtBorder2Color: $neutralColor1 !default;
$dvtPanelBorderColor: $neutralColor7 !default;

// no data message
//----------------------------------
$dvtNoDataMessageColor: $textColor !default;
$dvtNoDataMessageFontSize: $smallFontSize !default;

// charts
//----------------------------------
$dvtChartStockFallingBgColor: $dvtThreshold1Color !default;
$dvtChartStockRangeBgColor: $neutralColor10 !default;
$dvtChartStockRisingBgColor: $neutralColor13 !default;
$dvtChartSubtitleTextColor: $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();