@font-face
  font-family 'bzpro-icons';
  src url('../fonts/bzpro-icons.eot?v=27041015')
  src url('../fonts/bzpro-icons.eot?v=27041015#iefix') format('embedded-opentype'),

       url('../fonts/bzpro-icons.woff2?v=27041015') format('woff2'),
       url('../fonts/bzpro-icons.woff?v=27041015') format('woff'),
       url('../fonts/bzpro-icons.ttf?v=27041015') format('truetype'),
       url('../fonts/bzpro-icons.svg?v=27041015#bzpro-icons') format('svg');
  font-weight normal
  font-style normal

html
  font-family 'proxima nova', 'helvetica', 'arial', sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  background-color $bz-black

// Prevent page bounce when scrolling
html, body
  width 100%
  height 100%

// TL;DR: Workspace Height Fix for IE
// React creates these lovely top-level containers that we dont need and ie
// bitches when parents of height: 100% children are not set to height: 100% as
// well
// ID's are named with respect to the component that rendered the div
#init,
#site,
#app
  height 100%

// Prevent system fonts from overriding certain UI elements
input, button
  font-family inherit
  -webkit-font-smoothing inherit


.session-elem
  simpleTransition(opacity)
  opacity 1

.session-hide
  opacity 0
  visibility hidden

// spinners
.loading-spinner
  position absolute
  left 50%
  top 50%
  margin-left -0.5em
  margin-top -0.5em
  width 1em
  height 1em
  display inline-block
  border-radius 50%
  border 2px solid rgba(255, 255, 255, 0.3)
  border-top-color $bz-white
  animation spin 750ms linear infinite

// NEW LOADER: Will use after refactor
.Loader
  width 1em
  height 1em
  display inline-block
  border-radius 50%
  animation spin 750ms linear infinite
  border-width 1px
  border-style solid

// toggle switches
.toggle-switch
  display inline-block
  color $bz-grey
  cursor pointer
  &:before, &:after
    padding 6px 12px
    text-align center
    width 20px
    display inline-block
    font-size 0.9em
  &:before
    content 'OFF'
    color $bz-grey
    background-color $bz-grey--dark
  &:after
    content 'ON'
    color $bz-grey
    background-color $bz-grey--dark
  &-off
    &:before
      color $bz-white
      background-color $bz-red
  &-on
    &:after
      color $bz-white
      background-color $bz-green

// in-app buttons
//---------------------------

.Button
  border 0
  outline 0
  text-transform uppercase
  font-size 13px
  padding .5em 1.2em
  cursor pointer
  color $bz-white
  simpleTransition(all)
  &--blue
    background $bz-blue
    &:hover
      background darken($bz-blue, 10%)
  &--text
    background transparent
    // color changes are in theme styling

// Percent Meter
//---------------------------

.PercentMeter
  &-fill
    display inline-block
    background $bz-blue
    height 1em
    vertical-align bottom

// Icons
//----------------------------

[class^="bzpro-icon-"], [class^="bzpro-widgeticon-"]
  width auto
  height auto
  line-height normal
  vertical-align baseline
  background-image none
  background-position 0% 0%
  background-repeat repeat
  margin-top: 0
  &:before
    font-weight normal
    speak none
    font-variant normal
    text-transform none
    display inline-block

// bzpro-icons
//----------------------------
// add             \e800
// close           \e801
// minimize        \e802
// maximize        \e803
// bookmark        \e804
// search          \e805
// options         \e806
// next            \e807
// dropdown        \e808
// check           \e809
// candlestick     \e810
// line            \e811
// calendar        \e812 (also used for widget icon)
// text-small      \e813
// text-large      \e814
// spacing-small   \e815
// spacing-large   \e816
// squawk          \e817
// watchlist       \e818 (for widget icon)
// newsfeed        \e819 (for widget icon)
// security        \e820 (for widget icon)
// alert (bell)    \e821
// log-out         \e822
// info (tooltip)  \e823
// popout          \e830
// help            \e831
// settings        \e832
// theme           \e833
// trash           \e834
// edit            \e835
// user            \e836
// sm search       \e837



// Social
// ---------------------------
// facebook        \e824
// twitter         \e825
// google-plus     \e826
// linkedin        \e827
// instagram       \e828
// rss             \e829

[class^="bzpro-icon-"]
  display inline
  &:before
    font-family "bzpro-icons"

.bzpro-icon
  &-add:before
    content '\e800'
  &-close:before
    content '\e801'
  &-minimize:before
    content '\e802'
  &-maximize:before
    content '\e803'
  &-bookmark:before
    content '\e804'
  &-search:before
    content '\e805'
  &-options:before
    content '\e806'
  &-next:before
    content '\e807'
  &-previous:before
    content '\e807'
    transform rotate(180deg)
    transform-origin center 9.5px
  &-dropdown:before
    content '\e808'
  &-dropup:before
    content '\e808'
    transform rotate(180deg)
  &-check:before
    content '\e809'
  &-candlestick:before
    content '\e810'
  &-line:before
    content '\e811'
  &-calendar:before
    content '\e812'
  &-fontsmall:before
    content '\e813'
  &-fontlarge:before
    content '\e814'
  &-spacingsmall:before
    content '\e815'
  &-spacinglarge:before
    content '\e816'
  &-squawk:before
    content '\e817'
  &-watchlist:before
    content '\e818'
  &-newsfeed:before
    content '\e819'
  &-security:before
    content '\e820'
  &-alert:before
    content '\e821'
  &-logout:before
    content '\e822'
  &-info:before
    content '\e823'
  &-facebook:before
    content '\e824'
  &-twitter:before
    content '\e825'
  &-googleplus:before
    content '\e826'
  &-linkedin:before
    content '\e827'
  &-instagram:before
    content '\e828'
  &-rss:before
    content '\e829'
  &-popout:before
    content '\e830'
  &-help:before
    content '\e831'
  &-settings:before
    content '\e832'
  &-theme:before
    content '\e833'
  &-trash:before
    content '\e834'
  &-edit:before
    content '\e835'
  &-user:before
    content '\e836'
  &-search-sm:before
    content '\e837'


// bzpro-widget-icons
//----------------------------
// watchlist              \e818
// security               \e820
// newsfeed               \e819

[class^="bzpro-widgeticon-"]
  display block
  margin-bottom .25em
  font-size 2em
  &:before
    font-family "bzpro-icons"

.bzpro-widgeticon
  &-calendar:before
    content '\e812'
  &-watchlist:before
    content '\e818'
  &-security:before
    content '\e820'
  &-newsfeed:before
    content '\e819'

// intercom-icon
//----------------------------
// #intercom-container .intercom-launcher
//   top 570px
//   left 7px


#intercom-launcher
  simpleTransition(opacity)
  opacity .5

#intercom-launcher:hover
  opacity 1