How to use the @xstyled/styled-components.css function in @xstyled/styled-components

li a {
                display: block;
                padding-left: 3.4375rem;
                height: 2.6875rem;
                line-height: 2.6875rem;
                cursor: pointer;
                font-size: 0.875rem;
                color: #222;

                &:hover {
                    background-color: rgba(0, 126, 205, 0.1);
                }
            }
        }
    `,
    none: css({}),
};

const variantStyles = createVariant({
    key: 'collapse.variants',
    prop: 'variant',
    default: DEFAULT_VARIANT,
    variants: variants,
});

const StyledCollapse = styled('div')`
    display: block;
    box-sizing: border-box;
    font-family: base;

    ${variantStyles}

${({ position }) =>
        ({
            left: css({ flexDirection: 'row' }),
            top: css({ flexDirection: 'column' }),
            bottom: css({ flexDirection: 'column-reverse' }),
            right: css({ flexDirection: 'row-reverse' }),
        }[position || 'top'])}

${({ position }) =>
        ({
            left: css({
                flexDirection: 'column',
            }),
            top: css({
                flexDirection: 'row',
                overflowX: 'auto',
            }),
            bottom: css({
                flexDirection: 'row',
                overflowX: 'auto',
            }),
            right: css({
                flexDirection: 'column',
            }),
        }[position || 'top'])}

activeBorderColor: 'primary.base',
            spacing: '2rem',
            styles: ({ position, active }: any) =>
                css({
                    border: 'solid transparent',
                    padding: ['left', 'right'].includes(position)
                        ? '0.625rem'
                        : '0.625rem 0',
                    borderWidth: ['left', 'right'].includes(position)
                        ? '0 3px'
                        : '3px 0',
                    fontWeight: active ? 600 : undefined,
                    color: active ? undefined : 'text.label',
                }),
        },
        pane: css({}),
    },
};

export const variantStyles = createVariant({
    key: 'tabs.variants',
    prop: 'variant',
    default: 'regular',
    variants: TabVariants,
});

borderBottomRightRadius: 0,
                '&:last-of-type': {
                    marginRight: 0,
                },
            }),
            bottom: css({
                borderTop: active ? activeBorder : undefined,
                borderTopColor: active ? activeBorderColor : undefined,
                marginRight: spacing,
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                '&:last-of-type': {
                    marginRight: 0,
                },
            }),
            right: css({
                borderLeft: active ? activeBorder : undefined,
                borderLeftColor: active ? activeBorderColor : undefined,
                marginBottom: spacing,
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0,
                textAlign: 'left',
                '&:last-of-type': {
                    marginBottom: 0,
                },
            }),
        }[position])}
`;

${({
        tabTheme,
        active,
        activeBorder = tabTheme.activeBorder,
        activeBorderColor = tabTheme.activeBorderColor,
        spacing = tabTheme.spacing,
        position = 'top',
    }) =>
        ({
            left: css({
                borderRight: active ? activeBorder : undefined,
                borderRightColor: active ? activeBorderColor : undefined,
                marginBottom: spacing,
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
                textAlign: 'right',
                justifyContent: 'flex-end',
                '&:last-of-type': {
                    marginBottom: 0,
                },
            }),
            top: css({
                borderBottom: active ? activeBorder : undefined,
                borderBottomColor: active ? activeBorderColor : undefined,
                marginRight: spacing,
                borderBottomLeftRadius: 0,

position = 'top',
    }) =>
        ({
            left: css({
                borderRight: active ? activeBorder : undefined,
                borderRightColor: active ? activeBorderColor : undefined,
                marginBottom: spacing,
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
                textAlign: 'right',
                justifyContent: 'flex-end',
                '&:last-of-type': {
                    marginBottom: 0,
                },
            }),
            top: css({
                borderBottom: active ? activeBorder : undefined,
                borderBottomColor: active ? activeBorderColor : undefined,
                marginRight: spacing,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
                '&:last-of-type': {
                    marginRight: 0,
                },
            }),
            bottom: css({
                borderTop: active ? activeBorder : undefined,
                borderTopColor: active ? activeBorderColor : undefined,
                marginRight: spacing,
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                '&:last-of-type': {

justifyContent: 'flex-end',
                '&:last-of-type': {
                    marginBottom: 0,
                },
            }),
            top: css({
                borderBottom: active ? activeBorder : undefined,
                borderBottomColor: active ? activeBorderColor : undefined,
                marginRight: spacing,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
                '&:last-of-type': {
                    marginRight: 0,
                },
            }),
            bottom: css({
                borderTop: active ? activeBorder : undefined,
                borderTopColor: active ? activeBorderColor : undefined,
                marginRight: spacing,
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                '&:last-of-type': {
                    marginRight: 0,
                },
            }),
            right: css({
                borderLeft: active ? activeBorder : undefined,
                borderLeftColor: active ? activeBorderColor : undefined,
                marginBottom: spacing,
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0,
                textAlign: 'left',

${({ position }) =>
        ({
            left: css({ flexDirection: 'row' }),
            top: css({ flexDirection: 'column' }),
            bottom: css({ flexDirection: 'column-reverse' }),
            right: css({ flexDirection: 'row-reverse' }),
        }[position || 'top'])}

${({ position }) =>
        ({
            left: css({ flexDirection: 'row' }),
            top: css({ flexDirection: 'column' }),
            bottom: css({ flexDirection: 'column-reverse' }),
            right: css({ flexDirection: 'row-reverse' }),
        }[position || 'top'])}