cinny/src/app/features/call-status/styles.css.ts

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

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

export const SrOnly = style({
  position: 'absolute',
  width: 1,
  height: 1,
  padding: 0,
  margin: -1,
  overflow: 'hidden',
  clip: 'rect(0, 0, 0, 0)',
  whiteSpace: 'nowrap',
  border: 0,
});

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}`,
    },
  },
});