/* USER SETTINGS */

// MY ACCOUNT
%userSettingsAccountProfileCard {
  background-color: cv('bg.general.card');
}
%userSettingsAccountProfileBackground,
%userSettingsAccountProfileFields {
  background-color: transparent;
}
%userSettingsAccountProfileAvatar {
  background: transparent;
}
%userSettingsAccountBadgeList {
  background-color: cv('bg.general.card');
}
// MY ACCOUNT - VERIFY PHONE
%phoneInput {
  background-color: hsla(0, 0%, 100%, 0.07);
  border: none;
  box-shadow: 0 0 0 2px hsla(0, 0%, 100%, 0.09);
  &:focus-within {
    box-shadow: 0 0 2px 2px $main-color;
  }
  %phoneInputField {
    background-color: transparent;
  }
}
%phoneInputCountryCodePopout {
  background-color: cv('bg.general.popout');
}

// USER PROFILE
%avatarOptionBox {
  background-color: transparent;
}
%avatarOptionCircle {
  background-color: $main-color;
  border: 2px solid $main-color;
}
%avatarUploadIcon {
  padding: 0;
}
%avatarGifIconContainer {
  background-color: hsla(0, 0%, 0%, 0.8);
}
%avatarGifIcon {
  background-color: transparent;
  color: #fff;
}
%avatarEditingContainer {
  background-color: transparent;
}

// USER PROFILE - AVATAR DECO
%avatarDecoItem {
  background-color: hsla(0, 0%, 100%, 0.05);
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.07);
  }
  &%avatarDecoItemSelected {
    box-shadow: inset 0 0 0 2px $main-color;
  }
}
%avatarDecoItemLock {
  background-color: $main-color !important;
}
%avatarDecoPreview,
%avatarDecoPreviewSmall {
  background-color: hsla(0, 0%, 100%, 0.05);
}
%avatarDecoPreviewUpsell {
  background: transparent;
  border: 2px solid var(--premium-tier-2-purple-for-gradients-2);
}

// USER PROFILE - PROFILE EFFECT
%profileEffectItem {
  background-color: hsla(0, 0%, 100%, 0.05);
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.07);
  }
  &%profileEffectItemSelected {
    box-shadow: inset 0 0 0 2px $main-color;
  }
}
%profileEffectDescription,
%profileEffectDescriptionUpsell,
%profileEffectDescriptionContainer {
  background: transparent;
}
%profileEffectDescriptionUpsell {
  border: 2px solid var(--premium-tier-2-purple-for-gradients-2);
}
%profileEffectItemLock {
  background-color: $main-color !important;
}

// USER PROFILE - SERVER PROFILES UPSELL
%userSettingsProfilePremiumBorder {
  background: cv('bg.general.card');
  border: 2px solid var(--premium-tier-2-purple-for-gradients-2);
}
%userSettingsProfilePremiumBackground {
  background: transparent;
}
%userSettingsProfileUpsellContainer {
  background: cv('bg.general.card');
}

// PRIVACY AND SAFETY 

// FAMILY CENTER
%userSettingsFamilyContainers,
%userSettingsFamilyBox {
  background-color: cv('bg.general.card');
}
%userSettingsFamilyCircle,
%userSettingsFamilyIconContainer {
  background-color: transparent;
}
// what are connected parents able to see?
%userSettingsFamilyRow {
  background-color: hsla(0, 0%, 100%, 0.07);
}

// AUTHORIZED APPS
// removed, covered by %settingsCard theming

// DEVICES
%userSettingsDevicesIcon {
  background-color: $main-color;
  color: #fff;
}

// CONNECTIONS
%userSettingsConnectionsContainer {
  background-color: cv('bg.general.card');
  border-color: hsla(0, 0%, 100%, 0.07);
}
%userSettingsConnectionsButtonInner {
  background-color: hsla(0, 0%, 100%, 0.05);
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.07);
  }
}
%subEnabledServers {
  background: rgba(0, 0, 0, 0.6);
}

