// -----------------------------------------------------------------------------
// Globals
// -----------------------------------------------------------------------------

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600')
@import 'nib'

global-reset()

// -----------------------------------------------------------------------------
// vendor styles
// -----------------------------------------------------------------------------

@import '../../src/index'

// -----------------------------------------------------------------------------
// variables
// -----------------------------------------------------------------------------

$fnt-open-sans = 'Open Sans', sans-serif
$react = #25d8fd

// -----------------------------------------------------------------------------
// styles
// -----------------------------------------------------------------------------

*
  box-sizing border-box

html
  min-height 100vh

body
  background: white
  font-family: $fnt-open-sans
  font-weight: 300

h1
  font-size: 2.5em
  color: white

a
  color: darken($react, 20%)
  font-weight: bold
  text-decoration: none

strong
  font-weight: bold

.logo
  width: 400px
  max-width: 100%

.container
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  min-height: 100vh
  padding-top: 20px

  .github-addon
    font-size: 20px
    padding: 10px

.viewport
  width:100%

.table-wrap
  width: 90%
  margin: auto
  padding: 10px
  border-radius: 5px
  box-shadow: 0 0 20px 0 alpha(black, .2)

.menu
  display:block
  margin: 0 10px 20px
  ul
    display:block
  li
    display:inline-block
  a
    display:block
    padding: 10px
    margin: 5px
    background: alpha(black, .7)
    color: white
    border-radius: 3px
    transition: all .2s ease-out
    &.active
    &:hover
      background: alpha(black, .9)

.ReactTable
	thead
		th
		td
			&.-sort-asc
				box-shadow:inset 0 3px 0 0 alpha(black, .6)
			&.-sort-desc
				box-shadow:inset 0 -3px 0 0 alpha(black, .6)

pre
  display:block
  font-family: monospace
  font-size: 15px
  line-height: 20px
  border-radius: 5px
  margin: 20px auto
  max-width: 90%
  padding: 0 20px !important