// @design-system: layout/CheckoutShell
import { cva } from 'class-variance-authority';

export const stepIndicatorVariants = cva(
  'flex items-center justify-center rounded-full text-xs font-semibold transition-colors duration-fast',
  {
    variants: {
      status: {
        active:
          'bg-brand-primary-600 text-brand-on-primary',
        completed:
          'bg-success-500 text-brand-on-primary',
        upcoming:
          'bg-surface-subtle text-text-muted border border-border-default',
      },
    },
    defaultVariants: { status: 'upcoming' },
  },
);

export const stepLabelVariants = cva('text-xs font-medium', {
  variants: {
    status: {
      active: 'text-brand-primary-700',
      completed: 'text-text-secondary',
      upcoming: 'text-text-muted',
    },
  },
  defaultVariants: { status: 'upcoming' },
});