@import ~mweb/common/components/variables

.chat-pane-height
  height: calc(100vh - (9 * 100vw / 16) - #{$mw-top-nav-height} - #{$mw-info-box-height})

  @media only screen and (orientation: landscape)
    height: calc(100vh - #{$mw-top-nav-height} - #{$mw-info-box-height})

  @media only screen and (orientation: landscape) and (max-device-width: 767px)
    height: calc(100vh - #{$mw-info-box-height})

.chat-pane
  @extend .chat-pane-height
  position: relative

.chat-pane.chat-pane--embed
  height: 100vh
  width: 100vw

.chat-pane__chat-list
  overflow-y: auto
  overflow-x: hidden
  height: 100%
  padding-bottom: 10px

.chat-pane__more-messages
  position: absolute
  bottom: 0
  width: 100%
  color: rgb(255, 255, 255)
  background-color: rgba(0, 0, 0, 0.701961)
  height: 44px
  display: flex
  justify-content: center
  align-items: center
  cursor: pointer
