/* PREVIEW SERVER */

// WELCOME MODAL
%previewServerOptionContainer {
  background-color: $main-color;
  &:hover {
    background-color: $hover-color;
  }
  %previewServerChannelOptionArrow {
    color: #fff;
  }
  span {
    color: #fff;
  }
}
%previewServerChannelIcon,
%previewServerChannelTitleIcon {
  color: #fff;
}
%previewServerNotice {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
}

%previewServerContainer {
  background-color: rgba(0, 0, 0, 0.8);
}

// TOP BAR JOIN AND BACK BUTTON
%previewServerBackButton:hover {
  background-color: $hover-color;
}

// WELCOME TO SERVER CARDS
%serverWelcomeCards {
  background-color: cv('bg.general.card');
}
%serverInviteTick {
  background-color: $main-color;
}

// SERVER STATUS (E.G. PUBLIC OR PRIVATE)
%previewServerStatus {
  background: rgba(0, 0, 0, 0.6);
}

// Nyx's fixes
%previewServerHomeContainer,
%previewServerHomeContainerInner {
  background: transparent;
}
%previewServerHomeIcon {
  border: 4px solid transparent;
}
%previewServerHomeInteractiveCard {
  &%previewServerHomeInteractiveCardSelected {
    border: 1px solid $main-color;
  }
  &:hover {
    border: 1px solid $hover-color;
  }
  &:active {
    border: 1px solid $hover-color;
  }
}
%previewServerHomeCard {
  background: cv('bg.general.card');
}
%previewServerIconContainer {
  background: $main-color;
  color: #fff;
}
%previewServerConversation:hover {
  background: $hover-color;
}
%previewServerConversationRoot:after,
%previewServerConversationReply {
  border-left: 2px solid $main-color;
}
%previewServerConversationMessage:after {
  border-left: 2px solid $main-color;
  border-bottom: 2px solid $main-color;
}
