@import 'layout.scss';

// Variables
//
// Add global variables here, color palette, those variables shared by components all applied to global styling

// ====================================================================
// Breakpoints
//
// Window breakpoints
// ====================================================================
$layout-medium: map-get($layout, medium) + px;
$layout-large: map-get($layout, large) + px;
$layout-xlarge: map-get($layout, xlarge) + px;

// ====================================================================
// Base palette
//
// Grayscale and brand colors for use across the site.
// ====================================================================
$white: #fff;
$black: #000;

// ====================================================================
// General
//
// Global color variables, used usually in sections
// Global variables used across the web app
// ====================================================================
$page-bg-color: $white;
$rotate-screen-bg-color: $black;
$element-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.04);
$generic-fonts: Helvetica, Arial, sans-serif;

// ====================================================================
// Nav bar
// ====================================================================
$navbar-height-mobile: 6rem;
$navbar-height-desktop: 6rem;
$navbar-padding-mobile: 2rem;
$navbar-padding-desktop: 4rem;

// ====================================================================
// List of z-index element
// ====================================================================
$elements: pages, page-overlay, main-nav, sidebar, preloader, rotate;