////
/// @group css variables
////

/// Variables to control basic layout of the k-scaffold
/// @name layout variables
@mixin variables{
  // Layout variables
  // Variables to define our basic gap between layout elements. Followed by several gaps that are mathematically related to it.
  --normal-gap-x:1rem;
  --normal-gap-y:1rem;
  --normal-gap: var(--normal-gap-x);

  // Half gaps
  --half-gap-x:calc(var(--normal-gap-x) / 2);
  --half-gap-y:calc(var(--normal-gap-y) / 2);
  --half-gap: var(--half-gap-x);

  // Tiny gaps (1/4 gap)
  --tiny-gap-x:calc(var(--half-gap-x) / 2);
  --tiny-gap-y:calc(var(--half-gap-y) / 2);
  --tiny-gap: var(--tiny-gap-x);

  // Big gaps (double gap)
  --big-gap-x:calc(var(--normal-gap-x) * 2);
  --big-gap-y:calc(var(--normal-gap-y) * 2);
  --big-gap: var(--big-gap-x);
}