// All variables definitions belong here.
// No variable definitions belong in component scss files
@import 'colors';

// base unit for all sizing, equivalent to 8px
$unit: 0.8rem;

$font-stack-monospace: Inconsolata, Consolas, Courier, monospace;
$font-stack-sans: Cern, Helvetica, Arial, sans-serif;

$font-size-med: 1.75 * $unit;
$font-size-large-form-controls: 2rem;
$height-large-form-controls: 7 * $unit;

// Animation

// slow down animations for debugging by setting the following in any file
// ```
// $debug-animations: 1000ms;
// @import 'variables';
// ```
$debug-animation: 0ms !default;

$animation-primary-transition-timing-function: cubic-bezier(0.23, 1.2, 0.32, 1);
$animation-secondary-transition-timing-function: ease-in-out;
$animation-primary-transition-duration: 350ms + $debug-animation;
$animation-secondary-transition-duration: 100ms + $debug-animation;
$animation-primary: $animation-primary-transition-timing-function
  $animation-primary-transition-duration;
$animation-secondary: $animation-secondary-transition-timing-function
  $animation-secondary-transition-duration;

// Transitions
$transition-duration: 35ms + $debug-animation;
$transition-delay-duration: 225ms + $debug-animation;

// Shadows
$shadow-1: 0 ($unit * 2) ($unit * 3) 0 $color-box-shadow;
$shadow-2: 0 $unit ($unit * 2) 0 $color-box-shadow;
$shadow-3: 0 $unit $unit 0 $color-box-shadow;
$shadow-4: 0 ($unit * 0.25) ($unit * 0.5) 0 $color-box-shadow;

// deprecated, prefer shadow-1 etc
$shadow-large: $shadow-1;
$shadow-medium: $shadow-2;
$shadow-small: $shadow-3;
$shadow-xsmall: $shadow-4;

// Stack Order
$z-index-dropdown: 10;
$z-index-tooltip: 100;
$z-index-modal: 1000;
$z-index-dateInput: 10000;

// Borders
$border-radius: 0.2rem;
$border: 1px solid $color-border;