/* ----------------------- */
/*    VIEWS TRANSITIONS    */
/* ----------------------- */
::view-transition-new(root),
::view-transition-old(root) {
  animation-duration: 200ms;
}

/* ------------- */
/*    GENERAL    */
/* ------------- */
select:not([size]) {
  print-color-adjust: exact;
  background-image: url("https://www.svgrepo.com/show/335342/chevron-down-small.svg");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1em;
}

ul {
  list-style: disc;
}
ul ul {
  list-style: circle;
}
ul ul ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

li {
  margin-left: 1rem;
}

/* ------------- */
/*  ANIMATIONS   */
/* ------------- */
.animate-stats {
  animation: stats 1s 0.5s both;
}

@keyframes stats {
  0% {
    --p: 0;
  }
}

/* ------------- */
/*     PRIZES    */
/* ------------- */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.pie {
  --p: 20;
  --b: 22px;
  --w: 200px;
  z-index: 1;
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
}

.pie::before,
.pie::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.pie::before {
  /* Defines the position absolute of the before pseudo-class, positioning it to occupy the full .pie */
  inset: 0;

  /* Defines the background color (the color of the donut).
    1. radial-gradient (defines the initial point):
      1.1. farthest-side 
        defines the stop position of the gradient, being it 
        the farthest side (vertical wall or horizontal wall, depending on the shape of the div),
        not the corners of the div.
      1.2. second param ($gray-700 98%):
        Defines start color of gradient (color we chose for the donut chart)
      1.3. third/last param (#0000):
        Last color of the gradient, which is transparent.
    2. top / var(--b) var(--b) no-repeat:
      2.1. top:
        Defines the position of the background (0% 50%)
      2.2. var(--b) var(--b) no-repeat:
        Deines the size of the background and says it doesn't repeat, so that we get a circle (starting position).
    3. conic-gradient (gradient transition from around the point in the center of the div):
      Goes from 0% to whatever the percentage of the points is. */
  background: radial-gradient(farthest-side, var(--color-purple-500) 98%, #0000)
      top / var(--b) var(--b) no-repeat,
    conic-gradient(var(--color-purple-500) calc(var(--p) * 1%), #0000 0),
    conic-gradient(
      var(--color-purple-300) calc(var(--p) * 1%),
      rgba(0, 0, 0, 0)
    );

  /* Allows for the center to be masked, that is, without the background radial gradient, 
  so that only the text with the amount of points itself is seen. */
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
}

.pie::after {
  border: 4px solid white;
  /* Defines size (same as donut bar) and position (center) of final percentage dot:  */
  inset: calc(50% - var(--b) / 2);
  /* Color of dot same as bar */
  background: var(--color-purple-500);
  /* translateY positions the dot in the initial position 0%:
  rotate rotates the translateY and positions it in the end position (being 3.6deg equivalent to 1% point): */
  transform: rotate(calc(var(--p) * 3.6deg))
    translateY(calc(50% - var(--w) / 2));
}