@import '../spacing/spacing';
/* Grid breakpoints used for setting up every grid in different sizes
 - All values most be added
 - Contains gutterless grid breakpoints also
*/

//TODO: Add rem instead of px, map doesn't give correct rem value, need a converter

$sdds-grid-breakpoints: (
  sm: (
    width: 320px,
    columns: 4,
    margin: 0,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32
  ),
  md: (
    width: 672px,
    columns: 8,
    margin: $spacing-layout-16,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32
  ),
  lg: (
    width: 1056px,
    columns: 16,
    margin: $spacing-layout-16,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32
  ),
  xlg: (
    width: 1312px,
    columns: 16,
    margin: $spacing-layout-16,
    padding: $spacing-layout-16,
    gutter: $spacing-layout-32
  ),
  xxlg: (
    width: 1584px,
    columns: 16,
    margin: $spacing-layout-24,
    padding: $spacing-layout-16,
    gutter: $spacing-layout-32
  ),
) !default;

$sdds-grid-breakpoints-gutterless: (
  sm: (
    width: 320px,
    columns: 4,
    margin: 0,
    padding: $spacing-layout-16,
    gutter: 0
  ),
  md: (
    width: 672px,
    columns: 8,
    margin: $spacing-layout-16,
    padding: $spacing-layout-16,
    gutter: 0
  ),
  lg: (
    width: 1056px,
    columns: 16,
    margin: $spacing-layout-16,
    padding: $spacing-layout-16,
    gutter: 0
  ),
  xlg: (
    width: 1312px,
    columns: 16,
    margin: $spacing-layout-16,
    padding: $spacing-layout-16,
    gutter: 0
  ),
  xxlg: (
    width: 1584px,
    columns: 16,
    margin: $spacing-layout-24,
    padding: $spacing-layout-16,
    gutter: 0
  ),
) !default;

$sdds-grid-breakpoints-push: (
  sm: (
    width: 320px,
    columns: 4,
    margin: 0,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32,
    display: none
  ),
  md: (
    width: 672px,
    columns: 8,
    margin: $spacing-layout-16,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-16,
    display: none
  ),
  lg: (
    width: 1056px,
    columns: 8,
    margin: $spacing-layout-16,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32,
    content: 800px,
    sidebar: 256px,
    display: block
  ),
  xlg: (
    width: 1312px,
    columns: 16,
    margin: $spacing-layout-16,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32,
    content: 1056px,
    sidebar: 256px,
    display: block
  ),
  xxlg: (
    width: 1584px,
    columns: 16,
    margin: $spacing-layout-24,
    padding: $spacing-layout-8,
    gutter: $spacing-layout-32,
    content: 1328px,
    sidebar: 256px,
    display: block
  ),
) !default;