// Settings :: Core

// This core file sets up fabric css’ most important setup variables. They
// underpin a lot of how the framework functions and should be modified and
// preconfigured with caution.

// Baseline grid lines height.
// Every spacing metric should be based on this.

$fabric-global-baseline: 6px !default;
$fabric-rhythm-unit: 24px !default;

// How many grid lines should our spacing unit variants span?
// Each value should be an unitless integer.

$fabric-global-spacing-unit-factor-tiny: 1 !default; // 6px
$fabric-global-spacing-unit-factor-small: 2 !default; // 12px
$fabric-global-spacing-unit-factor: 4 !default; // 24px
$fabric-global-spacing-unit-factor-large: 8 !default; // 48px
$fabric-global-spacing-unit-factor-huge: 16 !default; // 96px

// Spacing values are determined based on your project’s global baseline grid.
// It is not recommended that you modify these following variables
// (it can break your vertical rhythm), but if you need to, you can.

$fabric-global-spacing-unit: $fabric-global-baseline *
  $fabric-global-spacing-unit-factor !default;
$fabric-global-spacing-unit-tiny: $fabric-global-baseline *
  $fabric-global-spacing-unit-factor-tiny !default;
$fabric-global-spacing-unit-small: $fabric-global-baseline *
  $fabric-global-spacing-unit-factor-small !default;
$fabric-global-spacing-unit-large: $fabric-global-baseline *
  $fabric-global-spacing-unit-factor-large !default;
$fabric-global-spacing-unit-huge: $fabric-global-baseline *
  $fabric-global-spacing-unit-factor-huge !default;

// Base typographical styles.

$fabric-global-font-size: 16px !default;
$fabric-global-line-height: $fabric-global-spacing-unit !default;

// By default, fabriccss uses fractions-like classes like `<div class="u-1/4">`.
// You can change the `/` to whatever you fancy with this variable.
$fabric-widths-delimiter: \/ !default;

// When using Sass-MQ, this defines the separator for the breakpoints suffix
// in the class name. By default, we are generating the responsive suffixes
// for the classes with a `@` symbol so you get classes like:
// <div class="u-3/12@mobile">
$fabric-widths-breakpoint-separator: \@ !default;

// Check that the chosen font rules are pixel numbers.

@each $_fabric-font-globals
  in $fabric-global-font-size
  $fabric-global-line-height
{
  @if (type-of($_fabric-font-globals) == number) {
    @if (unit($_fabric-font-globals) != 'px') {
      @error '`#{$_fabric-font-globals}` needs to be a pixel value.';
    }
  } @else {
    @error '`#{$_fabric-font-globals}` needs to be a number.';
  }
}

// Check that the chosen size factors are unitless, integer numbers.

@each $_fabric-spacing-unit
  in $fabric-global-spacing-unit-factor-tiny
  $fabric-global-spacing-unit-factor-small
  $fabric-global-spacing-unit-factor-large
  $fabric-global-spacing-unit-factor-huge
{
  @if (type-of($_fabric-spacing-unit) == number) {
    @if (unitless($_fabric-spacing-unit) == false) {
      @error '`#{$_fabric-spacing-unit}` needs to be unitless.';
    }

    @if ($_fabric-spacing-unit != ceil($_fabric-spacing-unit)) {
      @error '`#{$_fabric-spacing-unit}` needs to be an integer.';
    }
  } @else {
    @error '`#{$_fabric-spacing-unit}` needs to be a number.';
  }
}