@use 'func' as *;

$_base-space: 1rem;

$spacing: (
  space-xs: 0.25  * $_base-space, // 4px
  space-s: 0.5 * $_base-space,    // 8px

  space-ms: 0.75 * $_base-space,  // 12px
  space-m: 1 * $_base-space,      // 16px
  space-ml: 1.25 * $_base-space,  // 20px

  space-l: 1.5 * $_base-space,    // 24px
  space-xl: 2 * $_base-space,     // 32px
  space-2xl: 2.5 * $_base-space,  // 40px
  space-3xl: 3 * $_base-space,    // 48px
  space-4xl: 4 * $_base-space,    // 64px
);

@function spacing($name: string) {
  @return map-get($spacing, "space-" + $name);
}

@mixin padding($name: string) {
  padding: spacing($name);
}
