@import "palette";

$path-images: "~transcend-react-next/stylesheets/images";

$side-bar-width: 192px !default;
$collapsed-side-bar-width: 70px !default;
$base-font-size: 1rem !default;
$font-path: "../../fonts" !default;

$maxWidth: 1920px;
$gutter: 1.8rem;
$small: 0;
$medium: rem-calc(768px);
$large: rem-calc(1200px);
$sizes: (
  'small': $small,
  'medium': $medium,
  'large': $large
);

$max-width-small: rem-calc(512px);
$max-width-medium: rem-calc(768px);
$max-width-large: rem-calc(1024px);
$max-width-xlarge: rem-calc(1200px);
$max-width-xxlarge: rem-calc(1600px);

$breakpoint-small: rem-calc(512px);
$breakpoint-medium: rem-calc(768px);
$breakpoint-large: rem-calc(1024px);
$breakpoint-xlarge: rem-calc(1200px);
$breakpoint-xxlarge: rem-calc(1600px);

$global-transition-duration: 300ms;
$global-transition-duration-short: ($global-transition-duration / 3);

$global-border-radius: em-calc(4px);
$global-border-width: em-calc(1px);
$global-border-color: $light-blue-color;

$global-primary-font: "Klavika", "Helvetica Neue", Helvetica, Arial, sans-serif;
$klavika: $global-primary-font;
$global-secondary-font: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
$proxima: $global-secondary-font;

$sidebar-z-index: 1 !default;
$content-z-index: 2 !default;
$scrim-z-index: 3 !default;
$scrim-content-z-index: 4 !default;
$above-z-index: 5 !default;