@use 'sass:color';
@use 'sass:map';
@use 'sass:math';
// @use 'functions';

/*

* Variables

Naming conventions:
GLOBAL_PROPERTY_MODIFIER or for components: COMPONENT_PROPERTY_MODIFIER
COMPONENT is the component name
PROPERTY is the main property to style, e.g. height, padding or a custom attribute name that is specific to that component
MODIFIER concerns either a state or a sizing or both, XXX-hover, XXX-sm
- use XXX-color to define a font color, e.g. btn-color
- use XXX-background for background colors, e.g. XXX-active-background


* Naming conventions for classnames

- always prefix with ".cui-"
- use same pattern as variables: GLOBAL_PROPERTY_MODIFIER, see above

- DO: cui-box-sm | cui-box-md | cui-box-lg (modifier or qualifier at the end!)
- DON'T: cui-small-box | cui-medium-box | cui-large-box  (modifier or qualifier in the middle)

*/

@font-face {
	font-family: 'Source Sans Pro';
	font-weight: normal;
	font-display: swap;
	src:
		url('fonts/SourceSansPro-Regular.woff2') format('woff2'),
		url('fonts/SourceSansPro-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Source Sans Pro';
	font-weight: bold;
	font-display: swap;
	src:
		url('fonts/SourceSansPro-Bold.woff2') format('woff2'),
		url('fonts/SourceSansPro-Bold.woff') format('woff');
}

// * Color system
// * ==========================================

$white:    #ffffff !default;
$gray-100: #f5f5f5 !default; // whitesmoke // #f8f9fa !default;
$gray-200: #e6e9ec !default; // #e9ecef 
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default; // #8b949c !default; // #adb5bd !default;
$gray-600: #8b949c !default; // #777777 !default; // #6c757d !default;
$gray-700: #4d5257 !default;
$gray-800: #393c3f !default;
$gray-900: #212121 !default;
$black:    #000000 !default;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map.merge(
	(
		'100': $gray-100,
		'200': $gray-200,
		'300': $gray-300,
		'400': $gray-400,
		'500': $gray-500,
		'600': $gray-600,
		'700': $gray-700,
		'800': $gray-800,
		'900': $gray-900
	),
	$grays
);

$blue:    #0261f8 !default;
$blue-light: #8bceec !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #b64b7c !default;
$magenta: #ee59d7 !default;
$red:     #dc3545 !default;
$orange:  #ff5724 !default;
$yellow:  #d6b13a !default;
$green:   #7ca751 !default;
$teal:    #3e9e88 !default;
$cyan:    #17a2b8 !default;
$brown:   #986801 !default;

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map.merge(
	(
		'blue':       $blue,
		'blue-light': $blue-light,
		'indigo':     $indigo,
		'purple':     $purple,
		'pink':       $pink,
		'red':        $red,
		'orange':     $orange,
		'yellow':     $yellow,
		'green':      $green,
		'teal':       $teal,
		'cyan':       $cyan,
		'white':      $white,
		'gray':       $gray-500,
		'gray-dark':  $gray-800
	),
	$colors
);

$primary:       	$orange !default;
$primary-bg: 		color.scale($primary, $green: 40%) !default; // a little bit more yellow
$primary-on-white: 	rgba($primary, 0.85) !default; // used for the main search input placeholder .ez5-search-input-background-help
$success:       	$green !default;
$info:          	$cyan !default;
$warning:       	$yellow !default;
$danger:        	$red !default;
$danger-bg-light: 	color.adjust($danger, $lightness: 39%) !default;
$light:         	$gray-100 !default;
$dark:          	$gray-800 !default;
$muted:         	$gray-600 !default; // used in field-label, block description, empty label
$focused:    		$blue !default;
$disabled:      	$muted !default;

$disabled-opacity: 		0.5 !default;
$disabled-opacity-icon: 0.25 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map.merge(
	(
		'primary':    $primary,
		'success':    $success,
		'info':       $info,
		'warning':    $warning,
		'danger':     $danger,
		'danger-bg-light': $danger-bg-light,
		'light':      $light,
		'dark':       $dark,
		'muted':      $muted,
		'disabled':   $disabled,
		// use for button and form focus state:
		'focused':    $cyan,
	),
	$theme-colors
);

