/*******************************
            Container
*******************************/

/*-------------------
       Element
--------------------*/

/* Minimum Gutter is used to determine  the maximum container width for a given device */

@containerMaxWidth: 100%;

/* Devices */
@containerMobileMinimumGutter: 0em;
@containerMobileWidth: auto;
@containerMobileGutter: 1em;

@containerTabletMinimumGutter: (@emSize  * 1);
@containerTabletWidth: @tabletBreakpoint - (@containerTabletMinimumGutter * 2) - @scrollbarWidth;
@containerTabletGutter: auto;

@containerComputerMinimumGutter: (@emSize  * 1.5);
@containerComputerWidth: @computerBreakpoint - (@containerComputerMinimumGutter * 2) - @scrollbarWidth;
@containerComputerGutter: auto;

@containerLargeMonitorMinimumGutter: (@emSize  * 2);
@containerLargeMonitorWidth: @largeMonitorBreakpoint - (@containerLargeMonitorMinimumGutter * 2) - @scrollbarWidth;
@containerLargeMonitorGutter: auto;

/* Coupling (Add Negative Margin to container size) */
@containerGridGutterWidth: 2rem;
@containerRelaxedGridGutterWidth: 3rem;
@containerVeryRelaxedGridGutterWidth: 5rem;

@containerMobileGridWidth: @containerMobileWidth;
@containerTabletGridWidth: ~"calc("@containerTabletWidth~" + "@containerGridGutterWidth~")";
@containerComputerGridWidth: ~"calc("@containerComputerWidth~" + "@containerGridGutterWidth~")";
@containerLargeMonitorGridWidth: ~"calc("@containerLargeMonitorWidth~" + "@containerGridGutterWidth~")";

@containerMobileRelaxedGridWidth: @containerMobileWidth;
@containerTabletRelaxedGridWidth: ~"calc("@containerTabletWidth~" + "@containerRelaxedGridGutterWidth~")";
@containerComputerRelaxedGridWidth: ~"calc("@containerComputerWidth~" + "@containerRelaxedGridGutterWidth~")";
@containerLargeMonitorRelaxedGridWidth: ~"calc("@containerLargeMonitorWidth~" + "@containerRelaxedGridGutterWidth~")";

@containerMobileVeryRelaxedGridWidth: @containerMobileWidth;
@containerTabletVeryRelaxedGridWidth: ~"calc("@containerTabletWidth~" + "@containerVeryRelaxedGridGutterWidth~")";
@containerComputerVeryRelaxedGridWidth: ~"calc("@containerComputerWidth~" + "@containerVeryRelaxedGridGutterWidth~")";
@containerLargeMonitorVeryRelaxedGridWidth: ~"calc("@containerLargeMonitorWidth~" + "@containerVeryRelaxedGridGutterWidth~")";

/*-------------------
       Types
--------------------*/

/* Text */
@containerTextWidth: 700px;
@containerTextFontFamily: @pageFont;
@containerTextLineHeight: 1.5;
@containerTextSize: @large;