@use 'sass:map';
@use '../../mixins/layout/convert';

/// Namespace prefix
/// @type String
/// @access public
/// @group @cds/grid
$prefix: 'cds' !default;

/// Total columns used in the flex grid
/// @type Number
/// @access public
/// @group @cds/grid
$flex-grid-columns: 16 !default;

/// Gutter size in rem
/// @type Number
/// @access public
/// @group @cds/layout
$grid-gutter: convert.toRem(32px) !default;

/// Condensed gutter size in rem
/// @type Number
/// @access public
/// @group @cds/layout
$grid-gutter-condensed: convert.toRem(1px) !default;

// Initial map of our breakpoints and their values
/// @type Map
/// @access public
/// @group @cds/layout
$grid-breakpoints: (
  xs: (
    columns: 4,
    margin: 0,
    width: convert.toRem(320px),
  ),
  sm: (
    columns: 8,
    margin: convert.toRem(16px),
    width: convert.toRem(672px),
  ),
  md: (
    columns: 16,
    margin: convert.toRem(16px),
    width: convert.toRem(1056px),
  ),
  lg: (
    columns: 16,
    margin: convert.toRem(16px),
    width: convert.toRem(1312px),
  ),
  xl: (
    columns: 16,
    margin: convert.toRem(24px),
    width: convert.toRem(1584px),
  ),
) !default;

@if $flex-grid-columns == 12 {
  $grid-breakpoints: map.merge(
    $grid-breakpoints,
    (
      md: map.merge(
        map.get($grid-breakpoints, md),
        (
          columns: 12,
        )
      )
    ),
    (
      lg: map.merge(
        map.get($grid-breakpoints, lg),
        (
          columns: 12,
        )
      )
    ),
    (
      xl: map.merge(
        map.get($grid-breakpoints, xl),
        (
          columns: 12,
        )
      )
    )
  );
}
