@import ~mweb/common/components/base
@import ~mweb/common/components/variables

.info-box
  background: black
  color: white
  display: flex
  align-items: center
  padding: 12px 10px
  height: $mw-info-box-height

  .info-box--playing-info
    padding-top: 0

  .info-box--logo-container
    width: 42px

    img
      width: 100%

  .info-box--metadata
    flex: 1
    padding-left: 10px
    overflow-x: hidden

    h2
      font-size: 18px
      font-weight: normal
      line-height: 2rem
      overflow-x: hidden
      white-space: nowrap
      text-overflow: ellipsis

    p
      color: rgba($white, 0.7)
      font-size: 13px
      line-height: 1.5

    a
      color: $twitch-purple-9
