import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { recipe } from '#/styles/recipe';
import { iconSize, space } from '#/styles/tokens.css';
export const toggle = style({
appearance: 'none',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: space.md,
paddingInline: space.md,
border: 'none',
background: 'none',
cursor: 'pointer',
});
export const chevron = recipe(
{
base: {
display: 'inline-flex',
marginLeft: space._2xs,
},
variants: {
expanded: {
true: { transform: 'rotate(-180deg)' },
},
},
},
{ debugId: 'systemMessageGroupChevron' },
);
export const chevronDownIcon = style({
width: iconSize.xs,
height: iconSize.xs,
color: colors.textContrastMedium,
});