@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * PROGRESS
 * Bar and ring variants with determinate / indeterminate states.
 * Reduced-motion: indeterminate animation is fully suppressed (no looping
 * motion); determinate value transitions become instant.
 * ======================================== */

  .cinder-progress {
    display: inline-flex;
    align-items: center;
  }

  /* ----------------------------------------
 * Bar variant
 * ---------------------------------------- */

  .cinder-progress--bar {
    width: 100%;
  }

  .cinder-progress--bar .cinder-progress__track {
    width: 100%;
    background: var(--cinder-surface-inset);
    border-radius: var(--cinder-radius-full);
    overflow: hidden;
  }

  .cinder-progress--bar[data-cinder-size='sm'] .cinder-progress__track {
    height: 0.25rem;
  }

  .cinder-progress--bar[data-cinder-size='md'] .cinder-progress__track {
    height: 0.5rem;
  }

  .cinder-progress--bar[data-cinder-size='lg'] .cinder-progress__track {
    height: 0.75rem;
  }

  .cinder-progress--bar .cinder-progress__fill {
    height: 100%;
    background: var(--cinder-accent-solid);
    border-radius: inherit;
    transition: width var(--cinder-duration-moderate) var(--cinder-ease-in-out);
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-progress--bar
      .cinder-progress__fill {
      transition: none;
    }
  }

  :root:is([data-cinder-reduced-motion='true'], [data-reduced-motion='on'])
    .cinder-progress--bar
    .cinder-progress__fill {
    transition: none;
  }

  .cinder-progress--bar .cinder-progress__fill--indeterminate {
    width: 30%;
    animation: cinder-progress-bar-slide var(--cinder-duration-progress-bar-indeterminate) linear
      infinite;
  }

  @keyframes cinder-progress-bar-slide {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(400%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-progress--bar
      .cinder-progress__fill--indeterminate {
      animation: none;
      width: 100%;
      opacity: 0.5;
    }
  }

  :root:is([data-cinder-reduced-motion='true'], [data-reduced-motion='on'])
    .cinder-progress--bar
    .cinder-progress__fill--indeterminate {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }

  /* ----------------------------------------
 * Ring variant
 * ---------------------------------------- */

  .cinder-progress--ring[data-cinder-size='sm'] .cinder-progress__svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cinder-progress--ring[data-cinder-size='md'] .cinder-progress__svg {
    width: 2rem;
    height: 2rem;
  }

  .cinder-progress--ring[data-cinder-size='lg'] .cinder-progress__svg {
    width: 2.75rem;
    height: 2.75rem;
  }

  .cinder-progress--ring .cinder-progress__svg {
    transform: rotate(-90deg);
  }

  .cinder-progress--ring .cinder-progress__track,
  .cinder-progress--ring .cinder-progress__fill {
    fill: none;
    stroke-width: 3;
  }

  .cinder-progress--ring .cinder-progress__track {
    stroke: var(--cinder-surface-inset);
  }

  .cinder-progress--ring .cinder-progress__fill {
    stroke: var(--cinder-accent-solid);
    stroke-linecap: round;
    /* circumference = 2 * pi * 16 ≈ 100.53 */
    stroke-dasharray: 100.53;
    stroke-dashoffset: calc(100.53 - (var(--_cinder-progress-percent, 0) * 1.0053));
    transition: stroke-dashoffset var(--cinder-duration-moderate) var(--cinder-ease-in-out);
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-progress--ring
      .cinder-progress__fill {
      transition: none;
    }
  }

  :root:is([data-cinder-reduced-motion='true'], [data-reduced-motion='on'])
    .cinder-progress--ring
    .cinder-progress__fill {
    transition: none;
  }

  .cinder-progress--ring .cinder-progress__fill--indeterminate {
    stroke-dasharray: 25 75;
    stroke-dashoffset: 0;
    animation: cinder-progress-ring-spin var(--cinder-duration-progress-ring-spin) linear infinite;
    transform-origin: 18px 18px;
  }

  @keyframes cinder-progress-ring-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-progress--ring
      .cinder-progress__fill--indeterminate {
      animation: none;
      stroke-dasharray: 100.53;
      stroke-dashoffset: 0;
      opacity: 0.5;
    }
  }

  :root:is([data-cinder-reduced-motion='true'], [data-reduced-motion='on'])
    .cinder-progress--ring
    .cinder-progress__fill--indeterminate {
    animation: none;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
}