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


export const applyItemStyle = (theme: Theme) => css`
  display: flex;
  padding: 0 0 0 16px;
  height: 56px;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
  border: solid 1px ${theme.palette.background.default};
  position: relative;
  background-color: ${theme.palette.action.focus};
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  &:hover {
    box-shadow: 0 4px 10px 0 ${theme.palette.action.focus};
    background-color: ${theme.palette.action.focus};
    border-color: ${theme.palette.action.focus};
  }
`

export const nameStyle = (theme: Theme) => css`
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: ${theme.palette.text.primary};
 
`

export const titleContainerStyle = css`
  display: inline-flex;
  flex-direction: column;
  margin-left: 12px;
`

export const subTitleStyle = css`
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  color: ${globalColor("grayBlue-04")};
`
