/* DISCORD SHOP */
%shopPreview {
  background: rgba(0, 0, 0, 0.6);
}
%popularPicksShopAll {
  background: $main-color;
  &:hover {
    background: $hover-color;
  }
}
%shopAll {
  background-color: transparent;
}
%shopBackground {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
}
%shopPageWrapper {
  background-color: transparent;
}
%shopHeader {
  background-color: transparent !important;
}

// LOADING
%shopLoadingSkeleton {
  background-color: hsla(0, 0%, 100%, 0.07);
}
%shopLoadingBanner,
%shopLoadingCard {
  background-color: cv('bg.general.card');
}
%shopLoadingCardContent {
  background-color: hsla(0, 0%, 100%, 0.07);
}

// CARD
%shopCardNitro,
%shopCard {
  background-color: cv('bg.general.card');
  border-color: $main-color;
  &:hover {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: $hover-color;
  }
}
%shopCardDarkBackgroundNitro,
%shopCardDarkBackground {
  background-color: rgba(0, 0, 0, 0.6);
}

// PREVIEW
%shopPreviewInfo {
  background-color: transparent;
}
%shopChatPreview {
  left: 0;
  bottom: 0;
  margin: 10px auto 0 auto;
}
%shopMockInput {
  background-color: hsla(0, 0%, 100%, 0.07);
}

// SERVER SHOP
/* intro container */
%serverShopIntro {
  background: var(--background-overlay);
  border: 2px solid $main-color;
  &:hover {
    background: var(--background-overlay);
    border: 2px solid $hover-color;
  }
}
/* support the server perks */
%serverShopSelected {
  background: $main-color;
}

// Buy Nitro
%nitroShopGiftNitro {
  color: $text-normal !important;
  background-color: $main-color !important;
  border-color: transparent !important;
  &:hover {
    background-color: $hover-color !important;
    color: $text-normal !important;
  }
}

// Subscribe button
%buttonInverted%buttonColorBrand {
  background: $main-color;
  color: $text-normal;
  &:hover {
    background: $hover-color;
    color: $text-normal;
  }
}

// Shop new pill
%shopNewPill {
  background: radial-gradient(ellipse at 120%200%, $main-color 10%, transparent 70%);
}

// Shop what's new
%shopWhatsNew {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.8));
}
