/*
  Stat Cards Component
  Reusable stat card components for displaying key metrics
*/

/* Container for stat cards */
.stat-cards-container {
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  padding-block-start: var(--space-3);
  padding-block-end: var(--space-3);
}

/* Default width container - 40% */
.stat-cards-container--sm {
  width: 90%;
}

/* Medium width container - 60% */
.stat-cards-container--md {
  width: 60%;
}

/* Large width container - 80% */
.stat-cards-container--lg {
  width: 80%;
}

/* Full width container - 100% */
.stat-cards-container--full {
  width: 100%;
}

/* Individual stat card */
.stat-card {
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  padding-block-start: var(--space-3);
  padding-block-end: var(--space-3);
  text-align: center;
  border-radius: var(--radius-md);
  background-color: #494949;
  box-shadow: none;
  width: 40%;
  height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Stat card sizes - height variations */
.stat-card--sm {
  height: 60px;
}

.stat-card--md {
  height: 75px;
}

.stat-card--lg {
  height: 100px;
}

.stat-card--xl {
  height: 125px;
}

/* Stat card width variations */
.stat-card--w-19 {
  width: 19%;
}

.stat-card--w-30 {
  width: 30%;
}

.stat-card--w-40 {
  width: 40%;
}

.stat-card--w-50 {
  width: 50%;
}

.stat-card--w-full {
  width: 100%;
}

/* Stat card label (small text at top) */
.stat-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  margin-block-end: var(--space-1);
}

/* Stat card value (large number/text) */
.stat-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-normal);
}

/* Stat card value size variations */
.stat-card__value--sm {
  font-size: var(--text-lg);
}

.stat-card__value--md {
  font-size: var(--text-2xl);
}

.stat-card__value--lg {
  font-size: var(--text-3xl);
}

.stat-card__value--xl {
  font-size: var(--text-4xl);
}

/* Color variants for stat card values */
.stat-card__value--warning {
  color: var(--color-warning);
}

.stat-card__value--danger {
  color: var(--color-danger);
}

.stat-card__value--success {
  color: var(--color-success);
}

.stat-card__value--primary {
  color: var(--clr-primary-a0);
}

.stat-card__value--info {
  color: var(--color-info);
}

.stat-card__value--white {
  color: var(--clr-white-a0);
}

/* Background color variations */
.stat-card--bg-dark {
  background-color: #494949;
}

.stat-card--bg-darker {
  background-color: #3a3a3a;
}

.stat-card--bg-surface {
  background-color: var(--clr-surface-a30);
}

.stat-card--bg-primary {
  background-color: var(--clr-primary-a0);
}