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

export const editableTextWrapperStyle =(theme:Theme) => css`
  width: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-left"4px;
  &:hover {
    background-color: ${theme.palette.background.default};
    cursor: pointer;

    svg {
      opacity: 1;
    }
    .text-container {
      padding-left: 16px;
    }
  }
  transition: all 200ms;
`

export const textStyle =(theme:Theme) => css`
  height: 100%;
  display: inline-flex;
  min-height: 32px;
  font-size: 14px;
  align-items: center;
  box-sizing: border-box;
  max-lines: 1;
  white-space: nowrap;
  border-radius: 8px;
  color: ${theme.palette.text.primary};
  font-weight: 500;
  position: relative;
  svg {
    width: 14px;
    height: 14px;
    margin-left: 8px;
    opacity: 0;
    color: ${theme.palette.text.primary};
    transition: all 200ms;
  }
  transition: all 200ms;
`

export const innerTextStyle = (theme:Theme)=>css`
  position: relative;
  display: flex;
  color:${theme.palette.text.primary};
  align-items: center;
  svg {
    position: absolute;
    right: -22px;
  }
`
