#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);
  }

  .chat-msg__text {
    // spoiler content more visible.
    &.spoiler {
      color: var(--peertube-grey-foreground) !important;
      background-color: var(--peertube-grey-background) !important;
    }

    // underline links in chat messages
    a[href] {
      text-decoration: underline;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .correcting {
    // Fix color/background-color for correcting messages and textareas
    color: var(--peertube-grey-foreground) !important;
    background-color: var(--peertube-grey-background) !important;
  }

  .message.chat-msg .chat-msg__actions {
    // Fixing message actions colors
    .dropdown-menu {
      --text-color-lighten-15-percent: #8c8c8c; // default ConverseJS theme color

      background-color: #fff; // this is the default bootstrap color, used by ConverseJS

      i,
      button {
        color: #212529; // default bootstrap color for dropdown-items
      }
    }
  }

  // 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%;
          }
        }
      }
    }
  }
}