// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
// The rules here should only define the layout, not color or typography.
@import '../../variables.less';
@import 'mediawiki.mixins.less';

// Modern layout variables
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
@margin-top-sidebar: 0.5em;

@margin-horizontal-sidebar-button-icon: unit( 12 / @font-size-browser, em);
// Adjust the left position of the sidebar to align it with the sidebar menu button,
// in the header, while ensuring the background gradient still extends to the edge of the screen.
// note: the 1px comes from the transparent border of the sidebar button
@padding-left-sidebar: @margin-horizontal-sidebar-button-icon + unit( @border-width-base / @font-size-browser, em );
@border-color-sidebar: @background-color-secondary--modern;

// Header sizes defined in the description of T246170 and comment T246170#5957100
@padding-vertical-header: 0.125em;
@margin-top-header: 0.625em;
@margin-bottom-header: 0.3125em;
@height-logo-icon: 3.125em; // Logo sizes per specification in T245190.
@height-header: @height-logo-icon +
	@margin-top-header + @margin-bottom-header +
	2 * @padding-vertical-header;
@width-grid-column-one: 11em;
@padding-horizontal-page-container: 30px;
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
// Assumes various variables defined there.

@min-width-search: unit( 350px / @font-size-browser, em );
@max-width-search: unit( 450px / @font-size-browser, em );
@margin-horizontal-search: unit( 40px / @font-size-browser, em );

// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
@min-width-logo: unit( 180px / @font-size-browser, em );

@min-width-personal-tools: unit( 300px / @font-size-browser, em );

@padding-horizontal-page-container: 30px;
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );

// the width of the container if you exclude consideration for search
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;

@min-width-supported: @min-width-container-base + @min-width-search;
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;

@background-color-secondary--modern: #f8f9fa;
@max-width-page-container: 1650px;
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container );
@background-color-page-container: @background-color-base;
@max-width-workspace-container: 1440px;
@max-width-content-container: 960px;
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
// see T259331.
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
// We want ~60px of space between the end of the sidebar and the start of the
// content container for aesthetic reasons. The sidebar is already displaced
// -30px so we simply add 30px of space to the width of the sidebar.
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em );
// Page container's total horizontal padding in em units.
@padding-horizontal-page-container-total: 2 * unit( @padding-horizontal-page-container / @font-size-browser, em );
// Equivalent to 1432px. This determines the maximum width breakpoint at which
// the content will have a fixed start margin applied to it when the sidebar
// is open. The content can shift its position when the sidebar is open/closed
// at or below this breakpoint and will maintain its position above this
// breakpoint.
@max-width-margin-start-content: ( 2 * @margin-start-content ) + @padding-horizontal-page-container-total + ( unit( @max-width-content-container / @font-size-browser, em ) );

// Default layout.
@import 'layout-default.less';

//
// Feature flag modifications to layout in new files (these should be additive)
//