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

import { CARD_ASPECT_RATIO } from '#/lib/constants/post';

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

export const frame = style({
	display: 'block',
	position: 'relative',
	overflow: 'hidden',
});

export const cardFrame = style({
	aspectRatio: String(CARD_ASPECT_RATIO),
	width: '100%',
});

export const image = style({
	display: 'block',
	position: 'absolute',
	inset: 0,
	width: '100%',
	height: '100%',
	objectFit: 'cover',
});

export const loading = style({ opacity: 0 });

export const fallback = style({
	display: 'flex',
	position: 'absolute',
	inset: 0,
	alignItems: 'center',
	justifyContent: 'center',
	backgroundColor: vars.palette.contrast_25,
	color: vars.palette.contrast_400,
});

export const imageIcon = style({
	width: iconSize._3xl,
	height: iconSize._3xl,
});