/* NITRO */
%nitro {
  background-color: transparent;
}
%nitroScroller,
%nitroPremiumScroller {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5));
  right: 0%;
  transition: all 0.5s ease-in-out;
  &:has(+ %nitroPerksScroller%nitroPerksScrollerOpen) {
    right: 100%;
  }
}
%nitroCard {
  background-color: cv('bg.general.card');
  &:hover {
    background-color: hsla(0, 0%, 0%, 0.6);
  }
}
%nitroSeePerksButton {
  background-color: hsla(0, 0%, 0%, 0.6);
}
%nitroGiftContainer {
  background-color: cv('bg.general.card');
}
%themeDark %nitroGiftTextContainer {
  background-image: none;
}
%nitroFooterInnerWrapper {
  background-color: hsla(0, 0%, 0%, 0.8);
}

// PERKS PAGE
%nitroPerksScroller {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
  transition: all 0.5s ease-in-out;
}
%nitroPerksBackButton {
  background-color: hsla(0, 0%, 0%, 0.6);
  &:hover {
    background-color: hsla(0, 0%, 0%, 0.8);
  }
}
%themeDark {
  %nitroPerksArrows {
    background-color: hsla(0, 0%, 0%, 0.6);
  }
}
%nitroPerksArrowIcon {
  fill: hsla(0, 0%, 100%, 0.7);
}
%themeDark %nitroPerksArrowInactive {
  background-color: cv('bg.general.card');
  %nitroPerksArrowIcon {
    fill: hsla(0, 0%, 100%, 0.3);
  }
}
%nitroPerksProgressBar {
  background-color: hsla(0, 0%, 0%, 0.6);
}
%nitroPerksProgressDot {
  background-color: hsla(0, 0%, 100%, 0.5);
}
%nitroPerksProgressDotSelected {
  background-color: #fff;
}
