import { keyframes, styleVariants } from '@vanilla-extract/css';

import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
import { iconSize } from '#/styles/tokens.css';

const spin = keyframes({ to: { transform: 'rotate(360deg)' } });

export const spinner = recipe(
	{
		base: {
			display: 'inline-flex',
			animation: `${spin} 500ms linear infinite`,
		},
		defaultVariants: {
			color: 'white',
		},
		variants: {
			color: {
				default: {
					color: vars.palette.contrast_900,
				},
				white: {
					color: '#fff',
				},
			},
		},
	},
	{ debugId: 'spinner' },
);

export const icon = styleVariants(iconSize, (size) => ({ width: size, height: size }));