import styled from '@emotion/styled';
import { css, useTheme } from '@emotion/react';
export const CollapsePanelCSS = (noSchema) => {
    const theme = useTheme();
    return css `
    ${noSchema && css `
      box-shadow: 0 0 0 2px ${theme.colorError};
      background-color: ${theme.colorErrorBg};
    `}
  `;
};
export const EntityListStyled = styled.div `
  margin: 10px 0;
`;
export const EntityFormStyled = styled.div `
  text-align: center;
`;
export const DragOverlayStyled = styled.div(({ theme }) => css `
  background-color: ${theme.colorBgContainer};
  border-radius: ${theme.borderRadiusLG}px;
`);
export const HolderOutlinedCSS = () => {
    const theme = useTheme();
    return css `
    padding: 2px 1px;
    border-radius: 1px;

    margin-right: 3px;

    &:hover {
      background-color: ${theme.colorBorderSecondary};
      box-shadow: 0 0 0 2px ${theme.colorBorderSecondary};

      cursor: grab;
    }
  `;
};
export const EntityPickerCSS = css `
  margin-top: 10px;
`;
