import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { borderRadius, iconSize, space } from '#/styles/tokens.css';
export const link = style({
display: 'block',
width: 'fit-content',
marginBlock: space.sm,
});
export const boxLink = style([link, { marginBlock: 0 }]);
export const status = style({
display: 'flex',
alignItems: 'center',
gap: space.xs,
marginBlock: space.sm,
});
export const box = style({
display: 'flex',
flexDirection: 'column',
gap: space.xs,
marginBlock: space.sm,
border: `1px solid ${colors.borderContrastLow}`,
borderRadius: borderRadius.sm,
padding: space.md,
});
export const header = style({
display: 'flex',
alignItems: 'center',
gap: space.xs,
});
export const headerText = style({
display: 'flex',
flex: 1,
flexWrap: 'wrap',
alignItems: 'center',
gap: space._2xs,
minWidth: 0,
});
export const dismiss = style({
flexShrink: 0,
margin: -space.xs,
});
export const arrowIcon = style({
width: iconSize.xs,
height: iconSize.xs,
color: colors.textContrastMedium,
});
export const warningIcon = style({
width: iconSize.sm,
height: iconSize.sm,
flexShrink: 0,
color: colors.textContrastMedium,
});