#conversejs.theme-peertube {
  .chatbox {
    converse-chat-toolbar {
      color: var(--peertube-main-foreground);
      background-color: var(--peertube-main-background);
    }
  }

  .modal-content {
    background-color: var(--peertube-main-background);

    .close {
      color: var(--peertube-main-foreground);
    }
  }

  .button-cancel,
  .btn-secondary,
  .badge-secondary {
    color: var(--peertube-grey-foreground);
    background-color: var(--peertube-grey-background);
  }

  form {
    &.converse-form {
      background-color: var(--peertube-main-background);
    }
  }

  .chatroom .box-flyout .chatroom-body .chatroom-form-container {
    background-color: var(--peertube-main-background);
  }

  .list-group-item {
    color: var(--peertube-main-foreground);
    background-color: var(--peertube-main-background);
  }

  // hidding avatars when screen width is not big enough.
  @media screen and (max-width: 576px) {
    .message {
      &.chat-msg {
        .chat-msg__content {
          margin-left: 0.5em;
          width: 100%;
        }

        &.chat-msg--followup {
          &.chat-msg--with-avatar .chat-msg__content {
            margin-left: 0.5em;
          }
        }

        .chat-msg__avatar {
          display: none;
        }

        .chat-msg__body {
          margin-left: 1em;
        }
      }
    }
  }

  // Bigger occupants sidebar when width is not big enough.
  @media screen and (max-width: 576px) {
    .chatroom {
      .box-flyout {
        .chatroom-body {
          .occupants {
            min-width: 50%;
          }
        }
      }
    }
  }
}