// $header-font: 'Poppins', sans-serif;
$header-font: 'Microsoft YaHei';
// $body-font: 'Lato', arial, helvetica, sans-serif;
$body-font: 'Microsoft YaHei';
$mono-font: 'Roboto Mono', monospace;

$app-bar-collapsed-width: 70px;
$max-width: 1440px !default;
$min-width: 75% !default;
$input-height: 61px;
$unlabeled-input-height: 40px;
$unlabaled-select-padding: 3px 0;
$footer-height: 60px;

$input-height: 32px;
$unlabeled-input-height: 32px;
$input-width: 400px;


$input-padding-lg: 18px;
$input-padding-sm: 10px;
$input-line-height: 18px;

$column-gutter: 1.75%;

$sideways-tabs-width: 200px;

$array-list-remove-margin: 75px;

$z-indexes: (
  zero: 0,
  default: 1,
  overContent: 2,
  hoverOverContent: 3,

  tableGroup: 10,
  fixedTableHeader: 11,

  // ---- Boundary for central content (in `<main>`)

  // This covers both relative and content modes of the loading indicator
  loading: 12,

  // Users can click on shell in header and show shell even with most loading indicators showing,
  // so add it above them
  windowsManager: 13,

  mainHeader: 14,

  cruFooter: 19,

  modalOverlay: 20,
  modalContent: 21,

  tooltip: 30,

  dropdownOverlay: 40,
  dropdownContent: 41,

  loadingMain: 51
);

// Usage Example:
// @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) {
// }
$breakpoints: (
  '--viewport-4':  480px, // Phone
  '--viewport-7':  768px, // Tablet
  '--viewport-9':  992px, // Laptop/Desktop
  '--viewport-12': 1281px, // Desktop
);

$font-size-h2: 21px;

// Global spacing variables
$space-s: 10px;
$space-m: 20px;
$space-l: 40px;