@use './breakpoints.scss' as breakpoints;

/**
 * @sass-export-section="layout"
 */
// Layout
$column-gap: 0.75rem !default;
$large-column-gap: 1.5rem !default;
$reading-max-width: 50rem !default;

$layout-gap-narrow: 16px !default;
$layout-gap: 24px !default;
$layout-widescreen-width: breakpoints.$breakpoint-widescreen - $layout-gap * 2 !default;
$layout-widescreen-gap: max(
	$layout-gap,
	calc(50% - #{$layout-widescreen-width} / 2)
) !default; // $layout-widescreen-gap is a naming error, keeping for backwards compat

$layout-gap-custom-property-name: '--layout-gap' !default;
$layout-gap-scalable-custom-property-name: '--layout-gap-scalable' !default;

$layout-flyout-width-name: '--layout-flyout-width' !default;
$layout-flyout-width-desktop-custom-property-name: '--layout-flyout-width-desktop' !default;
$layout-flyout-width-widescreen-custom-property-name: '--layout-flyout-width-widescreen' !default;
$layout-menu-collapsed-width-name: '--layout-menu-collapsed-width' !default;
$layout-menu-collapsed-width-widescreen-spacer-width-name: '--layout-menu-collapsed-width-widescreen' !default;
//@end-sass-export-section