import { keyframes, style } from '@vanilla-extract/css';
import { color, toRem } from 'folds';

// A brief, gentle acknowledgement when a draft first becomes persisted.
// Guarded by `prefers-reduced-motion` so it only plays for users who opt in.
const savedPulse = keyframes({
  '0%': { opacity: 0.4, transform: 'scale(0.7)' },
  '45%': { opacity: 1, transform: 'scale(1.15)' },
  '100%': { opacity: 1, transform: 'scale(1)' },
});

export const DraftIndicatorBase = style({
  userSelect: 'none',
  whiteSpace: 'nowrap',
});

export const DraftDot = style({
  width: toRem(6),
  height: toRem(6),
  borderRadius: '50%',
  backgroundColor: color.Success.Main,
  flexShrink: 0,
});

export const DraftDotPulse = style({
  '@media': {
    '(prefers-reduced-motion: no-preference)': {
      animation: `${savedPulse} 600ms ease-out`,
    },
  },
});