18F/web-design-standards

/*
========================================
margin
----------------------------------------
usage:
  .margin-[modifier]*-[key]
----------------------------------------
output:
  margin: [value];
----------------------------------------
example:
  .margin-x-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .margin-105 {
    margin: .75rem;
  }
----------------------------------------
*/

@use "uswds-core/src/styles/settings" as *;
@use "uswds-core/src/styles/functions" as *;
@use "../functions/" as *;

$u-margin: (
  margin: (
    base: "margin",
    modifiers: (
      noModifier: "",
    ),
    values: map-collect(get-palettes($margin-palettes), $margin-manual-values),
    settings: $margin-settings-complete,
    property: "margin",
    type: "utility",
  ),
  margin-vertical: (
    base: "margin",
    modifiers: (
      "y": (
        "-top",
        "-bottom",
      ),
      "top": "-top",
      "bottom": "-bottom",
    ),
    values:
      map-collect(
        get-palettes($margin-vertical-palettes),
        $margin-manual-values
      ),
    settings: $margin-settings-complete,
    property: "margin",
    type: "utility",
  ),
  margin-horizontal: (
    base: "margin",
    modifiers: (
      "x": (
        "-left",
        "-right",
      ),
      "right": "-right",
      "left": "-left",
    ),
    values:
      map-collect(
        get-palettes($margin-horizontal-palettes),
        $margin-manual-values
      ),
    settings: $margin-settings-complete,
    property: "margin",
    type: "utility",
  ),
);