main
  height 100vh
  overflow-y hidden

.Workspace
  box-sizing border-box
  border-left 5px solid $bz-black
  display none
  flex-wrap wrap
  flex-direction row
  height calc(100% \- 39px) // DO NOT CHANGE
  width calc(100% - 60px)
  float right
  font-size 14px
  position relative
  background $bz-black
  &--active
    display flex
  &-column
    flex-direction column
    .Widget
      width 50%
      height 50%
      // Fixes for IE
      min-height 50%
      // Fix for Safari
      flex-basis auto
  &-W3 .Widget:nth-child(3)
    height 100%

  &-empty
    text-align center
    width 100%
    height 100%
    padding 0 2.5%
    box-sizing border-box
    display flex
    justify-content center
    align-items center
    &__title
      color white
      font-size 1.75em
      margin -4em 0px 4em
      font-weight 300
      line-height 1.5
    &__addwidgets
      width 100%
      max-width 1024px
    &__quickadd
      width calc((100% / 4) - 5%)
      background $bz-grey--darker
      color $bz-white
      border 0
      font-size 1.25em
      padding 1.75em 0
      cursor pointer
      simpleTransition(background)
      &:hover
        background $bz-blue
      &:not(:last-child)
        margin-right 2.5%

.appbar
  font-size 16px
  color $bz-white
  font-size 1em
  position relative
  height 55px
  line-height 55px
  background-color $bz-black
  &__tool
    float right
    position relative
    top 50%
    transform translateY(-50%)
    padding 0 20px
    cursor pointer
    margin-right 20px
    color $bz-white
    background $bz-grey--darker
    height 30px
    line-height 30px
    simpleTransition(background)
    border 0
    outline 0
    &:hover
      background $bz-grey--dark
    // &__icon
    &__text
      color $bz-white
      whitespace nowrap
  &__squawk
    i
      cursor pointer
      height 30px
      font-size 2em
      top 50%
      transform translateY(-45%)
  &__logo
    // backgroundFallback(url('../images/bzpro-logo.png'), url('../images/bzpro-logo.svg'))
    width 167px
    height 30px
    float left
    margin 11px 15px
  &__separator
    height 30px
    float right
    position relative
    top 50%
    transform translateY(-50%)
    margin-right 20px
    border-left 1px solid $bz-grey--darker
  &-user
    float right
    color $bz-grey
    cursor pointer
    height 30px
    position relative
    z-index 4
    top 50%
    transform translateY(-50%)
    padding-right 35px
    &:after
      text-transform uppercase
      font-size .9375em
      content attr(data-abbrevname)
      position absolute
      top 0
      line-height 2em
      width calc(100% - 35px)
      text-align center
    &__name
      color $bz-grey--dark
    &__img
      background $bz-grey--darker
      border-radius 50%
      transition border-radius .2s ease, width .2s ease
      width 30px
      height 30px
      line-height 30px
      font-size .85em
      text-align center
      &:before
        icon()
        position absolute
        right 15px
        content '\e808'
        font-size 1.15em
      // &:after
      //   content ''
      //   position absolute
      //   bottom -2px
      //   right 34px
      //   width 10px
      //   height 10px
      //   border-radius 50%
      //   background $bz-green
      //   border 2px solid $bz-black
    &__dropdown
      display none
      background white
      position absolute
      list-style none
      width 200px
      right 10px
      top calc(100% + 12px)
      padding 0 10px
      z-index 1
      boxShadow()
      &:before
        content ''
        position absolute
        width 200px
        padding 21px 10px
        right 0
        bottom 100%
      &:after
        content ''
        position absolute
        bottom 100%
        right 30px
        border-left 10px solid transparent
        border-right 10px solid transparent
        border-bottom 10px solid $bz-white
    &__item
      width 100px
      padding 20px 0
      line-height 1.5em
      text-align center
      display inline-block
      color $bz-grey
      font-size 0.9em
      simpleTransition(color)
      &--full
        width 100%
        padding 0
        line-height 3.7em
        border-top 1px solid $bz-grey--light
        a
          color $bz-grey
          text-decoration none
          simpleTransition(color)
      &:hover, &:hover a
        color $bz-grey--dark
    &:hover
      &:after
        text-transform initial
        content attr(data-username)
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        padding 0 1em
        box-sizing border-box
      .appbar-user__dropdown
        display block
      .appbar-user__img
        border-radius 0
        width 195px

.WorkspaceNav
  position relative
  width calc(100% - 60px)
  float right
  background linear-gradient(15deg, 60% $bz-grey--darker, $bz-grey--dark)
  overflow-y hidden
  white-space nowrap
  height 39px // DO NOT CHANGE: If so, update workspace calculation
  noSelect()
  .ws-tabs
    font-size 1em
    color $bz-white
    overflow-x auto
    border-left 1px solid $bz-black
    &__tab
      padding 8px 20px 23px 20px  // Excess bottom padding to hide scroll bar
      display inline-block
      background-color transparent
      font-weight 300
      cursor pointer
      line-height 23px
      &--active
        background-color $bz-black
        input
          background 0
          border 0
          outline 0
          padding 0
          vertical-align inherit
          color inherit
          font-size inherit
          font-weight inherit
      &:not(:first-child)
        border-left 1px solid $bz-black
      &-close
        border none
        margin-left 15px
        color $bz-white
        background transparent
        padding 0
        cursor pointer
        outline 0
        i
          pointer-events none