/* Cosmetic changes */
:root {
  --rcx-input-colors-focus-shadow-color: var(--color-dark-blue);
  --rcx-button-primary-background-color: var(--color-dark-blue);
  --rcx-button-border-width: 2px;
  --rcx-button-primary-color: white;
  
  /* Badge color for PMs */
  --rcx-badge-colors-ghost-background-color: rgba(255,255,255,0.25);

  --rcx-color-announcement-background: white;

  /* New variables */
  --bc-unread-bar-bg-color: hsla(216deg, 92%, 54%, .2);
  --bc-unread-bar-text-color: hsl(216, 100%, 64%);
}

/* Mentions */
.rcx-message__highlight {
 font-weight: 700; 
}

/* Reactions */
.rcx-message-reactions__reaction {
  border-width: var(--rcx-button-border-width) !important;
  transition: border-color 250ms ease-in-out, background-color 250ms ease-in-out;
}

.rcx-message-reactions__reaction--mine {
  background-color: var(--color-dark-blue) !important;
  border-color: var(--color-blue) !important;
}

/* Message username */
.rcx-message-header__username,
.rcx-message-header__name {
    opacity: .9;
}

/* Message time */
.rcx-message-header__time {
	line-height: initial;
  	opacity: .6;
}

/* Emojis */
.rcx-message-body .rcx-message__emoji--big {
  height: 6rem;
  width: 6rem;
  margin-top: 0.25rem;
}

.rcx-message-body .rcx-message__emoji--big.emojione {
  height: 3.5rem;
  width: 3.5rem;
}

/* Blockquote */
.rcx-message-body .rcx-box > blockquote {
  border: none;
  border-left: thick solid;
  border-radius: 0;
  padding-block: 5px;
  padding-inline: 15px;
  margin-bottom: .25rem;
  opacity: .6;
}

/* Small login button in the header. */
.rcx-button--small-square[title="Sign in to start talking"],
.rcx-button-group__item[title="Blenderid"]{
  background-color: var(--color-blue) !important;
  color: white !important;
}

.messages-list .error-background {
  background: none !important;
  border-width: 2px 0 0 !important;
  color: var(--error-color);
  font-weight: 500;
}

.unread-bar {
  background-color: var(--bc-unread-bar-bg-color);
  color: var(--bc-unread-bar-text-color);
}

/* Hide inline-threads, it's confusing. */
.rcx-message.rcx-message-thread {
  /* display: none !important; */
}

/* Reply thread button. */
.rcx-message-metrics__content-wrapper .rcx-button--primary {
  --rcx-button-primary-background-color: var(--color-dark-medium);
  --rcx-button-primary-border-color: var(--color-dark-light);
  --rcx-button-primary-color: var(--color-gray-light);
}

/* MUST HAVE STYLE TWEAKS */
/* Hide sidebar footer, takes too much space. */
[data-qa="page-home"] h3.rcx-box,
[data-qa="page-home"] .rcx-grid__wrapper,
.rcx-sidebar-footer  {
  display: none;
}

.rcx-sidebar-footer {
  display: none !important;
}

/* Attempt to hide login form (so users use Blender ID) */
form.rcx-box.rcx-box--full.rcx-tile--elevation-1.rcx-tile > header + div.rcx-box.rcx-box--full > fieldset[role="group"] {
  display: none;
}

/* Login button under login form. */
form.rcx-box.rcx-box--full.rcx-tile--elevation-1.rcx-tile > header + div.rcx-box.rcx-box--full + footer.rcx-box--full {
  display: none !important;
}

/* Separator between regular login and Blender ID. */
form.rcx-box.rcx-box--full.rcx-tile--elevation-1.rcx-tile > header + div.rcx-box.rcx-box--full + footer.rcx-box--full + div[role="separator"] {
  display: none;
}

/* Separator between regular login and Blender ID. */
form.rcx-box.rcx-box--full.rcx-tile--elevation-1.rcx-tile > header + div.rcx-box.rcx-box--full + footer.rcx-box--full + div[role="separator"] + div[role="group"] > button {
 background: var(--button-primary-background);
  color: var(--button-primary-text-color);
  border-color: var(--button-primary-background);
}

/* Hide welcome text. */
#react-root > div > div > div div + h1,
#react-root > div > div > div div + h1 + p {
  display: none;
}

#react-root > div {
  background-image: none;
}

/**************Code Highlights*****************/
/* from pbaity/rocketchat-dark-mode */

.code-colors {
  border-width: var(--rcx-button-border-width) !important;
}

.rcx-box--with-inline-elements code, 
.code-colors,
.rc-old code.inline {
  background: var(--rcx-color-surface-light) !important;
  color: var(--color-dark-10) !important;
  /* border-color: var(--rcx-color-background-light) !important; */
  border-color: var(--rcx-message-generic-preview-border-color,var(--rcx-color-stroke-extra-light,var(--rcx-color-neutral-250,#ebecef))) !important;
}

.hljs-selector-id,
.hljs-keyword {
  color: var(--color-light-blue) !important;
}

.hljs-title {
  color: var(--color-gray-light) !important;
}

.hljs-literal,
.hljs-number,
.hljs-attr,
.hljs-template-variable,
.hljs-variable {
  color: var(--color-dark-green) !important;
}

.hljs-tag,
.hljs-name {
  color: var(--color-light-blue) !important;
}

.hljs-selector-tag,
.hljs-subst {
  color: var(--color-green) !important;
}

.hljs-doctag,
.hljs-string {
  color: var(--color-red) !important;
}

.hljs-attribute,
.hljs-type,
.hljs-number {
  color: var(--color-orange) !important;
}

.hljs-addition {
  background-color: #1e3a21 !important;
}
.hljs-deletion {
  background-color: #472d2e !important;
}