@import url('// fonts.googleapis.com/css?family=Roboto')
.drift-outbound-header
  background-color #157AFB
  background-image -webkit-linear-gradient(top, #157AFB, #1164D1)
  display flex
  flex-direction column
  align-items center

  .logo
    padding-top 20px

  img
    width 40px
    height 40px

  h3
    text-align center
    margin 0 auto
    padding 10px 0
    width 100%
    font-size 28px
    font-weight 300
    font-family var(--main-font-family), 'Roboto', Helvetica, sans-serif
    color #FFFFFF

.drift-outbound-header-text
  font-family 'Proxima Nova', 'Roboto', Helvetica, sans-serif
  font-size 16px
  font-weight 500
  margin 0 auto
  display inherit
  padding 0 20px
  text-align center
  color #394F5A

.popup-header
  display inline-flex
  width 100%
  padding 20px 25px 10px
  color white

  a
    text-decoration none
    cursor pointer

  svg
    fill currentColor
    cursor pointer
    opacity 0.4

    &:hover
      opacity 1

.popup-header a:hover
.popup-header a:active
  text-decoration underline
  cursor pointer

.popup-header-user-info
  display flex
  align-items center
  font-weight 500

.popup-header-avatar
  width 25px
  height 25px
  margin-right 10px
  border-radius 14px
  border 2px solid rgba(255, 255, 255, .8)

.search-container
  background red
  display inline-flex
  margin-left auto
  transition all 0.5s ease

  &.expanded
    padding-left 0
    width 100%

.drift-header-logo
  position absolute
  left 25px
  line-height 24px
  text-align center
  transition width 400ms cubic-bezier(0.0, 0.0, 0.2, 1), opacity 400ms cubic-bezier(0.0, 0.0, 0.2, 1) 400ms
  outline none
  pointer-events none

  &.hide
    transition opacity 400ms cubic-bezier(0.0, 0.0, 0.2, 1), width 400ms cubic-bezier(0.0, 0.0, 0.2, 1)
    opacity 0
    width 0
    pointer-events none

  img
    padding-top 8px
    width 101px

.header-options
  width 25px
  margin-top 6px
  transition all 100ms ease-in
  position relative

  &.two-icons
    width 72px

.conversation-notif
  right 40px
  top -1px
  position absolute

  .badge
    font-size 11px
    padding 0 2px
    height 18px
    min-width 18px
    position absolute
    top -5px
    right -6px
    text-align center
    line-height 15px
    text-shadow none
    border-radius 9px

.svg-gear
  right 0
  position absolute

.active
  svg
    opacity 1

.convo-enter
  opacity 0.01
  top 0
  right 0
  bottom 0
  left 0

  &.convo-enter-active
    opacity 1
    transition all 500ms ease-in

.convo-leave
  opacity 1

  &.convo-leave-active
    opacity 0.01
    transition all 300ms ease-in