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

// -- App ----------------------------------------------------------------------
html
  position: absolute
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  font-family Roboto, sans-serif

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)

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

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