import { jsx as _jsx } from "react/jsx-runtime";
// @ts-nocheck
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
const EmptytableContainer = styled.tr `
  width: 100%;
  padding: ${spacing.r20};
  box-sizing: border-box;
  display: table;
  table-layout: fixed;

  ${(props) => {
    const brand = props.theme;
    return css `
      background: ${brand.backgroundLevel2};
      border-top: 1px solid ${brand.border};
    `;
}}
`;
const EmptytableContainerDiv = styled.div `
  width: 100%;
  padding: ${spacing.r20};
  box-sizing: border-box;
  display: table;
  table-layout: fixed;

  ${(props) => {
    const brand = props.theme;
    return css `
      background: ${brand.backgroundLevel2};
      border-top: 1px solid ${brand.border};
    `;
}}
`;
// Using !important as the only way to prioritize this over the general tr td styling that may be defined in the apps
const EmptytableContent = styled.td `
  text-align: center !important;
  border: none !important;
  ${(props) => {
    const brand = props.theme;
    return css `
      background: ${brand.backgroundLevel2};
      color: ${brand.textSecondary};
    `;
}}
`;
const EmptytableContentDiv = styled.div `
  text-align: center !important;
  border: none !important;
  ${(props) => {
    const brand = props.theme;
    return css `
      background: ${brand.backgroundLevel2};
      color: ${brand.textSecondary};
    `;
}}
`;
function EmptyTable(props) {
    if (props.useDiv)
        return (_jsx(EmptytableContainerDiv, { className: "sc-emptytable", children: _jsx(EmptytableContentDiv, { children: props.children }) }));
    return (_jsx(EmptytableContainer, { className: "sc-emptytable", children: _jsx(EmptytableContent, { children: props.children }) }));
}
export { EmptyTable };
