/*
.nexus-progress-bar
NEXUS PROGRESS BAR COMPONENT */

:root {
  /* Progress Bar Colors */
  --nexus-sys-color-progress-track: var(--nexus-ref-neutral-100);
  --nexus-sys-color-progress-fill: var(--nexus-ref-primary-20);
  --nexus-sys-color-progress-text: var(--nexus-ref-neutral-80);
  --nexus-sys-color-progress-floating-bg: #FFFFFF;
  --nexus-sys-color-progress-floating-text: var(--nexus-ref-neutral-80);

  /* Progress Bar Variant Colors */
  --nexus-sys-color-progress-fill-success: var(--nexus-ref-success-50);
  --nexus-sys-color-progress-fill-warning: var(--nexus-ref-warning-50);
  --nexus-sys-color-progress-fill-error: var(--nexus-ref-error-50);
  --nexus-sys-color-progress-fill-info: var(--nexus-ref-info-50);

  /* Progress Bar Dimensions */
  --nexus-sys-progress-height: 8px;
  --nexus-sys-progress-height-sm: 4px;
  --nexus-sys-progress-height-md: 8px;
  --nexus-sys-progress-height-lg: 12px;
  --nexus-sys-progress-height-xl: 16px;
  --nexus-sys-progress-border-radius: var(--nexus-ref-shape-corner-small);
  --nexus-sys-progress-min-width: 172px;

  /* Label spacing */
  --nexus-sys-progress-label-gap: var(--nexus-ref-spacing-8);

  /* Floating label positioning */
  --nexus-sys-progress-floating-offset: var(--nexus-ref-spacing-8);
  --nexus-sys-progress-floating-distance: -38px;
  --nexus-sys-progress-floating-arrow-size: 8px;
  --nexus-sys-progress-floating-arrow-offset: -4px;

  /* Floating label styling */
  --nexus-sys-progress-floating-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  --nexus-sys-progress-floating-arrow-shadow-top: 2px 2px 3px rgba(0, 0, 0, 0.05);
  --nexus-sys-progress-floating-arrow-shadow-bottom: -1px -1px 2px rgba(0, 0, 0, 0.03);

  /* Animation & Transitions */
  --nexus-sys-progress-transition-duration: 0.3s;
  --nexus-sys-progress-animation-duration-pulse: 2s;
  --nexus-sys-progress-animation-duration-indeterminate: 1.5s;
  --nexus-sys-progress-animation-opacity-pulse: 0.7;

  /* Indeterminate state */
  --nexus-sys-progress-indeterminate-width: 30%;
  --nexus-sys-progress-indeterminate-transform: 350%;

  /* Accessibility */
  --nexus-sys-progress-focus-outline-width: 2px;
  --nexus-sys-progress-focus-outline-offset: 2px;

  /* Progress Bar & Circle – font sizes (refs in root only) */
  --nexus-sys-progress-text-xs: var(--nexus-ref-text-font-size-xs);
  --nexus-sys-progress-text-sm: var(--nexus-ref-text-font-size-sm);
  --nexus-sys-progress-text-md: var(--nexus-ref-text-font-size-md);
  --nexus-sys-progress-text-lg: var(--nexus-ref-text-font-size-lg);
  /* Progress circle value: color, weight, font sizes (refs in root only) */
  --nexus-sys-progress-circle-value-color: var(--nexus-ref-neutral-10);
  --nexus-sys-progress-circle-value-font-weight: var(--nexus-ref-font-weight-semibold);
  --nexus-sys-progress-circle-value-font-size-xxs: var(--nexus-ref-text-font-size-sm);
  --nexus-sys-progress-circle-value-font-size-xs: var(--nexus-ref-display-font-size-xs);
  --nexus-sys-progress-circle-value-font-size-sm: var(--nexus-ref-display-font-size-sm);
  --nexus-sys-progress-circle-value-font-size-md: var(--nexus-ref-display-font-size-md);
  --nexus-sys-progress-circle-value-font-size-lg: var(--nexus-ref-display-font-size-lg);
  --nexus-sys-progress-circle-title-color: var(--nexus-ref-neutral-50);
  --nexus-sys-progress-circle-title-font-weight: var(--nexus-ref-font-weight-medium);

  /* Progress Circle – dimensions per size */
  --nexus-sys-progress-circle-size-xxs: 64px;
  --nexus-sys-progress-circle-size-xs: 160px;
  --nexus-sys-progress-circle-size-sm: 200px;
  --nexus-sys-progress-circle-size-md: 240px;
  --nexus-sys-progress-circle-size-lg: 252px;
  --nexus-sys-progress-circle-stroke-xxs: 8px;
  --nexus-sys-progress-circle-stroke-xs: 9px;
  --nexus-sys-progress-circle-stroke-sm: 10px;
  --nexus-sys-progress-circle-stroke-md: 10px;
  --nexus-sys-progress-circle-stroke-lg: 10px;
}

