// guide styles
@charset 'UTF-8';
// icon list, used to generate some classes
$icons:
  //'colors',
  //'fonts',
  //'quarks',
  //'atoms',
  //'molecules',
  //'organisms',
  'settings',
  //'utilities',
  'menu',
  'phone',
  'tablet',
  'desktop',
  //'code',
  'right-arrow',
  'copy',
  //'html'
;

/***
 * Utilities
 *
 * Reusable functions, mixins, and helper classes.  Things like colors, vertical rhythm, and the .clear-fix helper are in this group.
 * > This directory of partials is also important because we’ll need to define global classes, mixins and styles that can be used anywhere and at any time.
 * >
 * >\- http://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
 */
@import
// Sass Functions
//
// Functions you can call in Sass that will help with various things.
//
// Styleguide I.1
  'utilities/icons',
  'utilities/functions/stripUnits',
  'utilities/functions/pxToRem',
  'utilities/functions/pxToEm',
  'utilities/functions/sqrt',
  'utilities/functions/pow',
  'utilities/functions/modularScale',

// Sass Mixins
//
// Helpful mixins for complex queries and properties.
//
// Styleguide I.2
  'utilities/mixins/aspect-ratio',
  'utilities/mixins/quantity-query',
  'utilities/mixins/mod-query',
  'utilities/mixins/media-queries',

// global styles
  'utilities/mixins/clear-fix',
  'utilities/mixins/grid',
  'utilities/visuallyhidden',
  'utilities/resets'
  ;

/**
 * Settings
 *
 * Global settings and variables. This defines global site wide things like
 * colors and fonts.
 */
@import
  'settings/spacing',
  'settings/colors',
  'settings/fonts',
  'settings/transitions',
  'settings/type-scale'
  ;

/***
 * Quarks
 *
 * Element level styles meant to apply globally.  These define what elements look like if no class is applied to them.  Effectively our site specific _normalize.css_.
 * > Note that these files contain only the default styles for these elements, not modified elements. For example, if we have a table that looks and works entirely differently from the default tables used throughout the website, it would not be a quark.
 * >
 * >\- http://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
 */
@import
  'quarks/html',
  'quarks/body',
  'quarks/typography',
  'quarks/links',
  'quarks/img',
  'quarks/svg',
  'quarks/hr',
  'quarks/list',
  'quarks/blockquote',
  'quarks/table',
  'quarks/code',
  'quarks/input'
  ;

/***
 * Atoms
 *
 * These are the smallest level of styles that merit a class.  Examples are buttons, icons, and text variations like disclaimers.
 * > The styles in an atom should almost never be attached to an HTML element itself; we might not be able to guarantee what the markup will look like in the future. Specifying a class instead is always safer.
 * >
 * >\- http://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
 */
@import
  'atoms/file-path',
  'atoms/swatch',
  'atoms/font-sample',
  'atoms/button',
  'atoms/copyable',
  'atoms/attribute'
  ;

/***
 * Molecules
 *
 * Structures which combine multiple elements to create a coherent piece. A header with an image and headline, or a nav dropdown containing numerous links, for example.
 * > This is where we can combine multiple quarks and atoms, without interfering with any of our global styles.
 * >
 * >\- http://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
 */
@import
  'molecules/nav-main',
  'molecules/button-group',
  'molecules/color',
  'molecules/code-block',
  'molecules/attribute-list'
  ;

/***
 * Organisms
 *
 * These are big things that combine everything smaller.  An entire form containing molecules of labels with inputs, or the global site header, for example.
 * > Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
 * >
 * >\- http://bradfrost.com/blog/post/atomic-web-design/#organisms
 */
@import
  'organisms/section',
  'organisms/header-main',
  'organisms/footer-main',
  'organisms/controls',
  'organisms/tray',
  'organisms/component',
  'organisms/palette',
  'organisms/html-sample'
  ;

@import
  'template/page-container'
  ;

// extra
// @import
//   'extra/dev-only',
//   'extra/scrollbar'
//   ;

// js helpers
@import
  'js-styles/js-collapsable'
  ;