import { createGlobalStyle, css } from 'styled-components';
const layoutStyle = css `
  .ant-layout {
    background-color: ${({ theme }) => theme.background.system};

    .ant-layout-header {
      background-color: ${({ theme }) => theme.background.nav};
      &,
      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & p,
      & span {
        color: white;
      }
    }

    .ant-layout-content {
      background-color: ${({ theme }) => theme.background.system};
    }

    .ant-layout-sider {
      background-color: ${({ theme }) => theme.background.menu};
    }
  }
`;
const LayoutStyle = createGlobalStyle `${layoutStyle}`;
export default LayoutStyle;
