@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
@import './vendor.styl'

// -- Customize
html
  font-family Roboto, sans-serif

// -- normalize v3.0.2 | MIT License | git.io/normalize
html
  -ms-text-size-adjust 100%
  -webkit-text-size-adjust 100%

body
  margin 0

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
nav, section, summary
  display block

audio, canvas, progress, video
  display inline-block
  vertical-align baseline

audio
  &:not([controls])
    display none
    height 0

[hidden], template
  display none

a
  background-color transparent
  &:active, &:hover
    outline 0

abbr[title]
  border-bottom 1px dotted

b, strong
  font-weight bold

dfn
  font-style italic

h1
  font-size 2em
  margin 0.67em 0

mark
  background #ff0
  color #000

small
  font-size 80%

sub, sup
  font-size 75%
  line-height 0
  position relative
  vertical-align baseline

sup
  top -0.5em

sub
  bottom -0.25em

img
  border: 0

svg
  &:not(:root)
    overflow hidden

figure
  border: 0

hr
  -moz-box-sizing content-box
  box-sizing content-box
  height 0

pre
  overflow auto

code, kbd, pre, samp
  font-family monospace, monospace
  font-size 1em

button, input, optgroup, select, textarea
  color inherit
  font inherit
  margin 0

button
  overflow visible

button, select
  text-transform none

button, html input[type="button"], input[type="reset"], input[type="submit"]
  -webkit-appearance button
  cursor pointer

button[disabled], html input[disabled]
  cursor default

button::-moz-focus-inner, input::-moz-focus-inner
  border 0
  padding 0

input
  line-height normal

input[type="checkbox"], input[type="radio"]
  box-sizing border-box
  padding 0

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button
  height auto

input[type="search"]
  -webkit-appearance textfield
  -moz-box-sizing content-box
  -webkit-box-sizing content-box
  box-sizing content-box

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
  -webkit-appearance none

fieldset
  border 1px solid #c0c0c0
  margin 0 2px
  padding 0.35em 0.625em 0.75em

legend
  border 0
  padding 0

textarea
  overflow auto

optgroup
  font-weight bold

table
  border-collapse collapse
  border-spacing 0

td, th
  padding 0

// -- App ----------------------------------------------------------------------
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
  border: 0
  margin: 0
  outline: 0
  padding: 0

*, *:before, *:after
  margin: 0
  padding: 0
  box-sizing: border-box

html
  position: absolute
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  overflow: hidden

body
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: moz-none
  user-select: none
  overflow: hidden

  *
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)

h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
  -webkit-font-smoothing: RENDER = antialiased
  font-smoothing: RENDER
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  text-size-adjust: 100%

a
  text-decoration: none
  -webkit-tap-highlight-color: rgba(0,0,0,0)

::-webkit-scrollbar
  width: 0px
  height: 0px

input:not([type="checkbox"]):not([type="radio"]), button
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  -webkit-touch-callout: none
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
  outline: none

// -- Data-Flex ----------------------------------------------------------------
[data-flex]
  display-flex()
  body&
    position                  : absolute
    left                      : 0
    top                       : 0
    bottom                    : 0
    width                     : 100%
    overflow                  : hidden

// -- Direction
[data-flex^="horizontal"]
  flex-direction row
[data-flex^="vertical"]
  flex-direction column

// -- Size
[data-flex*="grow"]
  > *:not([data-column]):not([data-flex-grow])
    flex-grow 1
[data-flex-grow="min"]
  flex-grow 0
[data-flex-grow="max"]
  flex-grow 2

// -- Container properties
[data-flex*="wrap"]
  flex-wrap wrap
[data-flex*="center"]
  justify-content center
  align-content center
  align-items center
[data-flex-justify="start"]
  justify-content flex-start
[data-flex-justify="center"]
  justify-content center
[data-flex-justify="end"]
  justify-content flex-end
[data-flex-content="start"]
  align-content flex-start
[data-flex-content="center"]
  align-content center
[data-flex-content="end"]
  align-content flex-end
[data-flex-items="center"]
  align-items center
[data-flex-items="start"]
  align-items flex-start
[data-flex-items="end"]
  align-items flex-end

// -- Children properties
[data-flex-order="first"]
  order: -1

[data-flex-order="last"]
  order: 999999