@use "sass:map";

$spacing: (
  none: 0,        /* 0px */
  xxxs: 0.125rem, /* 2px */
  xxs: 0.25rem,   /* 4px */
  xs: 0.5rem,     /* 8px */
  sm: 1rem,       /* 16px */
  md: 1.5rem,     /* 24px */
  lg: 2rem,       /* 32px */
  xl: 2.5rem,     /* 40px */
  2xl: 3rem,      /* 48px */
  4xl: 4rem,      /* 64px */
  5xl: 5rem,      /* 80px */
) !default;

:root {
  @each $key, $value in $spacing {
    --spacing-#{$key}: #{$value};
    --spacing-#{$key}-neg: -#{$value};
  }
}

.line-break {
  height: var(--spacing-xs);
}

.indented-list {
  list-style-position: inside;
  padding-left: var(--spacing-sm);
}