/* MODAL */
%themeDark {
  %modal,
  %modalRoot {
    background: cv('bg.general.modal');
    box-shadow: none;
    %modalFooter {
      background: transparent;
      box-shadow: none;
    }
  }
}

// IMAGE MODAL
%imageModalActionButtons {
  background-color: cv('bg.general.modal');
  border: 1px solid $main-color;
}

// MESSAGE DELETION CONFIRMATION
%themeDark %messageDeleteModal {
  background-color: transparent;
  box-shadow: 0 0 2px 2px $main-color;
}

// REPORT MESSAGE
%messageReportOption {
  background-color: $main-color;
  &:hover {
    background-color: $hover-color;
  }
}

// QUICKSWITCHER
%quickswitcher {
  background-color: cv('bg.general.modal');
}
%quickswitcherInput {
  background-color: rgba(255, 255, 255, 0.07);
}
%quickswitcherScroller {
  background-color: transparent;
  margin-top: 10px;
  &::-webkit-scrollbar-track {
    background-color: transparent !important;
  }
}
%quickswitcherResult[aria-selected='true'] {
  background: var(--background-modifier-hover);
}
%quickswitcherPing {
  background: $main-color;
}

// TIMEOUT
/*timeout duration item*/
%timeoutModalItem%timeoutModalSelected {
  background: $main-color;
  border-color: $main-color;
}
%timeoutModalItem:not(%timeoutModalSelected) {
  background: cv('bg.general.card');
  border-color: $main-color;
}

// BAN MODAL
%banReasonOther {
  background-color: cv('bg.general.modal');
  border: 2px solid transparent;
  transition: all 0.15s ease-in-out;
  color: #fff;
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.07);
    color: #fff;
    border: 2px solid $hover-color;
  }
}

// SWITCH ACCOUNTS
%themeDark %modalRoot {
  %loginAuthBox,
  %addAccountFooter {
    background-color: transparent;
  }
}

// ACTIVITIES
%activityModalHeader,
%activityModalDivider {
  background: cv('bg.general.card');
}
%activityTag {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5));
}
%activityItem {
  background: cv('bg.general.card');
  border: 2px solid $main-color;
  &:hover {
    background: cv('bg.general.card');
    border: 2px solid $hover-color;
  }
  &%activityItemDisabled {
    background: cv('bg.general.card');
  }
}
%activitiesScroller {
  background: transparent;
}

// INVITE BOT
%botInviteModalContent {
  background-color: hsla(0, 0%, 100%, 0.05);
}

// AUTH MODAL
%authModal {
  background-color: transparent;
  border-radius: 5px;
  &%authModalInApp {
    background-color: transparent;
  }
}
%authModalScopeTimes {
  background-color: hsla(0, 0%, 100%, 0.15);
}
%authModalFooter {
  background-color: transparent;
}


// YOU MUST COMPLETE A FEW MORE STEPS BEFORE YOU CAN TALK
/*before you talk here popup*/
%beforeTalkRuleContainer {
  background: transparent;
}
/*border color for terms of acceptance*/
%beforeTalkRule {
  border-color: $main-color;
}
/*agree to rules*/
%beforeTalkRulesBackground {
  background: var(--background-overlay);
  border-color: $main-color;
  &:hover:not(:focus) {
    border-color: $hover-color;
    background: var(--background-overlay);
  }
}

// Webhook previews
%webhookFooter {
  background-color: transparent;
}
%themeDark %webhookPopout {
  background-color: rgba(0, 0, 0, 0.8);
}
%webhookEmojiRow {
  background-color: $main-color;
  color: $text-normal !important;
}
%webhookBackground:after {
  background: var(--background-overlay);
}

// INVITE FROM WEB BROWSER
%themeDark %webInviteModalContentWrapper {
  background: cv('bg.general.modal');
}
%webInviteModalOnline {
  background-color: cv('colors.online');
}
%webInviteModalTotal {
  background-color: cv('colors.offline');
}