/* Progress Bar Container */
.nexus-progress-bar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--nexus-sys-progress-label-gap);
  font-family: Manrope, sans-serif;
}

/* Progress Bar Track */
.nexus-progress-bar-track {
  position: relative;
  width: 100%;
  min-width: var(--nexus-sys-progress-min-width);
  height: var(--nexus-sys-progress-height);
  background-color: var(--nexus-sys-color-progress-track);
  border-radius: var(--nexus-sys-progress-border-radius);
  overflow: hidden;
}

/* Progress Bar Fill */
.nexus-progress-bar-fill {
  width: 0%;
  height: 100%;
  min-width: 0;
  background-color: var(--nexus-sys-color-progress-fill);
  border-radius: var(--nexus-sys-progress-border-radius);
  transition: width var(--nexus-sys-progress-transition-duration) ease;
  position: relative;
}

/* Progress Bar Label */
.nexus-progress-bar-label {
  font-size: var(--nexus-sys-progress-text-sm);
  font-weight: var(--nexus-ref-font-weight-medium);
  color: var(--nexus-sys-color-progress-text);
  line-height: var(--nexus-ref-text-line-height-sm);
  white-space: nowrap;
  user-select: none;
}

/* ========================================
         LABEL POSITIONS
   ======================================== */

/* No Label */
.nexus-progress-bar[data-label="false"] .nexus-progress-bar-label {
  display: none;
}

/* Right Label (default) */
.nexus-progress-bar[data-label="right"] {
  flex-direction: row;
  align-items: center;
}

.nexus-progress-bar[data-label="right"] .nexus-progress-bar-label {
  order: 2;
  flex-shrink: 0;
}

.nexus-progress-bar[data-label="right"] .nexus-progress-bar-track {
  order: 1;
}

/* Bottom Label */
.nexus-progress-bar[data-label="bottom"] {
  flex-direction: column;
  align-items: flex-start;
}

.nexus-progress-bar[data-label="bottom"] .nexus-progress-bar-label {
  order: 2;
  margin-top: var(--nexus-sys-progress-label-gap);
}

.nexus-progress-bar[data-label="bottom"] .nexus-progress-bar-track {
  order: 1;
}

/* Top Label */
.nexus-progress-bar[data-label="top"] {
  flex-direction: column;
  align-items: flex-start;
}

.nexus-progress-bar[data-label="top"] .nexus-progress-bar-label {
  order: 1;
  margin-bottom: var(--nexus-sys-progress-label-gap);
}

.nexus-progress-bar[data-label="top"] .nexus-progress-bar-track {
  order: 2;
}

/* Floating Label (above bar) */
.nexus-progress-bar[data-label="floating"] {
  position: relative;
}

.nexus-progress-bar[data-label="floating"] .nexus-progress-bar-label {
  position: absolute;
  top: var(--nexus-sys-progress-floating-distance);
  left: 0;
  transform: translateX(var(--label-position, 0));
  transition: transform var(--nexus-sys-progress-transition-duration) ease;

  /* Bubble/tooltip style */
  background: var(--nexus-sys-color-progress-floating-bg);
  padding: var(--nexus-ref-spacing-6) var(--nexus-ref-spacing-12);
  border-radius: var(--nexus-ref-shape-corner-small);
  box-shadow: var(--nexus-sys-progress-floating-shadow);
  font-weight: var(--nexus-ref-font-weight-semibold);
  color: var(--nexus-sys-color-progress-floating-text);
  border: 1px solid #00000014;
}

