import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { emojiFontFamily, space } from '#/styles/tokens.css';
const DIALOG_PADDING = space.lg;
const ROW_BLOCK_PADDING = space.md;
export const header = style({
boxSizing: 'border-box',
display: 'flex',
flexShrink: 0,
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: colors.bg,
paddingTop: DIALOG_PADDING,
paddingBottom: space.md,
paddingInline: DIALOG_PADDING,
});
export const title = style({
display: 'flex',
minWidth: 0,
});
export const closeButton = style({
margin: -space.sm,
});
export const tabs = style({
borderBottomWidth: 1,
borderBottomStyle: 'solid',
borderBottomColor: colors.borderContrastLow,
paddingBottom: DIALOG_PADDING,
});
export const list = style({
paddingBlock: DIALOG_PADDING - ROW_BLOCK_PADDING,
});
export const row = style({
boxSizing: 'border-box',
paddingBlock: ROW_BLOCK_PADDING,
paddingInline: DIALOG_PADDING,
width: '100%',
});
export const rowButton = style([
row,
{
appearance: 'none',
display: 'block',
border: 'none',
background: 'transparent',
textAlign: 'left',
cursor: 'pointer',
selectors: {
'&:hover': { backgroundColor: colors.contrast_25 },
'&:focus-visible': { outline: `2px solid ${colors.primary_500}`, outlineOffset: -2 },
},
},
]);
/** Name column: takes the free space beside the avatar and truncates, pushing the emoji to the row's end. */
export const nameColumn = style({
display: 'flex',
flex: 1,
flexDirection: 'column',
minWidth: 0,
});
export const emojiGlyph = style({
flexShrink: 0,
lineHeight: 1,
fontFamily: emojiFontFamily,
fontSize: 24,
});