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

export const resourceChooseContainerStyle = css`
  display: flex;
  align-items: center;
  padding: 8px 1px;
  width: 100%;
  justify-content:center;
  overflow-x: auto;
  flex-direction: row;
`

export const resourceTitleStyle =(theme:Theme)=> css`
  flex-grow: 1;
  font-size: 14px;
  text-align:left;
  padding-left:12px;
  font-weight: 500;
  color: ${theme.palette.text.secondary};
`

export const resourceEndStyle = css`
  justify-content: flex-start;
  flex-grow: 1;
  width:100%;

  margin-left:36px;
  display: flex;
  flex-shrink: 1;
  flex-direction: row;
`

export const spaceStyle =(theme:Theme)=> css`
  border-bottom: 0.5px solid ${theme.palette.action.focus};
`