/* Optional: Add a small arrow pointing down to the progress bar */
/* .nexus-progress-bar[data-label="floating"] .nexus-progress-bar-label::after {
  content: '';
  position: absolute;
  bottom: var(--nexus-sys-progress-floating-arrow-offset);
  left: 50%;
  width: var(--nexus-sys-progress-floating-arrow-size);
  height: var(--nexus-sys-progress-floating-arrow-size);
  background: var(--nexus-sys-color-progress-floating-bg);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: var(--nexus-sys-progress-floating-arrow-shadow-top);
} */

.nexus-progress-bar[data-label="floating"] .nexus-progress-bar-track {
  margin-top: 0;
}

/* Bottom Floating Label */
.nexus-progress-bar[data-label="bottom-floating"] {
  position: relative;
}

.nexus-progress-bar[data-label="bottom-floating"] .nexus-progress-bar-label {
  position: absolute;
  bottom: var(--nexus-sys-progress-floating-distance);
  left: 0;
  transform: translateX(var(--label-position, 0));
  transition: transform var(--nexus-sys-progress-transition-duration) ease;

  /* Bubble/tooltip style */
  background: var(--nexus-sys-color-progress-floating-bg);
  padding: var(--nexus-ref-spacing-6) var(--nexus-ref-spacing-12);
  border-radius: var(--nexus-ref-shape-corner-small);
  box-shadow: var(--nexus-sys-progress-floating-shadow);
  font-weight: var(--nexus-ref-font-weight-semibold);
  color: var(--nexus-sys-color-progress-floating-text);
}

/* Optional: Add a small arrow pointing up to the progress bar */
/* .nexus-progress-bar[data-label="bottom-floating"] .nexus-progress-bar-label::after {
  content: '';
  position: absolute;
  top: var(--nexus-sys-progress-floating-arrow-offset);
  left: 50%;
  width: var(--nexus-sys-progress-floating-arrow-size);
  height: var(--nexus-sys-progress-floating-arrow-size);
  background: var(--nexus-sys-color-progress-floating-bg);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: var(--nexus-sys-progress-floating-arrow-shadow-bottom);
} */

.nexus-progress-bar[data-label="bottom-floating"] .nexus-progress-bar-track {
  margin-bottom: 0;
}

/* ========================================
         VARIANTS
   ======================================== */

/* Success variant */
.nexus-progress-bar[data-variant="success"] .nexus-progress-bar-fill {
  background-color: var(--nexus-sys-color-progress-fill-success);
}

/* Warning variant */
.nexus-progress-bar[data-variant="warning"] .nexus-progress-bar-fill {
  background-color: var(--nexus-sys-color-progress-fill-warning);
}

/* Error variant */
.nexus-progress-bar[data-variant="error"] .nexus-progress-bar-fill {
  background-color: var(--nexus-sys-color-progress-fill-error);
}

/* Info variant */
.nexus-progress-bar[data-variant="info"] .nexus-progress-bar-fill {
  background-color: var(--nexus-sys-color-progress-fill-info);
}

/* ========================================
         SIZES
   ======================================== */

/* Small size */
.nexus-progress-bar[data-size="sm"] .nexus-progress-bar-track {
  height: var(--nexus-sys-progress-height-sm);
}

.nexus-progress-bar[data-size="sm"] .nexus-progress-bar-label {
  font-size: var(--nexus-sys-progress-text-xs);
}

/* Medium size (default) */
.nexus-progress-bar[data-size="md"] .nexus-progress-bar-track {
  height: var(--nexus-sys-progress-height-md);
}

/* Large size */
.nexus-progress-bar[data-size="lg"] .nexus-progress-bar-track {
  height: var(--nexus-sys-progress-height-lg);
}

.nexus-progress-bar[data-size="lg"] .nexus-progress-bar-label {
  font-size: var(--nexus-sys-progress-text-md);
}

/* XL size */
.nexus-progress-bar[data-size="xl"] .nexus-progress-bar-track {
  height: var(--nexus-sys-progress-height-xl);
}

.nexus-progress-bar[data-size="xl"] .nexus-progress-bar-label {
  font-size: var(--nexus-sys-progress-text-lg);
}

/* ========================================
         ANIMATED / INDETERMINATE
   ======================================== */

.nexus-progress-bar[data-animated="true"] .nexus-progress-bar-fill {
  animation: progress-pulse var(--nexus-sys-progress-animation-duration-pulse) ease-in-out infinite;
}

