.unread-conversations
  height 236px

.unread-conversations-header
  overflow hidden

.unread-conversation-panel
  height 135px
  width 130px
  border-radius 5px
  background-color #FFFFFF

  &.compact
    width 120px

.unread-conversation-with-badge
  display flex
  justify-content space-between
  align-items center

  .badge
    height 36px
    min-width 36px
    text-align center
    border-radius 18px
    font-size 21px
    color #FFFFFF
    font-weight 500
    line-height 32px
    border 2px solid white
    margin-bottom 5px

.unread-conversation-slider-panel
  margin-right 5px
  width 130px

  &.compact
    width 120px

.slick-arrow
  &:before
    content none

  &.slick-disabled
    visibility hidden

.unread-conversation-slider
  .slick-arrow
    position absolute
    z-index 20
    width 35px
    height 39px
    display none
    top 40%

    svg
      display none
      margin-left 14px
      margin-top 12px

  &:hover
    .slick-arrow
      display block
      color #0176FF
      background-color #FFFFFF
      border 1px solid #B5D2E1
      border-radius 2px
      opacity .95
      box-shadow 0 2px 4px rgba(0, 0, 0, .2)

      svg
        display block

      &:hover
        background-color #E1F6FF

.slick-prev
  left 0

.slick-next
  right 0

.unread-enter
  height 0
  opacity 0.01

  &.unread-enter-active
    height 236px
    opacity 1
    transition all 400ms ease-in-out

.unread-leave
  height 236px
  opacity 1

  &.unread-leave-active
    height 0
    opacity 0.01
    transition all 400ms ease-in-out