:root {
  --ccl-progress-primary: #0d6efd;
  --ccl-progress-secondary: #6c757d;
  --ccl-progress-success: #198754;
  --ccl-progress-danger: #dc3545;
  --ccl-progress-warning: #ffc107;
  --ccl-progress-info: #0dcaf0;
  --ccl-progress-light: #f8f9fa;
  --ccl-progress-dark: #212529;
}

.ccl-progress {
  width: 100%;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ccl-progress--sm {
  height: 5px;
}
.ccl-progress--md {
  height: 8px;
}
.ccl-progress--lg {
  height: 12px;
}
.ccl-progress--xl {
  height: 16px;
}

.ccl-progress__bar {
  height: 100%;
  width: var(--ccl-progress-value, 0%);
  transition: width 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.ccl-progress__bar--animated {
  animation: ccl-progress-animate-positive 2s;
}

@keyframes ccl-progress-animate-positive {
  0% {
    width: 0%;
  }
}

/* Colors */
.ccl-progress__bar--primary {
  background: var(--ccl-progress-primary);
}
.ccl-progress__bar--secondary {
  background: var(--ccl-progress-secondary);
}
.ccl-progress__bar--success {
  background: var(--ccl-progress-success);
}
.ccl-progress__bar--danger {
  background: var(--ccl-progress-danger);
}
.ccl-progress__bar--warning {
  background: var(--ccl-progress-warning);
  color: #212529;
}
.ccl-progress__bar--info {
  background: var(--ccl-progress-info);
  color: #212529;
}
.ccl-progress__bar--light {
  background: var(--ccl-progress-light);
  color: #212529;
}
.ccl-progress__bar--dark {
  background: var(--ccl-progress-dark);
}

/* Stripes */
.ccl-progress__bar--striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.ccl-progress__bar--striped-animated {
  animation: ccl-progress-stripes 1s linear infinite;
}

@keyframes ccl-progress-stripes {
  from {
    background-position-x: 1rem;
  }
  to {
    background-position-x: 0;
  }
}

.ccl-progress__label {
  padding: 0 0.5rem;
}

/* Circular */
.ccl-circular-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--typography-font-family-sans, system-ui, -apple-system, sans-serif);
}

.ccl-circular-progress__svg {
  transform: rotate(-90deg);
}

.ccl-circular-progress__track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.12);
}

.ccl-circular-progress__bar {
  fill: none;
  stroke: var(--ccl-progress-accent, var(--ccl-progress-primary));
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

.ccl-circular-progress__label {
  position: absolute;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #212529);
}

@media (prefers-reduced-motion: reduce) {
  .ccl-progress__bar,
  .ccl-circular-progress__bar {
    transition: none;
  }
  .ccl-progress__bar--striped-animated,
  .ccl-progress__bar--animated {
    animation: none;
  }
}