/* Shared by the pre-app screen, Element Plus masks and inline loading icons. */
.system-loader,
html .el-loading-spinner::before,
html .el-icon.is-loading::before {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('./loading-smile.svg') center / contain no-repeat;
  mask: url('./loading-smile.svg') center / contain no-repeat;
}

.system-loader {
  width: 8em;
  height: 8em;
  flex: none;
}

#loader-wrapper {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--el-bg-color, #f5f7fb);
  color: var(--el-color-primary, #1f5fb8);
  font: 16px / 1.5 "PingFang SC", "Microsoft YaHei", sans-serif;
}

#loader-wrapper .load_title {
  margin: 0;
  padding: 0 24px;
  color: var(--el-text-color-regular, #5b6f8c);
  text-align: center;
  font-size: 14px;
}

html .el-loading-mask .el-loading-spinner {
  margin-top: 0;
  transform: translateY(-50%);
  color: var(--el-color-primary, #1f5fb8);
}

html .el-loading-mask.is-fullscreen .el-loading-spinner {
  margin-top: 0;
}

html .el-loading-spinner::before {
  content: "";
  width: 64px;
  height: 64px;
  vertical-align: middle;
}

html .el-loading-mask.is-fullscreen .el-loading-spinner::before {
  width: 128px;
  height: 128px;
}

html .el-loading-spinner > .circular {
  display: none;
  animation: none;
}

html .el-icon.is-loading {
  animation: none;
}

html .el-icon.is-loading > svg {
  visibility: hidden;
}

html .el-icon.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
}

html.dark #loader-wrapper {
  background: var(--el-bg-color, #141414);
}

html.dark #loader-wrapper .load_title {
  color: var(--el-text-color-regular, #cfd3dc);
}


/* Image documents do not consistently inherit live motion-preference changes. */
@media (prefers-reduced-motion: reduce) {
  .system-loader,
  html .el-loading-spinner::before,
  html .el-icon.is-loading::before {
    -webkit-mask-image: url('./loading-smile-static.svg');
    mask-image: url('./loading-smile-static.svg');
  }
}

.loaded #loader-wrapper { display: none; }