//+----------------------------------------------------------------------
// 当前页面变量
//+----------------------------------------------------------------------


.#{$empty} {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: var(--xxl) 0;
  --imageWidth: #{size(160px)};

  --empty-fill-color-0: #ffffff;
  --empty-fill-color-1: #fcfcfd;
  --empty-fill-color-2: #f8f9fb;
  --empty-fill-color-3: #f7f8fc;
  --empty-fill-color-4: #eeeff3;
  --empty-fill-color-5: #edeef2;
  --empty-fill-color-6: #e9ebef;
  --empty-fill-color-7: #e5e7e9;
  --empty-fill-color-8: #e0e3e9;
  --empty-fill-color-9: #d5d7de;

  .empty-image {
    width: var(--imageWidth);

    svg,
    img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    svg {
      fill: var(--text-light);
    }
  }

  .empty-description {
    margin-top: var(--lg);
    color: var(--text-secondary);
  }

}

.dark-mode {
  .#{$empty} {
    --empty-fill-color-0: #000000;
    --empty-fill-color-1: #4b4b52;
    --empty-fill-color-2: #36383d;
    --empty-fill-color-3: #1e1e20;
    --empty-fill-color-4: #262629;
    --empty-fill-color-5: #202124;
    --empty-fill-color-6: #212224;
    --empty-fill-color-7: #1b1c1f;
    --empty-fill-color-8: #1c1d1f;
    --empty-fill-color-9: #18181a;
  }
}