// * Color contrast
// - moved out of functions.scss to avoid circular @use

/* todo: 
 	- find a better way to implement this (the function needs variables which are defined in _variables.scss
 	however we cannot include variables in functions, because we already @use functions in variables
	- passing the variables every time the function is called is not an option
*/

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            $white !default;

// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
	$r: color.channel($color, "red", $space: rgb);
	$g: color.channel($color, "green", $space: rgb);
	$b: color.channel($color, "blue", $space: rgb);

	$yiq: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);

	@if $yiq >= $yiq-contrasted-threshold {
		@return $dark;
	} @else {
		@return $light;
	}
}
// -- end


// * Spacing
// * ==========================================

$spacer: 		1rem !default;
$spacer-xs: 	$spacer * 0.25 !default;
$spacer-sm: 	$spacer * 0.5 !default;
$spacer-base: 	$spacer !default;
$spacer-lg: 	$spacer * 1.5 !default;
$spacer-xl: 	$spacer * 3 !default;
// The component padding is to be used for the default component padding (usually with the modifier "--padding")
$component-padding-base: $spacer-sm !default;
$component-padding-lg: $spacer !default;

// * Body
// * ==========================================
//
// Settings for the `<body>` element.

$body-bg:		$white !default; // $gray-100 !default;
$body-color:	$gray-900 !default;

// * Links
// * ==========================================
//
// Style anchor elements.

$link-color:			$body-color !default;
$link-decoration:		underline !default;
$link-hover-color:		$link-color !default;
$link-hover-decoration:	none !default;


// * Paragraphs
// * ==========================================
//
// Style p element.

$paragraph-margin-bottom:   $spacer !default;


// * Grid breakpoints
// * ==========================================
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px
) !default;

// @include functions.assert-ascending($grid-breakpoints, '$grid-breakpoints');
// @include functions.assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');


// * Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1140px
) !default;

// @include functions.assert-ascending($container-max-widths, '$container-max-widths');


// * Typography
// * ==========================================
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-sans-serif:      'Source Sans Pro', sans-serif !default;
// $font-family-sans-serif:      'Lato', sans-serif !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$font-family-base:            $font-family-sans-serif !default;
// stylelint-enable value-keyword-case

$font-size-xxxl:              1rem * 1.37 !default; // 22
$font-size-xxl:               1rem * 1.25 !default; // 20
$font-size-xl:                1rem * 1.125 !default;// 18
$font-size-lg:                1rem !default; 		// 16
$font-size-base:              0.875 * 1rem !default;// 14
$font-size-sm:                1rem * 0.75 !default; // 12

$font-weight-lighter:         200 !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          900 !default;

$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
$line-height-sm:			  1.3 !default;

$h1-font-size:                1rem * 1.5 !default; 		// 24, upper case, e.g. page-title
$h2-font-size:                1rem * 1.5 !default; 		// 24, normal case
$h3-font-size:                1rem * 1.25 !default; 	// 20, ex: pane titles (Suche), sidebar titles (Detail, Editor), applied via .h3 class in tpl
$h4-font-size:                1rem * 1.125 !default;	// 18, ex: standard-1
$h5-font-size:                1rem !default;			// 16, 
$h6-font-size:                $font-size-base !default;	// 14, base font + bold, ex: tabs, panels, tab-title (tab system)

$headline-sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$headline-sizes: map.merge(
	(
		'h1': $h1-font-size,
		'h2': $h2-font-size,
		'h3': $h3-font-size,
		'h4': $h4-font-size,
		'h5': $h5-font-size,
		'h6': $h6-font-size
	),
	$headline-sizes
);

$headings-margin-bottom:      0.5 * $spacer !default;
$headings-font-family:        $font-family-base !default;
$headings-font-weight:        $font-weight-bold !default;
$headings-line-height:        1.1 !default;
$headings-color:              null !default;

// * Borders
// * ==========================================
$border-radius-sm: 	2px !default;
$border-radius: 	3px !default;
$border-radius-lg:  4px !default;

