/**
 * General constants
 */

// Spacing

$space-base: 0.25rem;
$space-xs: 0.5rem;
$space-sm: 1rem;
$space-default: 1.25rem;
$space-md: 1.5rem;
$space-lg: 2rem;
$space-xl: 4rem;

// Sizes

$size-10: 0.75rem;
$size-20: 1rem;
$size-30: 1.5rem;
$size-40: 2rem;
$size-50: 2.75rem;
$size-60: 3rem;
$size-70: 4rem;
$size-75: 6rem;
$size-80: 8rem;
$size-90: 10rem;
$size-100: 12.5rem;
$size-110: 16rem;
$size-115: 18.75rem;
$size-120: 21.25rem;
$size-130: 40.25rem;
$size-140: 58.75rem;

// Max sizes

$max-size-10: 15rem;
$max-size-20: 20rem;
$max-size-30: 25rem;
$max-size-40: 30rem;
$max-size-50: 40rem;
$max-size-60: 46.25rem;
$max-size-70: 60rem;
$max-size-80: 70rem;
$max-size-90: 120rem;

// Z Index

$z-index-large-step: 1000;
$z-index-medium-step: 100;
$z-index-small-step: 10;

$z-index-content-layer: 0; // this constant is here for informative purposes - we should always assume content starts at 0
$z-index-flyout-layer: $z-index-content-layer + 6 * $z-index-large-step;
$z-index-interruptable-layer: $z-index-content-layer + 9 * $z-index-large-step;

$z-index-chart-tooltip: $z-index-content-layer + 1 * $z-index-small-step;
$z-index-content-sidebar: $z-index-content-layer + 1 * $z-index-medium-step;
$z-index-content-global-nav: $z-index-content-layer + 2 * $z-index-medium-step;
$z-index-flyouts-masthead: $z-index-flyout-layer + 5 * $z-index-medium-step;
$z-index-flyouts-dropdown: $z-index-flyout-layer + 6 * $z-index-medium-step;
$z-index-flyouts-inline-btn: $z-index-flyout-layer + 7 * $z-index-medium-step;
$z-index-tutorial-tips: $z-index-flyout-layer + 8 * $z-index-medium-step;

/// Interaction constants

$interaction-timing: 200ms;
$clickable-scale: 0.9;

/********* [DEPRECATED]  *************************/

// Gutters

$gutter-xxsmall: 0.5rem;
$gutter-xsmall: 0.75rem;
$gutter-small: 1rem;
$gutter-normal: 1.25rem;
$gutter-big: 2rem;
$gutter-bigger: 2.5rem;

// Grid size

$grid-size: 0.25rem;

// Styles

%semibold {
    font-family: var(--font-family-semibold);
    font-weight: var(--font-weight-semibold);
}

// The basis for larger building blocks

$input-height: 8*$grid-size;
$option-height: 8*$grid-size;
$button-height: 8*$grid-size;
$dropdown-max-height: 50*$grid-size;

// Layout

$layout-nav-item-height: 2.75rem;
$layout-header-xlarge-height: $layout-nav-item-height * 4;
$layout-header-large-height: $layout-nav-item-height * 3;
$layout-header-medium-height: $layout-nav-item-height * 2;
$layout-header-small-height: $layout-nav-item-height;
$layout-split-panel-width: 18.75rem;
$layout-thumbnail-size: 6.25rem;
$layout-centered-text-width: 25rem;
$layout-masthead-height: 3rem;
$layout-nav-collapsed-width: 3rem;
$layout-nav-expanded-width: 12.5rem;
$layout-chart-y-axis-width: $gutter-bigger;
$layout-chart-x-axis-height: $gutter-big;
$layout-chart-axis-tick-size: 0.375rem;

/*************************************************/