@keyframes progress-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: var(--nexus-sys-progress-animation-opacity-pulse);
  }
}

/* Indeterminate state */
.nexus-progress-bar[data-indeterminate="true"] .nexus-progress-bar-fill {
  width: var(--nexus-sys-progress-indeterminate-width) !important;
  animation: progress-indeterminate var(--nexus-sys-progress-animation-duration-indeterminate) ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(var(--nexus-sys-progress-indeterminate-transform));
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ========================================
         ACCESSIBILITY
   ======================================== */

.nexus-progress-bar-track:focus-visible {
  outline: var(--nexus-sys-progress-focus-outline-width) solid var(--nexus-ref-primary-20);
  outline-offset: var(--nexus-sys-progress-focus-outline-offset);
}

/* ========================================
         PROGRESS CIRCLE (type="circle" | "half-circle")
   ======================================== */

.nexus-progress-bar[data-type="circle"],
.nexus-progress-bar[data-type="half-circle"] {
  width: auto;
  min-width: unset;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.nexus-progress-bar[data-type="circle"] .nexus-progress-bar-track,
.nexus-progress-bar[data-type="circle"] .nexus-progress-bar-fill,
.nexus-progress-bar[data-type="half-circle"] .nexus-progress-bar-track,
.nexus-progress-bar[data-type="half-circle"] .nexus-progress-bar-fill,
.nexus-progress-bar[data-type="circle"] .nexus-progress-bar-label,
.nexus-progress-bar[data-type="half-circle"] .nexus-progress-bar-label {
  display: none;
}

/* Default size for circle when data-size not set */
.nexus-progress-bar[data-type="circle"]:not([data-size]) .nexus-progress-bar-circle,
.nexus-progress-bar[data-type="half-circle"]:not([data-size]) .nexus-progress-bar-circle {
  width: var(--nexus-sys-progress-circle-size-md);
  height: var(--nexus-sys-progress-circle-size-md);
  min-width: var(--nexus-sys-progress-circle-size-md);
  min-height: var(--nexus-sys-progress-circle-size-md);
}

.nexus-progress-bar[data-type="circle"]:not([data-size]) .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="circle"]:not([data-size]) .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"]:not([data-size]) .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="half-circle"]:not([data-size]) .nexus-progress-bar-circle-fill {
  stroke-width: var(--nexus-sys-progress-circle-stroke-md);
}

.nexus-progress-bar[data-type="circle"]:not([data-size]) .nexus-progress-bar-circle-value,
.nexus-progress-bar[data-type="half-circle"]:not([data-size]) .nexus-progress-bar-circle-value {
  font-size: var(--nexus-sys-progress-circle-value-font-size-md);
}

.nexus-progress-bar[data-type="circle"]:not([data-size]) .nexus-progress-bar-circle-title,
.nexus-progress-bar[data-type="half-circle"]:not([data-size]) .nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-sm);
}

.nexus-progress-bar-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevent circle from shrinking in flex layouts (fixes mobile/iPhone same-size issue) */
}

.nexus-progress-bar-circle svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.nexus-progress-bar-circle-track {
  fill: none;
  stroke: var(--nexus-sys-color-progress-track);
  stroke-linecap: round;
  transition: none;
}

.nexus-progress-bar-circle-fill {
  fill: none;
  stroke: var(--nexus-sys-color-progress-fill);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--nexus-sys-progress-transition-duration) ease;
}

/* Full circle: start at top, clockwise */
.nexus-progress-bar[data-type="circle"] .nexus-progress-bar-circle svg {
  transform: rotate(-90deg);
}

/* Half circle: arc from bottom-left clockwise (top semicircle) */
.nexus-progress-bar[data-type="half-circle"] .nexus-progress-bar-circle svg {
  transform: rotate(0deg);
}

.nexus-progress-bar-circle-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-xs);
  font-weight: var(--nexus-sys-progress-circle-title-font-weight);
  color: var(--nexus-sys-progress-circle-title-color);
  line-height: 1.2;
  margin: 0;
}

.nexus-progress-bar-circle-value {
  font-size: inherit;
  font-weight: var(--nexus-sys-progress-circle-value-font-weight);
  color: var(--nexus-sys-progress-circle-value-color);
  line-height: 1.2;
  margin: 0;
}

