import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { space } from '#/styles/tokens.css';
const DIALOG_PADDING = space._2xl;
export const popup = style({
maxWidth: 420,
height: 600,
});
export const header = style({
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
flexShrink: 0,
gap: space.xs,
backgroundColor: colors.bg,
paddingTop: DIALOG_PADDING,
paddingBottom: space.lg,
paddingInline: DIALOG_PADDING,
});
export const groupsLabel = style({
display: 'flex',
flexDirection: 'column',
paddingTop: space.sm,
paddingBottom: space.xs,
paddingInline: DIALOG_PADDING,
});
export const loading = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
paddingBottom: space._2xl,
});
export const row = style({
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
gap: space.sm,
alignItems: 'center',
justifyContent: 'space-between',
paddingBlock: space.sm,
paddingInline: DIALOG_PADDING,
width: '100%',
});
export const rowMain = style({
display: 'flex',
flex: 1,
flexDirection: 'row',
gap: space.sm,
alignItems: 'center',
minWidth: 0,
});
export const rowText = style({
display: 'flex',
flex: 1,
flexDirection: 'column',
minWidth: 0,
});