:root {
  --privy-border-radius-sm: 6px;
  --privy-border-radius-md: 12px;
  --privy-border-radius-mdlg: 16px;
  --privy-border-radius-lg: 24px;
  --privy-border-radius-full: 9999px;
  --privy-color-background: hsl(60, 2%, 9%);
  --privy-color-background-2: hsl(60, 2%, 18%);
  --privy-color-foreground: hsl(60, 2%, 80%);
  --privy-color-foreground-2: hsl(60, 2%, 90%);
  --privy-color-foreground-3: hsl(0, 0%, 57%);
  --privy-color-foreground-4: hsl(0, 0%, 37%);
  --privy-color-foreground-accent: hsl(246, 84%, 5%);
  --privy-color-accent: hsl(168, 90%, 63%);
  --privy-color-accent-light: hsl(168, 90%, 78%);
  --privy-color-accent-lightest: hsl(168, 90%, 88%);
  --privy-color-accent-dark: hsl(168, 90%, 57%);
  --privy-color-accent-darkest: hsl(168, 85%, 3%);
  --privy-color-success: hsl(147, 43%, 52%);
  --privy-color-success-dark: hsl(147, 43%, 36%);
  --privy-color-success-light: hsl(147, 43%, 92%);
  --privy-color-error: hsl(7, 80%, 62%);
  --privy-color-error-light: hsl(7, 80%, 92%);
  --privy-color-warn: hsl(36, 100%, 65%);
  --privy-color-warn-light: hsl(36, 100%, 95%);
  --privy-height-modal-full: 620px;
  --privy-height-modal-compact: 480px;
}

/* :root { */
/*   --privy-border-radius-sm: 6px; */
/*   --privy-border-radius-md: 12px; */
/*   --privy-border-radius-mdlg: 16px; */
/*   --privy-border-radius-lg: 24px; */
/*   --privy-border-radius-full: 9999px; */
/*   --privy-color-background: hsl(60, 2%, 9%); */
/*   --privy-color-background-2: hsl(60, 2%, 18%); */
/*   --privy-color-foreground: hsl(60, 2%, 80%); */
/*   --privy-color-foreground-2: hsl(60, 2%, 90%); */
/*   --privy-color-foreground-3: hsl(0, 0%, 57%); */
/*   --privy-color-foreground-4: hsl(0, 0%, 37%); */
/*   --privy-color-foreground-accent: hsl(246, 84%, 5%); */
/*   --privy-color-accent: #4af5d3; */
/*   --privy-color-accent-light: hsl(168, 90%, 78%); */
/*   --privy-color-accent-lightest: hsl(168, 90%, 88%); */
/*   --privy-color-accent-dark: hsl(168, 90%, 57%); */
/*   --privy-color-accent-darkest: hsl(168, 85%, 3%); */
/*   --privy-color-success: hsl(147, 43%, 52%); */
/*   --privy-color-success-dark: hsl(147, 43%, 36%); */
/*   --privy-color-success-light: hsl(147, 43%, 92%); */
/*   --privy-color-error: hsl(7, 80%, 62%); */
/*   --privy-color-error-light: hsl(7, 80%, 92%); */
/*   --privy-color-warn: hsl(36, 100%, 65%); */
/*   --privy-color-warn-light: hsl(36, 100%, 95%); */
/*   --privy-height-modal-full: 620px; */
/*   --privy-height-modal-compact: 480px; */
/* } */
.react-toggle-track {
  background: black;
}
.react-toggle--checked .react-toggle-thumb {
  border-color: white;
}

.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
.react-toggle--checked .react-toggle-track {
  background-color: #410dff;
}
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: '<angle>';
}

@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}

.noti-pill {
  /* add the animation, but pause it by default */
  /* animation: spin 2.5s infinite linear paused; */

  user-select: none;
  /* animation: spin 7s infinite linear; */
  /**
   * Using `background-origin` we can create a “border” using two gradients. And to
   * make the gradients better-looking, we use OKLCH.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
   * @see https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
   */

  background:
    /* Background colors don’t work with `background-origin`, so use a gradient. */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94)) padding-box,
    /* ends at inner border edges */
      conic-gradient(
        from var(--bg-angle) at 50% 50%,
        #410dff 0%,
        #ff5e4f 25%,
        #d900d5 50%,
        #ff5e4f 75%,
        #410dff 100%
      )
      border-box; /* extends to outer border edges */

  /* a clear border lets the background gradient shine through */
  border: 1px solid transparent;
  transition: all ease-in-out 0.18s;

  /* unpause the animation on hover */
  &:not(.quickplay-active) {
    &:hover {
      /* animation: spin 2.75s infinite linear; */
      background:
    /* Background colors don’t work with `background-origin`, so use a gradient. */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)) padding-box,
        /* ends at inner border edges */
          conic-gradient(
            from var(--bg-angle) at 50% 50%,
            #410dff 0%,
            #ff5e4f 25%,
            #d900d5 50%,
            #ff5e4f 75%,
            #410dff 100%
          )
          border-box; /* extends to outer border edges */
      /* animation-play-state: running; */
    }
  }
}