// BILLING
%userSettingsBillingIndicator {
  background-color: $main-color;
}
%userSettingsBillingMethodText {
  color: var(--text-normal);
}
%userSettingsBillingPaymentPane {
  background-color: cv('bg.general.card');
}
%userSettingsBillingPayment,
%userSettingsBillingPaginator {
  background-color: transparent;
}
%themeDark {
  %userSettingsBillingBottomDivider {
    border-color: hsla(0, 0%, 100%, 0.07);
  }
  %userSettingsBillingHoverablePayment {
    &:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}
%userSettingsBillingExpandedInfo {
  background-color: transparent;
  box-shadow: 0 0 2px 2px $main-color;
}

// NITRO
%userSettingsNitroPerkCard {
  background-color: cv('bg.general.card');
}
%userSettingsNitroGiftCard {
  background: cv('bg.general.card');
}
%userSettingsNitroShareCard {
  background: cv('bg.general.card');
  backdrop-filter: none;
}

// SUBSCRIPTIONS
%themeDark {
  :is(%userSettingsSubsNoItemsIcons) {
    background-color: transparent;
  }
}
%userSettingsSubsPayDetailsBlock {
  background-color: cv('bg.general.card');
}
%userSettingsSubsAccountCredit {
  background-color: cv('bg.general.card');
}

// GIFT INVENTORY
%giftPromotionCard {
  background-color: cv('bg.general.card');
}
%copyGiftCode {
  background-color: hsla(0, 0%, 100%, 0.07);
}
%themeDark %giftQuestContainer {
  background-color: cv('bg.general.card');
}
%giftQuestProgress {
  color: $main-color !important;
}

// SERVER BOOST
%userSettingsBoostHeaderWave {
  fill: rgba(0, 0, 0, 0.6);
}
%userSettingsBoostApplied {
  background-color: transparent;
}
%userSettingsBoostGuildContainer,
%userSettingsBoostContainer,
%userSettingsBoostGuildSearchWrapper,
%userSettingsBoostRecognitionCard,
%userSettingsBoostFAQ {
  background-color: cv('bg.general.card');
}
%userSettingsBoostTransferSelect:hover {
  background-color: rgba(255, 255, 255, 0.07);
}
%userSettingsBoostTransferButton {
  background-color: $main-color;
}
%freeBoost {
  background-color: cv('bg.general.card');
}
.content_c258fa:after,
.content_c258fa:before {
  border-color: transparent;
}

// APPEARANCE
%userSettingsAppearanceSelectionCircle {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  box-shadow: inset 0 0 0 2px $main-color;
  top: -1px;
  left: -1px;
}
%userSettingsAppearanceCheckmart {
  color: $main-color;
}

// ACCESSIBILITY
%userSettingsAccessibilityMsgPreview {
  background-color: transparent;
}

// VOICE
%themeDark {
  %userSettingsMicTest {
    %userSettingsMicTestContainer {
      background: $main-color !important;
      mask-image: url(https://clearvision.github.io/icons/pill.svg);
    }
    %userSettingsMicTestProgress {
      background-color: hsla(0, 0%, 0%, 0.7);
    }
    %userSettingsMicTestNotches {
      rect {
        fill: none;
      }
    }
  }
  %userSettingsVoiceSensitivity {
    background-color: hsla(0, 0%, 100%, 0.2);
    &%userSettingsVoiceSensitivitySpeaking {
      background-color: $main-color;
    }
  }
}

%userSettingsEntranceSoundButton {
  background-color: hsla(0, 0%, 100%, 0.1);
}

// VIDEO
%userSettingsVideoCameraWrapper {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: hsla(0, 0%, 100%, 0.07);
}
%userSettingsVideoBgOption {
  background-color: rgba(0, 0, 0, 0.7);
}
%userSettingsVideoBgOptionRing {
  border: 2px solid $main-color;
}
%userSettingsVideoBgOptionInner {
  background-color: transparent;
}

// GAME OVERLAY
%themeDark {
  %userSettingsOverlayNowPlaying {
    background-color: rgba($color: #43b581, $alpha: 0.6);
  }
}
%userSettingsOverlayWrapper {
  border-color: $main-color;
}
%userSettingsOverlayOption {
  background-color: hsla(0, 0%, 100%, 0.05);
  opacity: 1;
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.07);
    opacity: 1;
  }
  &%userSettingsOverlaySelected {
    background-color: $main-color;
    border-color: $main-color;
  }
}

// KEYBINDS
%themeDark {
  %userSettingsKeybindContainer {
    background-color: hsla(0, 0%, 100%, 0.05);
    box-shadow: 0 0 0 2px hsla(0, 0%, 100%, 0.07);
    border-color: transparent;
    &:not(%userSettingsKeybindDisabled):hover {
      border-color: transparent;
      box-shadow: 0 0 2px 2px $main-color;
    }
    &%userSettingsKeybindRecording {
      color: #fff;
      box-shadow: 0 0 2px 2px $main-color;
      animation: cv-shadow-pulse 1s ease-in infinite;
    }
  }
}

// ACTIVITY STATUS
%themeDark {
  %userSettingsActivityNotDetected {
    background-color: cv('bg.general.card');
    border: hsla(0, 0%, 100%, 0.07);
  }
  %userSettingsActivityAddGame {
    background-color: hsla(0, 0%, 0%, 0.7);
  }
  %userSettingsActivityGame {
    box-shadow: 0 1px 0 0 hsla(0, 0%, 100%, 0.04);
  }
  %userSettingsActivityGameNameInput {
    &:hover,
    &:focus {
      background-color: hsla(0, 0%, 100%, 0.05);
      border: hsla(0, 0%, 100%, 0.07);
    }
  }
}