$hr-border-color:   	rgb($gray-400, 0.5) !default; // make sure hr is visible on white and light backgrounds
$hr-border-color-dark:  $dark !default;
$hr-border-width:   	1px !default;

$component-focus-shadow-color: $focused !default;
$component-focus-shadow: 
	inset 0 0 0 var(--focus-shadow-outer-width, 2px) var(--focus-shadow-outer-color, #{$component-focus-shadow-color}), 
	inset 0 0 0 var(--focus-shadow-inner-width, 4px) var(--focus-shadow-inner-color, #{$white}) !default;
$component-focus-border-color: 	$focused !default;

$component-selected-border-width: 1px !default;
$component-selected-border-color: var(--brand-color, #{$primary}) !default;

// * Icons
// * ==========================================
$icon-font-size-xs: 	9px !default;
$icon-font-size: 		$font-size-base !default;
$icon-font-size-lg: 	20px !default;
$icon-font-size-xl: 	30px !default;
$icon-font-size-xxl:	40px !default;
$icon-font-size-xxxl:	50px !default;
$icon-line-height: 		1.6 !default;


// * Buttons
// * ==========================================
$btn-hover-alpha:			0.65;
// General Button styles
$btn-font-family: 			$font-family-base !default;
$btn-font-weight: 			$font-weight-base !default;
$btn-box-shadow:			0 2px 3px rgb(0 0 0 / 14%) !default;
$btn-background: 			transparent !default;
$btn-color: 				$body-color !default;
$btn-color-dimmed: 			$muted !default;
$btn-border-width: 			1px !default;
$btn-border-color: 			$btn-color !default;

// Plain Button states
$btn-hover-color:			rgba($btn-color, $btn-hover-alpha) !default;
$btn-hover-background:		transparent !default;
$btn-active-color: 			$white !default;
$btn-active-background: 	$body-color !default;
$btn-focus-shadow: 			$component-focus-shadow !default;

// Primary Button states
$btn-primary-background: 		$primary !default;
$btn-primary-color: 			color-yiq($btn-primary-background) !default;
$btn-primary-hover-background: 	color.adjust($btn-primary-background, $lightness: -10%) !default;
$btn-primary-hover-color: 		$btn-primary-color !default;
$btn-primary-active-background: $btn-primary-hover-background !default;
$btn-primary-active-color: 		$btn-primary-hover-color !default;

// Secondary Button states
$btn-secondary-background: 			$gray-200 !default;
$btn-secondary-color: 				color-yiq($btn-secondary-background) !default;
$btn-secondary-hover-background: 	color.adjust($btn-secondary-background, $lightness: -5%) !default;
$btn-secondary-hover-color: 		$btn-secondary-color !default;
$btn-secondary-active-background: 	$btn-secondary-hover-background !default;
$btn-secondary-active-color: 		$btn-secondary-hover-color !default;

// Danger Button states
$btn-danger-background: 		$red !default;
$btn-danger-color: 				color-yiq($btn-danger-background) !default;
$btn-danger-hover-background: 	color.adjust($btn-danger-background, $lightness: -10%) !default;
$btn-danger-hover-color: 		$btn-danger-color !default;
$btn-danger-active-background: 	$btn-danger-hover-background !default;
$btn-danger-active-color: 		$btn-danger-hover-color !default;

// Bordered Button states = Default Button
$btn-bordered-hover-color:			inherit !default;
$btn-bordered-hover-background:		rgb($gray-200, $btn-hover-alpha) !default;
$btn-bordered-active-color: 		$btn-active-color !default;
$btn-bordered-active-background: 	$btn-active-background !default;
$btn-bordered-focus-shadow: 		$btn-focus-shadow !default;
$btn-bordered-focus-border-color: 	$component-focus-border-color !default;

// Inverted Button 
$btn-inverted-color: 				$white !default;
$btn-inverted-background: 			rgb($gray-900, 0.6) !default; // need an actual background so we can use this on images as well
$btn-inverted-border-color: 		rgba($white, 0.85) !default; // its a compromise between black/background image and selected/orange background color, we might need to make this adaptable via CSS vars
$btn-inverted-hover-color: 			rgba($btn-inverted-color, $btn-hover-alpha) !default;
$btn-inverted-hover-background: 	$btn-inverted-background !default;
$btn-inverted-hover-border-color: 	rgba($btn-inverted-border-color, 0.7) !default;

// Button Sizes
// We use an absolute height to define the button height instead of padding-y.
// This is more predictable and can be better combined with toolbar and panel header heights etc.
$btn-visually-square-factor: 1.0675 !default;
// Normal size
$btn-padding-x: 			0.75rem !default;
$btn-height: 				30px !default;
$btn-font-size: 			$font-size-base !default;
$btn-border-radius:			2px !default;
// Small size
$btn-padding-x-sm: 			0.5rem !default;
$btn-height-sm: 			24px !default;
$btn-font-size-sm: 			$font-size-sm !default;
$btn-border-radius-sm:		2px !default;
// Large size
$btn-padding-x-lg: 			1.25rem !default;
$btn-height-lg: 			36px !default;
$btn-font-size-lg: 			$font-size-lg !default;
$btn-border-radius-lg:		3px !default;
// Icon Button
$btn-height-xs:				16px !default;
// Play Button
$btn-height-play:			50px !default;		

// * Buttonbar
// * ==========================================
$buttonbar-gap: 	$spacer-sm !default;

// * Labels
// * ==========================================
$label-padding: $spacer-sm !default;
$label-secondary-opacity: 0.65 !default;

// * Handle (Drag & Drop, Move Rows etc.)
// * ==========================================
$handle-color: 		$body-color;

// * Flex Handle (Resize panes etc.)
// * ==========================================
$flex-handle-size: 				11px !default; // width or height, odd number so we can put a 1px line in the very center
$flex-handle-color: 			rgb($gray-500, 0.8) !default;
$flex-handle-divider-color: 	$flex-handle-color !default;
$flex-handle-length: 			0 !default; // 18px;
$flex-handle-blocker-offset: 	0 !default; // 4px;

// * Item list
// * ==========================================
$item-list-hover-color: 		$white !default;
$item-list-hover-background:	$primary !default;
$item-list-active-color: 		$item-list-hover-color !default;
$item-list-active-background:	$item-list-hover-background !default;
$item-list-indent: 				$btn-padding-x !default;
$item-list-height: 				$btn-height !default;
$item-list-label-font-size:		$font-size-sm !default;
$item-list-label-color:			$body-color !default;

// * Panel
// * ==========================================
$panel-border-color: 	$body-color !default;
$panel-content-padding: $spacer !default; // * 1.15 !default;

// * Toolbar
// * ==========================================
// $toolbar-background: 	transparent !default; // leave transparent by default and style dependent on where the toolbar is used
// $toolbar-padding: 		$component-padding-base !default;
// $toolbar-height: 		$btn-height + functions.calculate-px(2 * $toolbar-padding) !default; // make toolbar always visible, even when no buttons are displayed in it yet

// * Pane
// * ==========================================
$pane-background:  				$light !default;
$pane-padding: 					$component-padding-base !default;
$pane-window-border-color: 		$gray-200 !default;

// * Input
// * ==========================================
// $input-font-size: $font-size-base !default;
$input-height: 				$btn-height !default;
$input-height-sm: 			$btn-height-sm !default;
$input-background: 			$white !default;
$input-background-disabled:	$input-background !default; // disabled state will add opacity:0.5 by default
$input-border-color: 		transparent !default;
$input-border-radius: 		$btn-border-radius !default;
$input-placeholder-color: 	$muted !default;
$input-min-width:			100px !default;
$input-padding-x: 			$component-padding-base !default;
$input-padding-y: 			$spacer-xs !default;
$input-focus-shadow:		$component-focus-shadow !default;
$input-focus-border-color:	$component-focus-border-color !default;

// * Combobox
// * ==========================================
$combobox-divider-border: 				1px solid $gray-200 !default;
$combobox-input-background: 			$input-background !default;
$combobox-input-disabled-background: 	$combobox-input-background !default;
$combobox-border-color: 				$input-border-color !default;
$combobox-button-background: 			$input-background !default;
$combobox-button-hover-color: 			$gray-600 !default;

// * Data-Field
// * ==========================================
$data-field-width: 275px !default; // used to be: "$input-width"

// * Checkbox
// * ==========================================
$checkbox-border-color: 		$gray-700 !default;
$checkbox-background: 			$white !default;
$checkbox-active-background: 	$body-color !default;
$checkbox-active-color: 		$white !default;
$checkbox-size: 				16px !default;
$checkbox-icon-size: 			12px !default;
$checkbox-border-radius: 		2px !default;
$checkbox-margin:				0.5 * $checkbox-icon-size !default;
$checkbox-form-hint-indent: 	0 !default; // $checkbox-size + $checkbox-margin !default;

// * Toggle Switch
// * ==========================================
$toggle-switch-height: 				$checkbox-size !default;
$toggle-switch-width: 				32px !default;
$toggle-switch-nose-size:			0.625 * $toggle-switch-height !default;
$toggle-switch-nose-offset:			2px !default;
$toggle-switch-color: 				$checkbox-border-color !default;
$toggle-switch-background: 			$checkbox-background !default;
$toggle-switch-active-background: 	$checkbox-active-background !default;
$toggle-switch-active-color: 		$checkbox-active-color !default;

// * Table
// * ==========================================
$table-border-color: 	rgb($gray-400, 0.5) !default;
$table-border-radius:	$border-radius-sm !default;
$table-data-height: 	34px !default;
$table-data-width: 		135px !default; // old: $td-width
$table-even-background:	$gray-100 !default;
$table-odd-background:	transparent !default;
$table-padding-x:		$component-padding-base !default;
$table-padding-y:		0.5 * $component-padding-base !default;
$table-row-hover-background: #f7f7f7 !default;

// * List View
// * ==========================================
$list-view-font-size:					inherit !default;
$list-view-data-height: 				1rem !default;
$list-view-data-width: 					125px !default;
$list-view-padding-x:					$component-padding-base !default; // was: $table-padding-x
$list-view-padding-y:					0.5 * $component-padding-base !default; // was: $table-padding-y, needs to be small so the explicit height of the fixed rows will cut off the text correctly after the first line
$list-view-move-handle-width:			14px !default; // ! must be explicit size in px or
$list-view-move-target-area-background:	rgb($focused, 0.5) !default;
$list-view-selected-row-border-width:	1px !default;
$list-view-selected-row-border-color: 	$primary !default;
$list-view-selected-row-background: 	$gray-300 !default;
$list-view-hover-row-background: 		$gray-200 !default;
$list-view-scrolling-box-shadow:		0 1px 5px 0 rgb(0 0 0 / 11%) !default;

// * List View Tree
// * ==========================================
$tree-node-handle-width: 				16px !default;

// * Form
// * ==========================================
$form-padding: 				$component-padding-base !default;
$form-row-height:			$input-height !default;
$form-key-width:			$table-data-width !default;
$form-key-min-width:		100px !default;
$form-key-padding-top: 		0.38em !default;
$form-key-padding-bottom: 	$spacer-xs !default;
$form-data-max-width:		850px !default;
$form-label-color: 			$body-color !default;
$form-label-font-weight: 	$font-weight-bold !default;
$form-label-font-size: 		$font-size-base !default; // if changed, we need to change the padding of labels in cui-form-key + cui-form-value
$form-cell-gap: 			$spacer !default;
$form-hint-font-size: 		13px !default;
$form-hint-line-height: 	1.2 !default;
$form-hint-margin-bottom: 	$spacer-sm !default; 


// * Data-Form
// * ==========================================
$data-form-utilities-column-width: 			1.15 * $spacer !default;
$data-form-utilities-count: 				2 !default;
$data-form-border-offset: 					$spacer-xs !default;
$data-form-content-offset: 					3 * $spacer-xs !default;
$data-form-field-group-border-color: 		$body-color !default;
$data-form-field-group-border-width: 		2px !default;

// * Block
// * ==========================================
$block-margin: 				$spacer !default;
$block-bracket-padding: 	$panel-content-padding !default;
$block-border-color: 		$table-border-color !default;
$block-has-checkbox-indent:	2 * $spacer-lg !default;
$block-checkbox-indent-width: 215px !default;


// * Slider
// * ==========================================
$slider-handle-size:				1rem !default;
$slider-handle-background:			$dark !default;
$slider-handle-border-width:		0 !default;
$slider-handle-border-color:		$input-border-color !default;
$slider-handle-border-radius:		999px !default;
$slider-track-height: 				4px !default;
$slider-track-background: 			$input-border-color !default;
$slider-track-active-background: 	$slider-handle-background !default;
$slider-track-border-width:			0 !default;
$slider-track-border-color:			$input-border-color !default;
$slider-track-border-radius:		$border-radius-sm !default;

// * Layer
// * ==========================================
$layer-sizes: (
	min: 	250px,
	xs: 	400px,
	s: 		500px,
	m: 		600px,
	l: 		700px,
	xl: 	800px,
	xxl: 	900px,
	xxxl: 	1000px
) !default;

$layer-background: 			$pane-background !default;
$layer-header-background: 	$body-color !default;
$layer-header-color: 		$white !default;
$layer-border-radius: 		$border-radius-sm !default;
$layer-border-color:		$body-color !default;
$layer-border-size:			0 !default;
$layer-shadow-color:		$gray-700 !default;
$layer-pointer-size: 		10px !default;
$layer-pointer-container-size: 	16px !default;
$layer-pointer-background:	$layer-background !default;
$layer-padding-x: 			$component-padding-lg !default;
$layer-padding-y: 			$component-padding-lg !default;
$layer-z-index:				2 !default; // must be at least 2 to hide the app logo in the header (see .ez-config-logo in app-header.scss)

// * Menu
// * ==========================================
$menu-border-radius: $layer-border-radius !default;

// * Calendar
// * ==========================================
$calendar-font-size: 				$font-size-base !default;
$calendar-cell-size:				28px !default;
$calendar-cell-count:				8 !default;
$calendar-background:				$light !default;
$calendar-static-cells-background: 	$calendar-background !default;
$calendar-static-cells-color: 		$primary !default;
$calendar-date-active-background:	$primary !default;
$calendar-date-hover-background-opacity: 0.2 !default;
$calendar-date-previous-color:		$gray-500 !default;

// * Tooltip
// * ==========================================
$tooltip-pointer-size:  8px !default;
$tooltip-background: 	$gray-800 !default;
$tooltip-color: 		$white !default;
$tooltip-font-size: 	12px !default;

// * Drag & Drop
// * ==========================================
$drop-area-focus-shadow: 	$component-focus-shadow !default;
$drop-area-border-radius: 	$border-radius-sm !default;
$drag-lasso-background: 	$primary !default;

// * Sticky Header
// * ==========================================
$sticky-header-font-size: 		$font-size-sm !default;
$sticky-header-color: 			$body-color !default;
$sticky-header-border-color:	$hr-border-color-dark !default;
$sticky-header-background-body: color.adjust($body-bg, $alpha: -0.06);
$sticky-header-background-pane: color.adjust($pane-background, $alpha: -0.06);

// * Digi Display
// * ==========================================
$digi-display-font-size: 	15px !default;
$digi-display-line-height: 	$line-height-sm !default;
$digi-display-font-family: 	$font-family-monospace !default;

// * Tabs
// * ==========================================
$tabs-padding: 						$component-padding-base !default;
$tabs-header-height: 				$btn-height !default; // = tab button height
$tabs-header-height-sm:				$btn-height-sm !default; // = small tab button height
$tabs-content-padding:				$panel-content-padding !default;

$tabs-background: 					transparent !default;
$tabs-border-color:					transparent !default;
$tabs-active-background: 			transparent !default;
$tabs-active-color: 				$body-color !default;
$tabs-active-border-color:			$body-color !default;

$tabs-overflow-button-background: 		transparent !default;
$tabs-overflow-button-background-hover: transparent !default;
$tabs-overflow-button-color: 			$body-color !default;
$tabs-overflow-button-color-hover: 		rgba($body-color, 0.7) !default;
