import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { layered } from '#/styles/layers';
import { components } from '#/styles/layers.css';
import { recipe } from '#/styles/recipe';
import { zIndex } from '#/styles/tokens.css';
export const portal = style(
layered(components, {
zIndex: zIndex.modal,
}),
);
export const backdrop = style(
layered(components, {
position: 'fixed',
inset: 0,
transitionDuration: '150ms',
transitionProperty: 'opacity',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
selectors: {
'&[data-starting-style], &[data-ending-style]': { opacity: 0 },
},
}),
);
export const viewport = style(
layered(components, {
boxSizing: 'border-box',
display: 'flex',
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
alignItems: 'center',
justifyContent: 'center',
padding: 16,
overflowY: 'auto',
}),
);
export const popup = recipe(
{
base: {
boxSizing: 'border-box',
position: 'relative',
transitionDuration: '200ms',
transitionProperty: 'opacity, transform',
transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
border: `1px solid ${vars.palette.contrast_200}`,
borderRadius: 20,
boxShadow: vars.shadow.lg,
backgroundColor: vars.palette.contrast_0,
padding: 24,
width: '100%',
selectors: {
'&[data-starting-style], &[data-ending-style]': { transform: 'scale(0.95)', opacity: 0 },
},
},
defaultVariants: { size: 'default' },
variants: {
size: {
default: { maxWidth: 320 },
wide: { maxWidth: 420 },
},
},
},
{ debugId: 'promptPopup', layer: components },
);
export const title = style({
display: 'block',
paddingBottom: 4,
});
export const description = style({
display: 'block',
paddingBottom: 16,
});
export const content = style({
paddingBottom: 8,
});
export const rows = style({
display: 'flex',
flexDirection: 'column',
gap: 14,
paddingBottom: 16,
});
export const row = style({
display: 'flex',
gap: 12,
alignItems: 'flex-start',
});
export const rowIcon = style({
flexShrink: 0,
width: 22,
height: 22,
color: vars.palette.contrast_500,
});
export const rowText = style({
paddingBlock: 1,
});
export const actions = style({
display: 'flex',
flexDirection: 'column',
gap: 8,
width: '100%',
});