/* style-reset */
@import url("external/style-reset.css");

/* fonts */
/* These have been moved to their own individual files; you can change local/CDN there */
@import url("external/fonts/font-open-sans.css");
@import url("external/fonts/font-material-icons.css");
@import url("external/fonts/font-fira-mono.css");

/* quick-draw-body */
@import url("components/quick-draw-body/quick-draw-body.css");

/* quick-draw-general */
@import url("components/general/quick-draw-general.css");

/* masthead */
@import url("components/masthead/masthead.css");
@import url("components/masthead/masthead__image-container.css");
@import url("components/masthead/masthead__image.css");
@import url("components/masthead/masthead_blue.css");
@import url("components/masthead/masthead_green.css");

/* menu */
@import url("components/menu/menu.css");
@import url("components/menu/menu__left_spacer.css");
@import url("components/menu/menu__middle.css");
@import url("components/menu/menu__right_spacer.css");
@import url("components/menu/menu__group.css");
@import url("components/menu/menu__group--right.css");
@import url("components/menu/menu__folder.css");
@import url("components/menu/menu__folder-name.css");
@import url("components/menu/menu__folder-dropdown.css");
@import url("components/menu/menu__item.css");

/* layout */
@import url("components/layout/layout.css");
@import url("components/layout/layout__sidebar-container.css");
@import url("components/layout/layout__content-container.css");
@import url("components/layout/layout__right-spacer.css");

/* header */
@import url("components/header/header.css");
@import url("components/header/header__page-title.css");
@import url("components/header/header__page-title--left1.css");
@import url("components/header/header__page-title--left2.css");
@import url("components/header/header__page-title--left3.css");
@import url("components/header/header__page-title--left4.css");
@import url("components/header/header__page-title--left5.css");
@import url("components/header/header__page-title--left6.css");
@import url("components/header/header__page-title--left7.css");
@import url("components/header/header__page-title--left8.css");
@import url("components/header/header__page-description.css");

/* footer */
@import url("components/footer/footer.css");
@import url("components/footer/footer__final-action-row.css");
@import url("components/footer/footer__final-action-button.css");
@import url("components/footer/footer__final-action-button-text.css");
@import url("components/footer/footer__text.css");

/* text-group */
@import url("components/text-group/text-group.css");
@import url("components/text-group/text-group__heading.css");
@import url("components/text-group/text-group__subheading.css");
@import url("components/text-group/text-group__paragraph.css");
@import url("components/text-group/text-group__paragraph--no-top-space.css");
@import url("components/text-group/text-group__label.css");

/* card-group */
@import url("components/card-group/card-group.css");

/* card */
@import url("components/card/card.css");
@import url("components/card/card--gray.css");
@import url("components/card/card__header.css");
@import url("components/card/card__header-text.css");
@import url("components/card/card__header-actions.css");
@import url("components/card/card__title.css");
@import url("components/card/card__subtitle.css");
@import url("components/card/card__body.css");
@import url("components/card/card__footer.css");
@import url("components/card/card__footer-actions.css");

/* form */
@import url("components/form/form.css");
@import url("components/form/form__header.css");
@import url("components/form/form__title.css");
@import url("components/form/form__description.css");
@import url("components/form/form__body.css");
@import url("components/form/form__section.css");
@import url("components/form/form__section-heading.css");
@import url("components/form/form__section-subheading.css");
@import url("components/form/form__section-description.css");
@import url("components/form/form__footer.css");
@import url("components/form/form__final-action-button.css");
@import url("components/form/form__final-action-button-text.css");

/* button */
@import url("components/button/button.css");
@import url("components/button/button--filled.css");
@import url("components/button/button--full-width.css");

/* text-field */
@import url("components/text-field/text-field.css");
@import url("components/text-field/text-field--full-width.css");
@import url("components/text-field/text-field--narrow.css");
@import url("components/text-field/text-field__label.css");
@import url("components/text-field/text-field__input.css");
@import url("components/text-field/text-field__underline.css");

