// Colors
$blue = #44A1FF
$grey = #DDDDDD
$darkGrey = #CCC
$darkerGrey = #AAA
$blueishGrey = #486887
$green = #42B983
$darkerGreen = #3BA776
$slate = #242424
$white = #FFFFFF
$orange = #FF6B00
$red = #c41a16
$black = #222
$vividBlue = #0033cc
$purple = #997fff
$pink = #881391
$lightPink = #e36eec

// The min-width to give icons text...
$wide = 1100px

// The min-height to give the tools a little more breathing room...
$tall = 350px

// Theme
$active-color = $darkerGreen
$border-color = $md-grey-200
$background-color = $white
$component-color = $active-color
$hover-color = #c2e9d7

$dark-active-color = $active-color
$dark-border-color = darken($vue-ui-gray-900, 30%)
$dark-background-color = $vue-ui-black
$dark-component-color = $active-color
$dark-hover-color = $vue-ui-color-dark

// Entries
// TODO: FIX THIS
// .no-entries
//   color: #ccc
//   text-align: center
//   margin-top: 50px
//   line-height: 30px
//
// .entry
//   position: relative;
//   font-family Menlo, Consolas, monospace
//   color #881391
//   cursor pointer
//   padding 10px 20px
//   font-size 12px
//   background-color $background-color
//   box-shadow 0 1px 5px rgba(0,0,0,.12)
//   .entry-name
//     font-weight 600
//   .entry-source
//     color #999
//   .component-name
//     color $component-color
//   .entry-type
//     color #999
//     margin-left 8px
//   &.active
//     color #fff
//     background-color $active-color
//     .time, .entry-type, .component-name
//       color lighten($active-color, 75%)
//     .entry-name
//       color: #fff
//     .entry-source
//       color #ddd
//   .app.dark &
//     background-color $dark-background-color
//
// .time
//   font-size 11px
//   color #999
//   float right
//   margin-top 3px