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

export const LiveChipText = style({
  color: color.Critical.Main,
});

export const CallStatus = style([
  {
    padding: `${toRem(6)} ${config.space.S200}`,
    borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
  },
]);

export const ControlDivider = style({
  height: toRem(16),
});

const speakerPulse = keyframes({
  '0%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
  '50%': { boxShadow: `0 0 0 ${toRem(4)} ${color.Success.ContainerActive}` },
  '100%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
});

export const SpeakerAvatarOutline = style({
  '@media': {
    '(prefers-reduced-motion: no-preference)': {
      animation: `${speakerPulse} 1200ms ease-in-out infinite`,
    },
    '(prefers-reduced-motion: reduce)': {
      boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
    },
  },
});