/* select */
@import url("components/select/select.css");
@import url("components/select/select--full-width.css");
@import url("components/select/select--narrow.css");
@import url("components/select/select__label.css");
@import url("components/select/select__input.css");
@import url("components/select/select__option.css");

/* checkbox-group */
@import url("components/checkbox-group/checkbox-group.css");
@import url("components/checkbox-group/checkbox-group__label.css");
@import url("components/checkbox-group/checkbox-group__checkbox.css");
@import url("components/checkbox-group/checkbox-group__checkbox-label.css");
@import url("components/checkbox-group/checkbox-group__checkbox-input.css");

/* toggle */
@import url("components/toggle/toggle.css");
@import url("components/toggle/toggle__label.css");
@import url("components/toggle/toggle__switch.css");
@import url("components/toggle/toggle__input.css");
@import url("components/toggle/toggle__slider.css");

/* radio-group */
@import url("components/radio-group/radio-group.css");
@import url("components/radio-group/radio-group__label.css");
@import url("components/radio-group/radio-group__radio-button.css");
@import url("components/radio-group/radio-group__radio-button-label.css");
@import url("components/radio-group/radio-group__radio-button-input.css");
@import url("components/radio-group/radio-group__radio-button-circle.css");

/* file-upload */
@import url("components/file-upload/file-upload.css");
@import url("components/file-upload/file-upload--drag-over.css");
@import url("components/file-upload/file-upload__text.css");
@import url("components/file-upload/file-upload__button.css");

/* horizontal-group */
@import url("components/horizontal-group/horizontal-group.css");
@import url("components/horizontal-group/horizontal-group__item.css");
@import url("components/horizontal-group/horizontal-group__item-1.css");
@import url("components/horizontal-group/horizontal-group__item-2.css");
@import url("components/horizontal-group/horizontal-group__item-3.css");
@import url("components/horizontal-group/horizontal-group__item-4.css");
@import url("components/horizontal-group/horizontal-group__item-5.css");
@import url("components/horizontal-group/horizontal-group__item-6.css");
@import url("components/horizontal-group/horizontal-group__item-7.css");
@import url("components/horizontal-group/horizontal-group__item-8.css");
@import url("components/horizontal-group/horizontal-group__item-9.css");
@import url("components/horizontal-group/horizontal-group__item-10.css");
@import url("components/horizontal-group/horizontal-group__item-11.css");
@import url("components/horizontal-group/horizontal-group__item-12.css");

/* code */
@import url("components/code/code.css");

/* list */
/* @import url("components/list/list.css"); */
/* @import url("components/list/list__label.css"); */
/* @import url("components/list/list__item.css"); */
/* @import url("components/list/list__item-text.css"); */
/* @import url("components/list/list__item-action.css"); */

/* 
General Layout Rules within File:
    Work from inside out, so, what it is, how it's bordered, then padded, then margins

    Font
    Color 
    Background

    Border
    box-shadow
    Padding -- Left, Right, Top, Bottom
    Margins -- Left, Right, Top, Bottom
    
    How it exists / holds things
    
    cursor
    
    How it changes (transitions)
    







*/

/* 
    Universals

    Fonts:
        Font Primary: Open Sans
        Font Code: Fira Code

    Colors:
        Background:
        Text Dark: hsl(0, 0%, 0%);
        Text Light: hsl(0, 0%, 100%);
        Brand Primary: hsl(204, 86%, 40%);
        Brand Secondary: 
*/

/* 
    Questions:

    Christopher: were we serious about not supporting IE?
        If so, I can use variables, which would be great
 */

/* 
    final-page-action: min-width 10em;
  */

/* 
  
  
  masthead
  _green
  _blue
  __image
  menu
  __left-spacer
  __middle
  __right-spacer
  __group
  __group--right
  __folder
  __folder-dropdown
  __item
  layout
  __sidebar-container
  __content-container
  __right-spacer
  header
  __page-title
  __page-description
  footer
  __final-action-row
  __final-action-button
  __text
  text-section
  __heading
  __subheading
  __paragraph


  text-chunk
  __heading
  __sub-heading
  form
  __header
  __content
  __footer
  form-group? chunk?


  @import url("");
  
  */