import { style } from '@vanilla-extract/css';
import { colorMix } from '#/styles/color-mix';
import { vars } from '#/styles/contract.css';
const hairline = style({
boxSizing: 'border-box',
borderWidth: 1,
borderStyle: 'solid',
'@media': {
'(min-resolution: 2dppx)': { borderWidth: 0.5 },
},
});
export const mediaBorder = style([
hairline,
{
borderColor: vars.palette.contrast_100,
selectors: {
'.theme--dark &, .theme--dim &': {
borderColor: colorMix(vars.palette.contrast_300, '60%'),
},
},
},
]);
export const mediaBorderOpaque = style([hairline, { borderColor: vars.palette.contrast_100 }]);
export const mediaOverlay = style({
position: 'absolute',
inset: 0,
pointerEvents: 'none',
});