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

const focusPulse = keyframes({
  '0%': {
    outlineColor: color.Primary.Main,
  },
  '100%': {
    outlineColor: 'transparent',
  },
});

export const SettingTileFocus = style({
  borderRadius: config.radii.R400,
  outline: `${config.borderWidth.B300} solid ${color.Primary.Main}`,
  outlineOffset: config.space.S100,
  animation: `${focusPulse} 1.2s ease-out forwards`,
});