// =============================================================================
// SETTINGS / #BREAKPOINTS
// =============================================================================

// Sass MQ Configuration
// ==============================================

// Define our breakpoints for later use with Sass MQ. The key (e.g. `small`)
// becomes the alias for a breakpoint; the value (e.g. `420px`) is that point at
// which that breakpoint kicks in. These pixel values will be converted into ems
// by Sass MQ.
//
// Note: Sass MQ's `em` values are calculated via the browser-default HTML
//       font-size of `16px`, *not* Toolkit's $global-font-size.
//       Further reading: https://stackoverflow.com/a/39935188
//
// Make use of these breakpoints like so:
//
//   .foo {
//     color: red;
//
//     @include mq($from: small) {
//       color: green;
//     }
//
//   }
//
// This will compile to:
//
//   .foo {
//     color: red;
//   }
//
//   @media (min-width: 21em) {
//     .foo {
//       color: green;
//     }
//   }

$mq-breakpoints: (
  small:   420px,
  medium:  740px,
  large:   980px,
  x-large: 1300px
) !default;

// Supercell Configuration
// ==============================================

// Our Grid System is an external dependency called Supercell
// (github.com/sky-uk/supercell).
// Supercell has a configurable gutter size, and by default we want it to equal
// our Global Spacing Unit.
$supercell-spacing-unit: $global-spacing-unit !default;