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

// Twitch Everywhere For Mobile Web Chat
// =========================================================================================
// This file tweaks some of the mobile web chat styles for our Twitch Everywhere product.
// None of these overwrites apply to the default mobile web chat, or default mobile web chat embed.
//
// `te-embed-mw` adds Twitch Everywhere-specific styling to Chat
// `te-embed-mw---f*` classes, based on query params, will overwrite font-size & line height
// `theme--dark` will apply a dark theme based on current chat dark theme
// ==========================================================================================

.chat-embed-spinner
  @extend .mw-sk-spinner
  height: 100vh

.te-embed-mw
  .chat-message,
  .chat-moderation,
  .chat-status,
  .chat-subscribe
    padding: 5px 10px

  &.theme--dark
    background: $twitch-purple-2
    color: $hinted-grey-8

    .chat-status
      color: $hinted-grey-7

    .chat-message--deleted,
    .chat-subscribe__prime,
    a
      color: $twitch-purple-10

    .chat-subscribe,
    .chat-subscribe__message
      color: $hinted-grey-7
      background: $twitch-purple-3

  &.te-embed-mw--fmedium
    font-size: $font-size-5
    line-height: 22px

  &.te-embed-mw--flarge
    font-size: $font-size-4
    line-height: 24px
