// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
  xs: 0,
  sm: 768px,
  md: 992px,
  lg: 1270px,
  xl: 1350px
) !default;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 750px,
  md: 970px,
  lg: 1170px,
  xl: 1300px
) !default;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 20 !default;
$grid-gutter-width: 10px !default;
$grid-gutter-width-lg: 15px !default;

// Border
//
// Set the default properties of the border

$border-color: #dddddd;

// Spacer
//
// Set the default properties of the spacer
$spacer: $grid-gutter-width !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: $spacer,
    12: (
      $spacer * 1.2
    ),
    15: (
      $spacer * 1.5
    ),
    2: (
      $spacer * 2
    ),
    25: (
      $spacer * 2.5
    ),
    3: (
      $spacer * 3
    ),
    33: (
      $spacer * 3.3
    ),
    35: (
      $spacer * 3.5
    ),
    4: (
      $spacer * 4
    ),
    45: (
      $spacer * 4.5
    ),
    5: (
      $spacer * 5
    )
  ),
  $spacers
);

$input-placeholder-color: #b2b2b2;
$modal-md: 600px !default;
