import { createGlobalStyle, css } from 'styled-components';
import BgEmpty from '../../../assets/bg-empty.png';
import LoadingSvg from '../../../assets/icon-info-loading.svg';
const loadingStyle = css `
  .ag-theme-alpine {
    .ag-overlay-loading-wrapper {
      background-color: transparent !important;
    }
    .ag-overlay-loading-center {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: ${({ theme }) => theme.agGrid.odd.bg};

      height: 100%;
      // 框架顶部有16px的边距
      padding: 0px !important;

      border: none;
      box-shadow: none;

      &.no-data {
        background-color: transparent !important;

        .loading-desc {
          color: ${({ theme }) => theme.text.tertiary};
        }
      }

      .loading-icon {
        width: 36px;
        height: 24px;

        transform: rotate(45deg);
        animation: antRotate 1.2s infinite linear;

        background: url(${LoadingSvg}) no-repeat center center/100% 100%;
      }
      .loading-desc {
        color: ${({ theme }) => theme.text.secondary};
        margin-left: 8px;

        font-size: 14px;
        line-height: 20px;
      }
      .no-data-icon {
        width: 36px;
        height: 24px;

        background: url(${BgEmpty}) no-repeat center center/100% 100%;
      }
    }
  }
`;
const LoadingStyle = createGlobalStyle `${loadingStyle}`;
export default LoadingStyle;
