$text-font-stack: 'Inter', sans-serif;

$scrollbar-size: 6px;

$grid-columns: 12;
$grid-width: 20px;

// all z-indexes
$z-index-layout-col-1: 3 !default;
$z-index-layout-col-2: 2 !default;
$z-index-layout-col-3: 1 !default;
$z-index-layout-resize: 4 !default;
$z-index-layout-col-3-1: 6 !default;
$z-index-layout-col-3-2: 5 !default;

// The z-index of modal and context must always be the same because they can be nested
// inside each other. The order in html decided which must be shown over the other.
$z-index-modal: 7 !default;
$z-index-context: 7 !default;

// The tooltip is only visible on hover and because of that it can be over the modals
// and contexts.
$z-index-tooltip: 8 !default;
$z-index-dropdown-items: 9 !default;

// The toasts will be on top of anything else, because the message is temporary
// and must always be visible.
$z-index-toasts: 10 !default;

// This is an overlay over all element, so it must be the highest.
$z-index-guided-tour-container: 99 !default;
$z-index-highlight-overlay: 100 !default;
$z-index-guided-tour-step: 101 !default;

// normalize overrides
$base-font-family: $text-font-stack !default;

$radius-none: 0 !default;
$rounded: 4px !default;
$rounded-md: 6px !default;
$rounded-lg: 8px !default;
$rounded-xl: 12px !default;
$rounded-2xl: 16px !default;
$rounded-3xl: 24px !default;

$elevation-low: 0 1px 2px 0 rgba($palette-neutral-1300, 0.1) !default;
$elevation-medium: 0 6px 12px 0 rgba($palette-neutral-1300, 0.08) !default;
$elevation-high: 0 8px 24px 0 rgba($palette-neutral-1300, 0.12) !default;

// API docs variables
$api-docs-nav-width: 220px !default;
$api-docs-header-height: 52px !default;
$api-docs-header-z-index: 4 !default;
$api-docs-databases-z-index: 5 !default;
$api-docs-nav-z-index: 3 !default;
$api-docs-body-z-index: 2 !default;
$api-docs-background-z-index: 1 !default;
$api-docs-breakpoint: 1100px !default;

// file field modal variables
$file-field-modal-head-height: 62px !default;
$file-field-modal-body-nav-width: 120px !default;
$file-field-modal-foot-height: 108px !default;

$onboarding-breakpoint: 920px !default;

$dashboard-breakpoint: 900px;

$builder-page-max-width: 1280px;

// Baserow icons variables
$baserow-icon-prefix: 'baserow-icon-';

// This list must contain all the svg icons in the `modules/core/assets/icons` that must
// automatically become under `baserow-icon-$icon`. All the icons must be designed on a
// 24px by 24px grid.
$baserow-icons: 'circle-empty', 'circle-checked', 'check-square', 'formula',
  'hashtag', 'more-horizontal', 'more-vertical', 'reddit', 'single-select',
  'twitter', 'lock-open', 'flag', 'heart', 'star', 'thumbs-up', 'history',
  'facebook', 'linkedin', 'gitlab', 'file-csv', 'file-pdf', 'file-image',
  'file-audio', 'file-video', 'file-code', 'tablet', 'form', 'file-excel',
  'kanban', 'file-word', 'file-archive', 'gallery', 'file-powerpoint',
  'calendar', 'smile', 'smartphone', 'plus', 'heading-1', 'heading-2',
  'heading-3', 'paragraph', 'ordered-list', 'enlarge', 'share', 'settings',
  'up-down-arrows', 'application', 'groups', 'timeline', 'dashboard', 'jira',
  'postgresql', 'hubspot', 'separator', 'spacer', 'automation', 'sidebar',
  'enlarge-row', 'bar-chart', 'line-chart', 'pie-chart', 'donut-chart',
  'dependency';

$grid-view-row-height-small: 33px;
$grid-view-row-height-medium: 55px;
$grid-view-row-height-large: 99px;

$spacings: 8, 12, 16, 24, 32;