/* Circle sizes: xxs, xs, sm, md, lg */
.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle,
.nexus-progress-bar[data-type="half-circle"][data-size="xxs"] .nexus-progress-bar-circle {
  width: var(--nexus-sys-progress-circle-size-xxs);
  height: var(--nexus-sys-progress-circle-size-xxs);
  min-width: var(--nexus-sys-progress-circle-size-xxs);
  min-height: var(--nexus-sys-progress-circle-size-xxs);
}

/* Full circle xxs only: extra space for title below */
.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle {
  padding-bottom: 1.25rem;
}

.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-size="xxs"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="half-circle"][data-size="xxs"] .nexus-progress-bar-circle-fill {
  stroke-width: var(--nexus-sys-progress-circle-stroke-xxs);
}

.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle-value,
.nexus-progress-bar[data-type="half-circle"][data-size="xxs"] .nexus-progress-bar-circle-value {
  font-size: var(--nexus-sys-progress-circle-value-font-size-xxs);
}

.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle-title,
.nexus-progress-bar[data-type="half-circle"][data-size="xxs"] .nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-xs);
}

/* xxs full circle only: title below circle (outside), value centered in circle */
.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle-content {
  height: var(--nexus-sys-progress-circle-size-xxs);
  bottom: auto;
  flex-direction: column;
}

.nexus-progress-bar[data-type="circle"][data-size="xxs"] .nexus-progress-bar-circle-title {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  width: max-content;
}

/* xxs half-circle: value on top, label below (inside), same as before */
.nexus-progress-bar[data-type="half-circle"][data-size="xxs"] .nexus-progress-bar-circle-content {
  flex-direction: column-reverse;
}

/* xs: value on top, label below (inside circle) */
.nexus-progress-bar[data-type="circle"][data-size="xs"] .nexus-progress-bar-circle-content,
.nexus-progress-bar[data-type="half-circle"][data-size="xs"] .nexus-progress-bar-circle-content {
  flex-direction: column-reverse;
}

/* xs */
.nexus-progress-bar[data-type="circle"][data-size="xs"] .nexus-progress-bar-circle,
.nexus-progress-bar[data-type="half-circle"][data-size="xs"] .nexus-progress-bar-circle {
  width: var(--nexus-sys-progress-circle-size-xs);
  height: var(--nexus-sys-progress-circle-size-xs);
  min-width: var(--nexus-sys-progress-circle-size-xs);
  min-height: var(--nexus-sys-progress-circle-size-xs);
}

.nexus-progress-bar[data-type="circle"][data-size="xs"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="circle"][data-size="xs"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-size="xs"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="half-circle"][data-size="xs"] .nexus-progress-bar-circle-fill {
  stroke-width: var(--nexus-sys-progress-circle-stroke-xs);
}

.nexus-progress-bar[data-type="circle"][data-size="xs"] .nexus-progress-bar-circle-value,
.nexus-progress-bar[data-type="half-circle"][data-size="xs"] .nexus-progress-bar-circle-value {
  font-size: var(--nexus-sys-progress-circle-value-font-size-xs);
}

.nexus-progress-bar[data-type="circle"][data-size="xs"] .nexus-progress-bar-circle-title,
.nexus-progress-bar[data-type="half-circle"][data-size="xs"] .nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-xs);
}

/* sm */
.nexus-progress-bar[data-type="circle"][data-size="sm"] .nexus-progress-bar-circle,
.nexus-progress-bar[data-type="half-circle"][data-size="sm"] .nexus-progress-bar-circle {
  width: var(--nexus-sys-progress-circle-size-sm);
  height: var(--nexus-sys-progress-circle-size-sm);
  min-width: var(--nexus-sys-progress-circle-size-sm);
  min-height: var(--nexus-sys-progress-circle-size-sm);
}

.nexus-progress-bar[data-type="circle"][data-size="sm"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="circle"][data-size="sm"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-size="sm"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="half-circle"][data-size="sm"] .nexus-progress-bar-circle-fill {
  stroke-width: var(--nexus-sys-progress-circle-stroke-sm);
}

.nexus-progress-bar[data-type="circle"][data-size="sm"] .nexus-progress-bar-circle-value,
.nexus-progress-bar[data-type="half-circle"][data-size="sm"] .nexus-progress-bar-circle-value {
  font-size: var(--nexus-sys-progress-circle-value-font-size-sm);
}

