$base: (
  font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
  font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),

  font-size-root:         16px,
  font-size-root-sm:      14px,

  font-size-xl:           1.5rem,
  font-size-lg:           1.25rem,
  font-size:              1rem,
  font-size-sm:           .85rem,
  font-size-xs:           .7rem,

  font-size-h1-xl:        3.5rem,
  font-size-h2-xl:        2.5rem,
  font-size-h3-xl:        2rem,
  font-size-h4-xl:        1.75rem,
  font-size-h5-xl:        1.5rem,
  font-size-h6-xl:        1.5rem,

  font-size-h1-lg:        3rem,
  font-size-h2-lg:        2rem,
  font-size-h3-lg:        1.75rem,
  font-size-h4-lg:        1.5rem,
  font-size-h5-lg:        1.25rem,
  font-size-h6-lg:        1.25rem,

  font-size-h1:           2.5rem,
  font-size-h2:           1.9rem,
  font-size-h3:           1.5rem,
  font-size-h4:           1.2rem,
  font-size-h5:           1rem,
  font-size-h6:           1rem,

  font-size-h1-sm:        2rem,
  font-size-h2-sm:        1.5rem,
  font-size-h3-sm:        1.35rem,
  font-size-h4-sm:        1.15rem,
  font-size-h5-sm:        1rem,
  font-size-h6-sm:        1rem,

  font-size-h1-xs:        1.05rem,
  font-size-h2-xs:        1rem,
  font-size-h3-xs:        .95rem,
  font-size-h4-xs:        .9rem,
  font-size-h5-xs:        .85rem,
  font-size-h6-xs:        .85rem,

  font-weight:            400,
  font-weight-bold:       700,

  line-height-xl:         2,
  line-height-lg:         1.8,
  line-height:            1.6,
  line-height-sm:         1.4,
  line-height-xs:         1.2,

  spacer:                 1rem,

  border-radius-lg:       .8rem,
  border-radius:          .4rem,
  border-radius-sm:       .2rem
);

$spacers: (
  0:                      0,
  1:                      map-get($base, spacer) * .25,
  2:                      map-get($base, spacer) * .5,
  3:                      map-get($base, spacer),
  4:                      map-get($base, spacer) * 1.5,
  5:                      map-get($base, spacer) * 3
);

$z-indexes: (
  actions: 996,
  mask: 997,
  sidebar: 998,
  modal: 999
);

$layout: (
  header-height:          5rem,
  header-height-sm:       3rem,
  content-max-width:      950px,
  sidebar-width:          250px,
  sidebar-header-height:  3rem,
  aside-width:            220px
);

//     sm       md       lg
// | ------ | ------ | ------ |
// 0       500      1024      -

$responsive: (
  sm:                      0,
  md:                      500px,
  lg:                      1024px
);

$animation: (
  duration:               .4s,
  duration-sm:            .2s,
  timing-function:        ease-in-out
);

$clickable: (
  transition:             all .2s ease-in-out
);

$button-height-xl:        2.8rem;
$button-height-lg:        2.3rem;
$button-height:           1.9rem;
$button-height-sm:        1.5rem;
$button-height-xs:        1.2rem;

$button: (
  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
  padding-x-xl:           $button-height-xl / 3,
  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
  padding-x-lg:           $button-height-lg / 3,
  padding-y:              ($button-height - map-get($base, font-size)) / 2,
  padding-x:              $button-height / 3,
  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
  padding-x-sm:           $button-height-sm / 3,
  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
  padding-x-xs:           $button-height-xs / 3,

  pill-radius:            6rem,

  circle-diameter-xl:     $button-height-xl,
  circle-diameter-lg:     $button-height-lg,
  circle-diameter:        $button-height,
  circle-diameter-sm:     $button-height-sm,
  circle-diameter-xs:     $button-height-xs,

  font-weight:            map-get($base, font-weight-bold)
);

$image: (
  width-xl:  20em,
  width-lg:  16rem,
  width:     12rem,
  width-sm:  8rem,
  width-xs:  4rem
);

$menu: (
  horizontal-spacer: 1,
  horizontal-item-vertical-spacer: 1
);