//
// Spacing
//

@use '../functions';

// Component spacing
// Use the spacing scale when building individual components.
// It includes small increments needed to create appropriate spatial relationships for detail-level designs.
// This scale is applied and used within all Carbon components.
// -----------------

$spacing-unit: 1rem;
$spacing-00: 0;
$spacing-01: 0.125 * $spacing-unit;
$spacing-02: 0.25 * $spacing-unit;
$spacing-03: 0.5 * $spacing-unit;
$spacing-04: 0.75 * $spacing-unit;
$spacing-05: $spacing-unit;
$spacing-06: 1.5 * $spacing-unit;
$spacing-07: 2 * $spacing-unit;
$spacing-08: 2.5 * $spacing-unit;
$spacing-09: 3 * $spacing-unit;
$spacings: (
  '00': $spacing-00,
  '01': $spacing-01,
  '02': $spacing-02,
  '03': $spacing-03,
  '04': $spacing-04,
  '05': $spacing-05,
  '06': $spacing-06,
  '07': $spacing-07,
  '08': $spacing-08,
  '09': $spacing-09
);

$negative-spacings: functions.negativify-map($spacings) !default;

// Layout spacing
// The layout scale is used for arranging components and other UI parts into a full page layout.
// It has larger increments that are used to control the density of a design.
// Use the smaller layout tokens to create more dense compositions and direct relationships.
// Use the larger tokens to increase the amount of white space and to disassociate sections.
// --------------

$layout-unit: 1rem;
$layout-01: $layout-unit;
$layout-02: 1.5 * $layout-unit;
$layout-03: 2 * $layout-unit;
$layout-04: 3 * $layout-unit;
$layout-05: 4 * $layout-unit;
$layout-06: 6 * $layout-unit;
$layout-07: 10 * $layout-unit;
$layouts: (
  '01': $layout-01,
  '02': $layout-02,
  '03': $layout-03,
  '04': $layout-04,
  '05': $layout-05,
  '06': $layout-06,
  '07': $layout-07
);

$negative-layouts: functions.negativify-map($layouts) !default;