/* Progress Bar Wrapper */
.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.progress-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bold);
  display: flex;
  justify-content: space-between;
}

.progress-title span {
  font-weight: 700;
  color: var(--success-color);
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 1rem;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* Progress Fill */
.progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
  position: relative;
  background-size: 40px 40px;
  overflow: hidden;
  background-color: var(--color);
}

/* Solid fill (no stripe overlay) — e.g. compact award grid promo */
.progress-fill.progress-fill--solid::after {
  display: none;
}

/* Striped Animation with Saturation Boost */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  animation: progress-stripes 1s linear infinite;
  filter: saturate(20);
  /* Boost saturation */
}

/* Modifier States */
.progress-fill.success {
  background-color: var(--success-color);
}

.progress-fill.error {
  background-color: var(--error-color);
}

.progress-fill.warning {
  background-color: var(--warning-color);
}

.progress-fill.white {
  background-color: var(--white-color);
}

.progress-fill.black {
  background-color: var(--black-color);
}

.progress-fill.question {
  background-color: var(--question-color);
}

.progress-fill.odd {
  background-color: var(--odd-color);
}

/* Saturation Boost for State-Specific Stripes */
.progress-fill.success::after {
  filter: saturate(2);
  background-image: linear-gradient(
    45deg,
    rgba(var(--success-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--success-color-rgb), 0.5) 50%,
    rgba(var(--success-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

.progress-fill.error::after {
  filter: saturate(2);
  background-image: linear-gradient(
    45deg,
    rgba(var(--error-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--error-color-rgb), 0.5) 50%,
    rgba(var(--error-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

.progress-fill.warning::after {
  filter: saturate(2);
  background-image: linear-gradient(
    45deg,
    rgba(var(--warning-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--warning-color-rgb), 0.5) 50%,
    rgba(var(--warning-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

.progress-fill.white::after {
  filter: saturate(2);
  background-image: linear-gradient(
    45deg,
    rgba(var(--white-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--white-color-rgb), 0.5) 50%,
    rgba(var(--white-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

.progress-fill.black::after {
  filter: saturate(2);
  background-image: linear-gradient(
    45deg,
    rgba(var(--black-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--black-color-rgb), 0.5) 50%,
    rgba(var(--black-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

.progress-fill.question::after {
  filter: saturate(2);
  background-image: linear-gradient(
    45deg,
    rgba(var(--question-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--question-color-rgb), 0.5) 50%,
    rgba(var(--question-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

.progress-fill.odd::after {
  filter: saturate(10);
  background-image: linear-gradient(
    45deg,
    rgba(var(--odd-color-rgb), 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(var(--odd-color-rgb), 0.5) 50%,
    rgba(var(--odd-color-rgb), 0.5) 75%,
    transparent 75%,
    transparent
  );
}

/* Keyframes for Striped Animation */
@keyframes progress-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 40px 0;
  }
}