/* MESSAGES POPOUT AKA. INBOX */

/* MESSAGES POPOUT */
%messagesPopoutWrap,
%recentMentionsPopout {
  background-color: cv('bg.general.popout');
  animation: cv-menu-fold-y 0.2s cubic-bezier(0.2, 0.6, 0.5, 1.1);
  transform-origin: 50% 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
%messagesPopoutHeader,
%messagesPopoutFooter {
  background-color: transparent;
}

// TAB BAR
%themeDark %messagesPopoutHeader %messagesPopoutTabBar %messagesPopoutTab {
  color: #fff;
  &%messagesPopoutTabActive {
    background-color: $main-color;
  }
  &:hover:not(%messagesPopoutTabActive) {
    background-color: hsla(0, 0%, 100%, 0.06);
    color: #fff;
  }
}

// CHANNEL HEADER
%messagesPopoutChannelHeader {
  background: hsla(0, 0%, 0%, 0.8);
  padding-right: 10px;
  padding-left: 20px;
}
%messagesPopoutChannelHeaderIcon {
  background-color: transparent;
}

// PINNED MESSAGES
%pinnedMessageGroupWrapper {
  margin: 0;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px hsla(0, 0%, 100%, 0.04);
  border-radius: 0;
  transition: all 0.15s ease-in-out;
  &:last-child {
    border-bottom: none;
  }
  + %pinnedMessageGroupWrapper {
    margin-top: -1px;
  }
}
%pinnedJumpButton {
  background-color: $main-color;
  color: #fff;
  &:hover {
    background-color: $hover-color;
    color: #fff;
  }
}

// RECENT MENTIONS MESSAGES
%recentMentionsContainer {
  margin: 0;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px hsla(0, 0%, 100%, 0.08);
  border-radius: 0;
}
%recentMentionsMessagesContainer {
  background: transparent;
  padding-right: 10px;
  padding-left: 20px;
}
%recentMentionsJumpButton {
  background-color: $main-color;
  %recentMentionsJumpButtonText {
    color: #fff;
  }
  &:hover {
    background-color: $hover-color;
    %recentMentionsJumpButtonText {
      color: #fff;
    }
  }
}
%recentMentionsIcon {
  background-color: $main-color;
  color: #fff;
}

// UNREAD MESSAGES
%unreadTutorial {
  background: transparent;
  border-bottom: solid 1px hsla(0, 0%, 100%, 0.08);
}
%unreadTutorialIcon {
  background-color: $main-color;
  color: #fff;
}
%unreadChannel {
  margin: 0;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px hsla(0, 0%, 100%, 0.08);
  border-radius: 0;
}
%unreadMessages {
  background: transparent;
  padding-right: 10px;
  padding-left: 20px;
}
%unreadCollapseButton {
  padding-left: 9px;
}

// FOR YOU
%forYouContainer {
  background: transparent;
}

// FRIENDS BUTTON
%friendRequestsButton {
  background: $main-color;
  color: #fff;
  &:hover {
    background: $hover-color;
  }
}

// FORUM POST
%messagesPopoutThread {
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid $main-color;
  &:hover {
    border: 2px solid $hover-color;
  }
}

// INBOX UNREAD PILL
%inboxPopoutPill {
  background-color: $main-color;
}

// CHATTING ABOUT: TOPIC
%inboxChattingAbout {
  background-color: hsla(0, 0%, 30%, calc($bg-shading * 0.5));
}
