#                                     d8b
#                                     Y8P
#
# .d8888b  88888b.   8888b.   .d8888b 888 88888b.   .d88b.
# 88K      888 "88b     "88b d88P"    888 888 "88b d88P"88b
# "Y8888b. 888  888 .d888888 888      888 888  888 888  888
#      X88 888 d88P 888  888 Y88b.    888 888  888 Y88b 888
#  88888P' 88888P"  "Y888888  "Y8888P 888 888  888  "Y88888
#          888                                          888
#          888                                     Y8b d88P
#          888                                      "Y88P"

# Spacing
#
# We use a spacing scale starting at a `2rem (20px)` base, going up and down from there. You can use these variables in Sass, such as `padding: $space-m;` or `margin: $space-xl $space-l;`.
#
# <div class="border padding margin-bottom">
# <div class="kss-spacer-grid">
#
# <div>This is our XXS space size:</div><div class="kss-spacer space-xxs"></div>
# <div>This is our XS space size:</div><div class="kss-spacer space-xs"></div>
# <div>This is our small space size:</div><div class="kss-spacer space-s"></div>
# <div>This is our medium space size:</div><div class="kss-spacer space-m"></div>
# <div>This is our large space size:</div><div class="kss-spacer space-l"></div>
# <div>This is our XL space size:</div><div class="kss-spacer space-xl"></div>
# <div>This is our XXL space size:</div><div class="kss-spacer space-xxl"></div>
# <div>This is our XXXL space size:</div><div class="kss-spacer space-xxxl"></div>
# <div>This is our XXXXL space size:</div><div class="kss-spacer space-xxxxl"></div>
# <div>This is our XXXXXL space size:</div><div class="kss-spacer space-xxxxxl"></div>
#
# </div>
# </div>
#
# $space-xxs      = 0.33rem   - 3px
# $space-xs       = 0.5rem    - 5px
# $space-s        = 1rem      - 10px
# $space-m        = 2rem      - 20px
# $space-l        = 3rem      - 30px
# $space-xl       = 4rem      - 40px
# $space-xxl      = 6rem      - 60px
# $space-xxxl     = 8rem      - 80px
# $space-xxxxl    = 12rem     - 120px
# $space-xxxxxl   = 16rem     - 160px
# $space-xxxxxxl  = 20rem     - 20px
# $space-xxxxxxxl = 24rem     - 240px
#
# Styleguide Tokens.Spacing
#
# Weight: 3
space:
  base: 1rem !default

  xxs: $space-base / 3 !default
  xs: $space-base / 2 !default
  s: $space-base !default
  m: $space-base * 2 !default
  l: $space-base * 3 !default
  xl: $space-base * 4 !default
  xxl: $space-base * 6 !default
  xxxl: $space-base * 8 !default
  xxxxl: $space-base * 12 !default
  xxxxxl: $space-base * 16 !default
  xxxxxxl: $space-base * 20 !default
  xxxxxxxl: $space-base * 24 !default

  stack:
    xxs: 0 0 $space-xxs 0
    xs: 0 0 $space-xs 0
    s: 0 0 $space-s 0
    m: 0 0 $space-m 0
    l: 0 0 $space-l 0
    xl: 0 0 $space-xl 0
    xxl: 0 0 $space-xxl 0
    xxxl: 0 0 $space-xxxl 0
    xxxxl: 0 0 $space-xxxxl 0
    xxxxxl: 0 0 $space-xxxxxl 0
    xxxxxxl: 0 0 $space-xxxxxxl 0
    xxxxxxxl: 0 0 $space-xxxxxxxl 0

  inline:
    xxs: 0 $space-xxs 0 0
    xs: 0 $space-xs 0 0
    s: 0 $space-s 0 0
    m: 0 $space-m 0 0
    l: 0 $space-l 0 0
    xl: 0 $space-xl 0 0
    xxl: 0 $space-xxl 0 0
    xxxl: 0 $space-xxxl 0 0
    xxxxl: 0 $space-xxxxl 0 0
    xxxxxl: 0 $space-xxxxxl 0 0
    xxxxxxl: 0 $space-xxxxxxl 0 0
    xxxxxxxl: 0 $space-xxxxxxxl 0 0