/*
 * Progress Component
 * Progress bars and completion indicators
 */

@layer components {
  /* Progress bar container */
  .progress {
    width: 100%;
    height: var(--progress-height);
    background-color: var(--color-gray-lighter);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  /* Progress bar fill */
  .progress__bar {
    height: 100%;
    background-color: var(--color-gray-darker);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
  }

  /* Light background variant */
  .progress--light {
    background-color: var(--color-gray-medium);
  }

  /* Progress bar variants */
  .progress--lg {
    height: var(--progress-height-lg);
  }

  .progress--sm {
    height: var(--progress-height-sm);
  }

  .progress--hairline {
    height: 1px;
    border-radius: 0;
    background-color: oklch(var(--lch-gray-darker) / 0.12);
  }

  .progress--inline {
    width: 4rem;
  }

  /* Progress with label */
  .progress-with-label {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .progress__label {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
  }

  .progress__percentage {
    color: var(--color-gray-darker);
  }

  /* Completion indicator */
  .completion-indicator {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
  }

  .completion-indicator--complete {
    color: var(--color-green);
  }

  .completion-indicator__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-lg);
    height: var(--icon-lg);
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
  }

  .completion-indicator--complete .completion-indicator__icon {
    background-color: var(--color-green);
    border-color: var(--color-green);
  }

  .completion-indicator__icon .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--color-white);
  }

  /* Course progress section */
  .course-progress {
    padding: var(--block-space);
    background-color: var(--color-gray-lightest);
    border-radius: var(--radius);
  }

  .course-progress__title {
    font-size: var(--text-normal);
    color: var(--color-gray-darker);
    margin-bottom: var(--block-space-half);
  }

  .course-progress__stats {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    margin-top: var(--block-space-half);
  }

  /* Progress section (course page bar) */
  .progress-section {
    padding: var(--block-space) 0;
    background-color: var(--color-gray-lightest);
    border-bottom: var(--border-subtle);
  }

  /* Quiz progress bar with back navigation */
  .quiz-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .quiz-progress__back {
    flex-shrink: 0;
    inline-size: 2rem;
    block-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-gray-darker);
    text-decoration: none;

    .icon {
      inline-size: var(--icon-md);
      block-size: var(--icon-md);
    }

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-gray-lighter);
      }
    }
  }

  .quiz-progress .progress {
    flex: 1;
  }
}