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

import * as colors from '../../colors.css';

export const loading_squares = style({
	display:        'flex',
	justifyContent: 'center',
	width:          '100%',
	marginTop:      '4em',
	height:         'max-content',
});

const animation = keyframes({
	'0%':   { backgroundColor: colors.background2 },
	'50%':  { backgroundColor: colors.foreground  },
	'100%': { backgroundColor: colors.background2 },
});

export const square = style({
	margin:                  '0 1em',
	width:                   '1em',
	height:                  '1em',
	backgroundColor:         colors.background2,
	animationName:           animation,
	animationDuration:       '2s',
	animationIterationCount: 'infinite',
});

export const loading = [0, 1, 2, 3, 4].map(index =>
	style([square, {
		animationDelay: `${0.2 * index}s`
	}])
);