.nexus-progress-bar[data-type="circle"][data-size="sm"] .nexus-progress-bar-circle-title,
.nexus-progress-bar[data-type="half-circle"][data-size="sm"] .nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-xs);
}

/* md */
.nexus-progress-bar[data-type="circle"][data-size="md"] .nexus-progress-bar-circle,
.nexus-progress-bar[data-type="half-circle"][data-size="md"] .nexus-progress-bar-circle {
  width: var(--nexus-sys-progress-circle-size-md);
  height: var(--nexus-sys-progress-circle-size-md);
  min-width: var(--nexus-sys-progress-circle-size-md);
  min-height: var(--nexus-sys-progress-circle-size-md);
}

.nexus-progress-bar[data-type="circle"][data-size="md"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="circle"][data-size="md"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-size="md"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="half-circle"][data-size="md"] .nexus-progress-bar-circle-fill {
  stroke-width: var(--nexus-sys-progress-circle-stroke-md);
}

.nexus-progress-bar[data-type="circle"][data-size="md"] .nexus-progress-bar-circle-value,
.nexus-progress-bar[data-type="half-circle"][data-size="md"] .nexus-progress-bar-circle-value {
  font-size: var(--nexus-sys-progress-circle-value-font-size-md);
}

.nexus-progress-bar[data-type="circle"][data-size="md"] .nexus-progress-bar-circle-title,
.nexus-progress-bar[data-type="half-circle"][data-size="md"] .nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-sm);
}

/* lg */
.nexus-progress-bar[data-type="circle"][data-size="lg"] .nexus-progress-bar-circle,
.nexus-progress-bar[data-type="half-circle"][data-size="lg"] .nexus-progress-bar-circle {
  width: var(--nexus-sys-progress-circle-size-lg);
  height: var(--nexus-sys-progress-circle-size-lg);
  min-width: var(--nexus-sys-progress-circle-size-lg);
  min-height: var(--nexus-sys-progress-circle-size-lg);
}

.nexus-progress-bar[data-type="circle"][data-size="lg"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="circle"][data-size="lg"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-size="lg"] .nexus-progress-bar-circle-track,
.nexus-progress-bar[data-type="half-circle"][data-size="lg"] .nexus-progress-bar-circle-fill {
  stroke-width: var(--nexus-sys-progress-circle-stroke-lg);
}

.nexus-progress-bar[data-type="circle"][data-size="lg"] .nexus-progress-bar-circle-value,
.nexus-progress-bar[data-type="half-circle"][data-size="lg"] .nexus-progress-bar-circle-value {
  font-size: var(--nexus-sys-progress-circle-value-font-size-lg);
}

.nexus-progress-bar[data-type="circle"][data-size="lg"] .nexus-progress-bar-circle-title,
.nexus-progress-bar[data-type="half-circle"][data-size="lg"] .nexus-progress-bar-circle-title {
  font-size: var(--nexus-sys-progress-text-sm);
}

/* Circle variant colors */
.nexus-progress-bar[data-type="circle"][data-variant="success"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-variant="success"] .nexus-progress-bar-circle-fill {
  stroke: var(--nexus-sys-color-progress-fill-success);
}

.nexus-progress-bar[data-type="circle"][data-variant="warning"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-variant="warning"] .nexus-progress-bar-circle-fill {
  stroke: var(--nexus-sys-color-progress-fill-warning);
}

.nexus-progress-bar[data-type="circle"][data-variant="error"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-variant="error"] .nexus-progress-bar-circle-fill {
  stroke: var(--nexus-sys-color-progress-fill-error);
}

.nexus-progress-bar[data-type="circle"][data-variant="info"] .nexus-progress-bar-circle-fill,
.nexus-progress-bar[data-type="half-circle"][data-variant="info"] .nexus-progress-bar-circle-fill {
  stroke: var(--nexus-sys-color-progress-fill-info);
}

/* ========================================
         REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .nexus-progress-bar-fill {
    transition: none;
  }

  .nexus-progress-bar-circle-fill {
    transition: none;
  }

  .nexus-progress-bar[data-animated="true"] .nexus-progress-bar-fill,
  .nexus-progress-bar[data-indeterminate="true"] .nexus-progress-bar-fill {
    animation: none;
  }

  .nexus-progress-bar-label {
    transition: none;
  }
}