// =============================================================================
// DIMENSIONS (Layout / Grid)
// =============================================================================


// Layout
// -----------------------------------------------------------------------------
//
// Define the layout width's for your project.
//
// -----------------------------------------------------------------------------

// Max Width
$layout-widthMax:               remCalc(1200px);

// Fixed Width
$layout-widthFixed:             100%;




// Spacing Rhythm
// -----------------------------------------------------------------------------
//
// Create consistent spacing patterns in your entire projects aesthetics.
// Build your components margins, paddings, etc based off these spacing vars.
//
// -----------------------------------------------------------------------------

// Base Spacing
$spacingRhythm:                 $fontSize-root * $lineHeight-base;

$spacing-base:                  1rem;
$spacing-single:                remCalc($spacingRhythm);
$spacing-double:                remCalc($spacingRhythm * 2);
$spacing-half:                  remCalc(round($spacingRhythm / 2));
$spacing-third:                 remCalc(round($spacingRhythm / 3));
$spacing-quarter:               remCalc(round($spacingRhythm / 4));
$spacing-fifth:                 remCalc(round($spacingRhythm / 5));
$spacing-sixth:                 remCalc(round($spacingRhythm / 6));
$spacing-eighth:                remCalc(round($spacingRhythm / 8));




// Stencil grid widths
// -----------------------------------------------------------------------------

$widthMap: (
    "12/12":                    100%,
    "11/12":                    91.66667%,
    "10/12":                    83.33334%,
    "9/12":                     75%,
    "8/12":                     66.66667%,
    "7/12":                     58.33334%,
    "6/12":                     50%,
    "5/12":                     41.66667%,
    "4/12":                     33.33334%,
    "3/12":                     25%,
    "2/12":                     16.66667%,
    "1/12":                     8.33334%
);

@function width($key) {
    @if map-has-key($widthMap, $key) {
        @return map-get($widthMap, $key);
    }

    @warn "Unknown width `#{$key}` in width function.";
    @return null;
}
