Is there a way to override css style like @include and @mixin of sass in emotion?

Question

In Next.js, I am working on converting CSS from sass and postCSS to emotion. I'm new to Emotion, so I don't know how to modify the Mixin defined in Sass.

//common.ts

import { css } from "@emotion/react";
export const Pretendard = (props: IPretendard) => css`
  font-family: "Pretendard" !important;
  font-size: ${props.font} * 0.625 + rem !important;
  font-weight: ${props.weight};
  line-height: ${props.font} * 1.5 + rem;
  color: ${props.color};
`;

The above common.ts is defined like Mixin of Sass.

//CheckBox.tsx

...

const Span = styled.span`
  //How do I use this part by importing Pretendard defined in common.ts?
  @include Pretendard(1.4, 400, GY900);

  position: absolute;
  margin-left: 6px;
  top: -3px;
  cursor: pointer;
`

return (
  <Span>text</Span>
);

Thanks for letting me know how to override not only @emotion/styled but also @emotion/css!