.Widget
  border-top 5px solid $bz-black
  border-right 5px solid $bz-black
  position relative
  box-sizing border-box
  display inline-block
  height 100%
  flex 1
  vertical-align top
  overflow hidden
  &-content
    height calc(100% \- 26px)
    &--feed
      .feed-container
        height 100%
  &.is-expanded
    position absolute
    z-index 10
    left 0
    top -90px
    right 0
    height calc(100% + 100px) !important
    width 100% !important

.WidgetWindowBar
  padding 0 5px
  font-size 1em
  line-height 26px
  height 26px
  color inherit
  &-label
    text-transform uppercase
    font-weight 400
    color inherit
    left 0
    right 0
    text-align center
    font-size 13px
    position absolute
    pointer-events none
  &-btn
    border 0
    cursor pointer
    float right
    height 26px
    width 26px
    padding 0
    color inherit
    outline 0
    font-size 1.25em
    background-color transparent

.WidgetSearch
  display flex
  line-height 36px
  border-bottom-width 1px
  border-bottom-style solid
  position relative
  .DropdownMenu
    border-left-width 1px
    border-left-style solid
  &-btn
    color inherit
    background 0
    outline 0
    border 0
    border-left-width 1px
    border-left-style solid
    transition color .2s ease, background .2s ease
    &--text
      padding 0 1.25em
      text-transform uppercase
      white-space nowrap
      // --text:hover handled in themes
    &--icon
      width 36px
      font-size 1.25em
      &:hover
        color $bz-white
    &:hover
      cursor pointer
    &--blueHover:hover
      background $bz-blue
    &--redHover:hover
      background $bz-red
  & > span
    flex 1
  &--newsfeed
    line-height 24px
    padding-top 3px
    padding-bottom 3px
    position relative
    z-index 1
    .WidgetSearch-btn--text
      margin -3px 0
      color $bz-blue
    .Search-multi
      padding 0 70px 0 10px
      &:before
        line-height inherit
    .Search-tag
      margin-bottom 0
  .SearchResult:last-child:after
    content ''
    position absolute
    left 0
    right 0
    bottom -100vh
    top 100%

.FlyoutMenu
  display block
  position absolute
  background $bz-black
  z-index 110
  font-size 14px
  top 0
  right 0
  width 100%
  height 100%
  max-width 470px
  box-sizing border-box
  boxShadow()
  padding 20px
  overflow-y auto
  &-close
    icon()
    content '\e806'
    position absolute
    right 0
    top 0
    z-index 111
    padding 10px
    font-size 1.25em
    color $bz-white
    background 0
    border 0
    outline 0
    cursor pointer
  &--active
    display block
  &-display
    clearfix()
    border-bottom 1px solid $bz-grey--dark
    padding 10px 0
    &__label
      float left
      line-height 25px
      color $bz-white
    &__toggle
      float right
      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-white
        background-color $bz-red
      &:after
        content 'ON'
        color $bz-grey
        background-color $bz-grey--dark
      &.active
        &:before
          color $bz-grey
          background-color $bz-grey--dark
        &:after
          color $bz-white
          background-color $bz-blue
  &-name
    width 100%
    height 30px
    background $bz-grey--dark
    color $bz-white
    border 0
    font-size 1em
    padding 0 10px
    box-sizing border-box
    outline 0
  &-title
    color $bz-white
    font-weight 300
    font-size 1.5em
    border-bottom 1px solid $bz-grey--dark
    padding-bottom .5em
    margin-bottom 1em
  &-subtitle
    color $bz-grey
    text-transform uppercase
    margin-bottom .75em
    font-size (12 / 14) * 1em
    font-weight 400
  &-slider
    &:before, &:after
      icon()
      width 45px
      display inline-block
      color $bz-white
      vertical-align middle
    &:after
      text-align right
    &__slider
      display inline-block
      width calc(100% - 92px)
  &-section
    padding 10px
    margin-bottom 1.5em
    box-sizing border-box
    // lame
  .Search
    line-height 30px
    padding 5px 0
    color $bz-white
    &-input
      width calc(100% - 31px)

.slide-in-and-out
  &-enter
    transform translateX(500px)
    &-active
      transition 300ms transform
      transform translateX(0px)
  &-leave
    transform translateX(0px)
    &-active
      transition 300ms transform
      transform translateX(500px)


.WidgetModal
  &-header
    display flex
    justify-content space-between
    margin-bottom 2em
    font-size 14px
    color $bz-grey
    font-weight 300
    i
      cursor pointer
      font-size 1.5em
      simpleTransition(color)
      &:hover
        color $bz-white
  &.is-hidden
    display none
  position absolute
  z-index 9
  top 26px
  left 0
  right 0
  bottom 0
  display flex
  justify-content center
  align-items center
  &-box
    box-sizing border-box
    width 80%
    max-width 650px
    min-width 400px
    padding 2em
    margin-bottom 10vh
    boxShadow()
  &-title
    font-size 1.5em
    font-weight 300
    margin-bottom 1em
  &-label
    font-size .75em
    text-transform uppercase
    color $bz-grey
    display inline-block
    margin-bottom .75em
  &-radio + &-radio
    margin-bottom 1.5em
  &-radio
    position relative
    margin-bottom .75em
    line-height 1.75em
    input[type="radio"]
      display none
      & + label
        margin-left 2.25em
        cursor pointer
        font-weight 300
        strong
          text-transform uppercase
          font-weight 600
          margin-right .25em
        &:before
          simpleTransition(box-shadow)
          content ''
          position absolute
          top 0
          left 0
          width 1.5em
          height 1.5em
          border-radius 50%
          border-width 1px
          border-style solid

  &-input
    position relative
    background transparent
    color inherit
    width 100%
    border-width 1px
    border-style solid
    margin-bottom 1.25em
    box-sizing border-box
    min-height 39px
    font-size 1em
    outline 0
    &--text
      padding 0 1em
  &-name
    padding 10px
    height 35px
    outline 0
  &-proceed
    margin-top 2em
    text-align right
  &-create
    outline 0
    border 0
    cursor pointer
    color $bz-white
    background $bz-blue
    font-size 1em
    text-transform uppercase
    padding 10px 20px

  .TabbedContent
    &-tabs
      display flex
      flex-wrap wrap
      flex-direction row
    .Tab
      flex 1
      background 0
      outline 0
      border 0
      margin 0
      white-space nowrap
      font-size 16px
      font-weight 300
      padding .5em 0
      color $bz-grey--lighter
      text-transform uppercase
      cursor pointer
      border-bottom 1px solid $bz-grey--dark
      transition border .2s ease
      &:hover
        border-color $bz-grey--light
      &.is-selected
        border-color $bz-blue !important
        color $bz-white
      & + button
        margin-left 1em