import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { mediaBorder } from '#/styles/media-border.css';
import { borderRadius, space } from '#/styles/tokens.css';
export const outer = style({
display: 'flex',
flexDirection: 'row',
gap: space.xs,
});
export const tile = style([
mediaBorder,
{
position: 'relative',
flexGrow: 1,
maxWidth: 100,
aspectRatio: '1',
borderRadius: borderRadius.xs,
backgroundColor: vars.palette.contrast_25,
overflow: 'hidden',
},
]);
export const tileEmpty = style({
backgroundColor: 'black',
});
export const image = style({
display: 'block',
width: '100%',
height: '100%',
objectFit: 'cover',
});
export const blurred = style({
transform: 'scale(1.2)',
filter: 'blur(12px)',
});
export const overlay = style({
display: 'flex',
position: 'absolute',
inset: 0,
alignItems: 'center',
justifyContent: 'center',
});
export const gifBadge = style({
position: 'absolute',
bottom: 5,
left: 5,
zIndex: 2,
borderRadius: 6,
backgroundColor: 'rgba(0, 0, 0, 0.75)',
paddingBlock: 3,
paddingInline: 6,
});
export const gifBadgeText = style({
lineHeight: 1,
color: 'white',
fontSize: 7,
fontWeight: 600,
});