@import 'nib'

global-reset()

html, body, input, select, textarea, button
  font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif
  line-height: 18px
  color: #4d4d4d

html
  font-size: 100%
  max-height: 100%
  -webkit-text-size-adjust: 100%

body
  background: darken(white, 13%)
  margin: 0
  position: relative
  z-index: 0
  overflow-y: auto

#surface
  display: flex
  flex-direction: column
  min-height: 100vh
  overflow: hidden

#content
  position: relative
  flex: 1

div::selection
  background: transparent

h1
  font-size: 22px
  line-height: 1.2em
  margin: 0 0 10px

h2
  font-size: 18px
  line-height: 1.2em
  margin: 0 0 9px

h3, h4, h5, h6
  font-size: 16px
  line-height: 1.25em
  margin: 0 0 6px

.quiet, .quiet a
  color: #8c8c8c

.error, .error a
  color: #eb3800

.no-items-message
  color: darken(white, 60%)
  margin: 30px 0
  text-align: center

.warning
  background: #f0ecdb
  border-radius: 3px
  color: #aa8f09
  padding: 6px 8px

  a
    color: #aa8f09

a
  color: inherit
  cursor: pointer
  text-decoration: none

  &.is-disabled,
  &.is-disabled:hover
    cursor: default
    text-decoration: none

strong
  font-weight: bold

p
  a
    text-decoration: underline
    word-wrap: break-word

table, p
  margin-bottom: 8px

pre
  margin: 15px 0
  white-space: pre
  max-height: 516px

pre,
code,
tt
  font-family: lucida console, monospace
  line-height: 1.25em

blockquote
  margin: 8px 0 8px 8px
  border-left: 1px solid #ccc
  color: #666
  padding: 0 0 0 8px

hr
  height: 1px
  border: 0
  border: none
  width: 100%
  background: #dbdbdb
  color: #dbdbdb
  margin: 15px 0
  padding: 0

table, td, th
  vertical-align: top
  border-top: 1px solid #ccc
  border-left: 1px solid #ccc

td, th
  padding: 5px
  border-right: 1px solid #ccc
  border-bottom: 1px solid #ccc

th
  font-weight: 700

thead
  background: #fff
  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)

tbody
  background-color: #fff

dl, dt
  margin-bottom: 8px

dd
  margin: 0 0 16px 24px

.clear
  clear: both

.clearfix
  clearfix()

.hide
  display: none

.show
  display: block

.bold
  font-weight: 700

.center
  text-align: center

.left
  float: left

.right
  float: right

.first
  margin-left: 0
  padding-left: 0

.last
  margin-right: 0
  padding-right: 0

.top
  margin-top: 0
  padding-top: 0

.bottom
  margin-bottom: 0
  padding-bottom: 0

.relative
  position: relative

.block
  display: block

.inline
  display: inline

.inline-block
  display: inline-block

.pointer
  cursor: pointer

.ellip
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.underline
  text-decoration: underline

.lowercase
  text-transform: lowercase

.invisible
  visibility: hidden

.wrapword
  word-wrap: break-word

.grab
  cursor: grab

.grabbing
  cursor: grabbing

.emoji
  height: 18px
  width: 18px
  vertical-align: text-bottom

// Implement a thiner close icon as suggested in
// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
.fa.fa-times-thin:before
  content: '\00d7';

.fa.fa-globe.colorful
  color: #4caf50

.fa.fa-lock.colorful
  color: #f44336

.pop-over .pop-over-list li a:hover
  .fa, .fa.colorful
    color: white

    &:hover
      color: white

a
  &.fa, i.fa
    color: darken(white, 35%)

  &:hover, &.is-active
    &.fa, i.fa
      color: darken(white, 60%)

.ui-draggable-dragging
  z-index: 200

.atMention
  background: #dbdbdb
  border-radius: 3px
  padding: 1px 4px
  margin: -1px 0
  display: inline-block

  &.me
    background: #cfdfe8

.big-message
  display: block
  margin: 75px auto
  text-align: center
  max-width: 600px

  h1
    font-size: 26px
    margin-bottom: 24px

  p
    font-size: 18px
    line-height: 22px

.gutter
  margin-left: 38px

.viewer
  ul
    list-style-type: initial
    padding-left: 20px

@keyframes fadeIn
  from
    opacity: 0

@keyframes flexGrowIn
  from
    flex-basis: 0