@use 'gel-sass-tools/sass-tools';
@use 'sass:list';

///*------------------------------------*\
//    # GEL GRID - SETTINGS
//\*------------------------------------*/

// The following variables are used to configure the GEL Grid component.
// These variables should not be modified or adjusted directly; you should
// predefine the variables in your own project, to overide these default settings.

/// General configuration
//
// The default namespace applied to all grid classes output is inherited
// from the default gel-namespace: `gel-`.
//
// @type String
// @link http://bit.ly/1Z6hPfd
//
$gel-grid-namespace: sass-tools.$gel-namespace !default;

// The prefix applied to all GEL breakpoints used by Sass MQ. By default this
// inherits from the default gel-breakpoint-prefix: `gel-bp-`.
//
// @type String
// @link http://bit.ly/1nxxE0p
//
$gel-grid-breakpoint-namespace: sass-tools.$gel-breakpoint-prefix !default;

// Not all pages or products will be using 1280px grid, you can conditional
// wrap 1280px grid styles in a class so they only apply if 1280px is required
//
// For example: ORB provides a class of `b-pw-1280` if 1280 ORB is enabled
//
// @type String
//
$gel-grid-1280-toggle-class: null !default;

/// Grid configuration
//
// Grid max-width points
//
// @type String
//
$gel-grid-max-width-1008: 1008px;
$gel-grid-max-width-1280: 1280px;

// The fixed margins and gutters increase in size for larger screens
//
// @type String
//
$gel-grid-margin-change: 400px;
$gel-grid-gutter-change: 600px;

// Which GEL breakpoints should width classes be output for?
//
// @type List
// @link http://bit.ly/1PjPdLz
//
$gel-grid-breakpoints: (s, m, l, xl) !default;

// Which GEL breakpoints relate specifically to the 1280 breakpoint?
//
// These are specifically divided incase the optional `toggle-class`
// is being used?
//
// @type List
//
$gel-grid-breakpoints--1280: (xxl) !default;

// The default number of columns width calucations should be based upon
// if no other number has been provided
//
// @type Int
//
$gel-grid-default-columns: 12 !default;

// A list of all the columns width classes should be generated for
//
// @type List
//
$gel-grid-columns: (1 2 3 4 5 8 10 12 24) !default;

// The class applied by a feature detection script to signify there the
// current browser doesn't support Flexbox
//
// @type String
//
$gel-grid-flexbox-feature-detection-class: 'no-flexbox' !default;

/// Output configuration
//
// Should grid CSS classes be output?
//
// @type Boolean
//
$gel-grid-enable--markup-output: false !default;

// Should 1280px breakpoint styles be output?
//
// @type Boolean
//
$gel-grid-enable--1280-breakpoint: true !default;

// Enable the bundled `box-sizing: border-box;` if not
// already applied globally
//
// @type Boolean
// @link http://bit.ly/1bfMrhO
//
$gel-grid-enable--box-sizing: false !default;

// Apply a CSS fix to remove the whitespace between `inline-block`
// items. Note: This fix is not 100% to work.
//
// @type Boolean
// @link http://bit.ly/1bfMrhO
//
$gel-grid-enable--whitespace-fix: false !default;

// If the optional 1280 toggle class it not enabled we need to merge
// all the breakpoints into a single map
//
@if $gel-grid-1280-toggle-class == null {
  $gel-grid-breakpoints: list.join($gel-grid-breakpoints, $gel-grid-breakpoints--1280);
}