//
// Basic spacers based on modular scale.
// http://www.modularscale.com/?16,21&px&1.2
//

$spacer-xxs: ms(-12); // ~7px
$spacer-xs: ms(-6); // ~9px;
$spacer-sm: ms(0); // ~16px
$spacer-md: ms(4); // ~24px
$spacer-base: ms(8); // ~33px
$spacer-lg: ms(12); // ~48px
$spacer-xl: ms(15); // ~62px
$spacer-xxl: ms(22); // ~112px

//
// Spacing system according to the rule of 3Cs
// see https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c
//

//
// Default Page Layout
//
$default-page-layout-content-width-xl: 90.25rem; // ~1444px, full-width
$default-page-layout-width-xl: 95%;

$default-page-layout-content-width-md: 50rem; // ~800px, main column width of articles
$default-page-layout-width-md: 95%;

$default-page-layout-margin: $spacer-md;
$default-page-layout-to-top-margin: $spacer-lg;

//
// Grid Page Layout
//
$grid-page-layout-width: 90.25rem; // ~1444px, full-width, including table of contents
$grid-page-layout-main-column-width: 50rem; // ~800px, main column, just for the text
$grid-page-layout-margin: $spacer-md;
$grid-page-layout-column-gap: $spacer-sm;
$grid-page-layout-content-width: 95%;
$grid-page-layout-content-width-md: 80%;
$grid-page-layout-content-width-lg: 60%;
$grid-page-layout-content-width-xl: 50rem; // 800px;

// Layout-width without content and column gaps devided by 2 (left and right)
$grid-page-layout-leftright-width: (($grid-page-layout-width - $grid-page-layout-content-width-xl) / 2) -
  (3 * $grid-page-layout-column-gap);


// Navbar
//
$navbar-padding: $spacer-md;
$navbar-min-width: 40rem; // a guess
$navbar-max-width: 65rem; // a guess
$navbar-logo-height: ms(9);
$navbar-logo-height-small: ms(6);
$navbar-brandbar-height: $navbar-logo-height + 2 * $navbar-padding;
$navbar-brandbar-height-small: $navbar-logo-height-small + 2 * $navbar-padding;
$navbar-bottombar-height: $navbar-brandbar-height; // meta nav area on small screens
$navbar-bottombar-height-small: $navbar-logo-height-small + 2 * $spacer-sm;

$navbar-total-height-desktop: $navbar-brandbar-height + $navbar-padding + 1.5rem; // 1.5 taken from font size
$navbar-total-height-mobile: $navbar-brandbar-height;

//
// Fullscreen values
//
$fullscreen-like-height: 70vh;
$fullscreen-real-mobile-height: calc(100vh - #{$navbar-total-height-mobile});
$fullscreen-real-desktop-height: calc(100vh - #{$navbar-total-height-desktop});