/* MESSAGES POPOUT AKA. INBOX */

/* MESSAGES POPOUT */
%messagesPopoutWrap,
%recentMentionsPopout {
  background-color: hsla(0, 0%, 0%, 0.8);
  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;
}

// 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: var(--main-color);
  color: #fff;
  &:hover {
    background-color: var(--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: var(--main-color);
  %recentMentionsJumpButtonText {
    color: #fff;
  }
  &:hover {
    background-color: var(--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: var(--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;
  &:hover {
    background: $hover-color;
  }
  > svg {
    fill: #fff;
  }
}

// Inbox header bar
%topPill {
  %topPillItemThemed {
    background-color: transparent;
    color: hsla(0, 0%, 100%, 0.5);
    transition: all 0.3s ease-in-out;
    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
      color: hsla(0, 0%, 100%, 0.7);
    }
    &%topPillItemSelected {
      &%topPillItem {
        background-color: $main-color;
        color: #fff;
      }
    }
  }
}