/* 
  Stat Box Component Styles
  Defines styling for stat boxes in player cards
*/

.stat-average-box {
  padding: var(--space-2) var(--space-3);
  color: var(--clr-light-a0);
  text-align: center;
  min-width: 2rem;
  display: inline-block;
}

/* Apply colors from the percentage classes */
/* Lower percentage ranges with darker colors */
.stat-average-box.perc-under-60 {
  background-color: var(--perc-color, #0d9488);
}

.stat-average-box.perc-40-60 {
  background-color: var(--perc-color, #096c63);
}

.stat-average-box.perc-30-40 {
  background-color: var(--perc-color, #075751);
}

.stat-average-box.perc-0-30 {
  background-color: var(--perc-color, #053e39);
}

.stat-average-box.perc-60-70 {
  background-color: var(--perc-color, #0d9488);
}

.stat-average-box.perc-70-80 {
  background-color: var(--perc-color, #09B6A2);
}

.stat-average-box.perc-80-85 {
  background-color: var(--perc-color, #0AC7B2);
  color: var(--clr-surface-a0);
}

.stat-average-box.perc-85-88 {
  background-color: var(--perc-color, #0DD3BC);
  color: var(--clr-surface-a0);
}

.stat-average-box.perc-88-90 {
  background-color: var(--perc-color, #10DEC6);
  color: var(--clr-surface-a0);
}

.stat-average-box.perc-90-92 {
  background-color: var(--perc-color, #14E5CD);
  color: var(--clr-surface-a0);
}

.stat-average-box.perc-92-94 {
  background-color: var(--perc-color, #17ECD4);
  color: var(--clr-surface-a0);
}

.stat-average-box.perc-94-96 {
  background-color: var(--perc-color, #1AF3DB);
  color: var(--clr-surface-a0);
}

.stat-average-box.perc-96-100 {
  background-color: var(--perc-color, #18FFE4);
  color: var(--clr-surface-a0);
}