import { css } from "@emotion/react"
import { Theme } from "@mui/material"


export const nickNameContainerStyle = (theme: Theme) => css`
  min-width: 32px;
  max-width: 102px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: ${theme.palette.action.focus};
  border: 1px solid ${theme.palette.action.selected};
  border-radius: 4px;
  color: ${theme.palette.text.primary};
  font-size: 12px;
  font-weight: 500;
`

export const applyCursorContainerStyle = (theme: Theme) => css`
  color: ${theme.palette.text.primary};
  z-index: 10;
  position: absolute;
  user-select: none;
  pointer-events: none;
  top: 0;
  left: 0;
`
