@import './theme/default.pcss';

.zent-page-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .zent-page-mask {
    width: 100%;
    height: 100%;
    outline: 0;
    background-color: $theme-mask-1;

    &::before,
    &::after {
      position: absolute;
      content: ' ';
      top: 50%;
      left: 50%;
      width: 44px;
      height: 44px;
      margin-left: -22px;
      margin-top: -22px;
      border: 2px solid $theme-mask-2;
      border-radius: 50%;
    }

    &::before {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTBDNjMxRjA4NEMwMTFFNUJGNUU4ODhEMTJBNEZCOUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTBDNjMxRjE4NEMwMTFFNUJGNUU4ODhEMTJBNEZCOUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMEM2MzFFRTg0QzAxMUU1QkY1RTg4OEQxMkE0RkI5QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMEM2MzFFRjg0QzAxMUU1QkY1RTg4OEQxMkE0RkI5QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgmgW78AAAFoUExUReUAEuUAEuYPIOklNeYQIukkNeYPIv76+/zo6vrP0/i9wvWcpeYHGuYHG/akrPezuexLWfajq/Buevza3utDUf3r7ecTJP/7/OgcLveor+YGGveyuPOJk/WWn+knOPrIzf3t7uUBFfSPmeo0Re1SYOotPvJ7hu1UYe5gbvSNl+1YZ+9odetGVfF1gO1WY/nHzPBteO5ZZvvW2eo1Rvzh5Pi4ve5ea/Brd+cWKPSRmvWZoukoOv719v3y8+tEU+UEF+YNH+cRI+kmNvnEyfaiqvF3g+cRJOktPexCUPWVn/nEyvaep/3m6Os5SecSJu9kcP73+POHkugdLvF4g/vZ3PKDjecVJ/vR1fadpuouP+YGGOYMH/Btef3x8uovP/nBxexHV/avtf3l5+xMW+5fbfOLlfOLlvahqeYKHPza3eggMOgeL/nCxvJ+iO1VYvJ/i/J9h+tHVugeMP/9/fzd4OkoOOgcLf///0a13loAAAB4dFJOU///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AHxXGIwAAAF3SURBVHja7NdVbwMxDADgeut27ZW5HTMzc8fMzMzM+fvbWu/tsltyliZN8VPy4E+JnESxjRGHTYEKVKACFfjHYHV8vs5HCAbgK7rpwNYUCMdk4HsaLKECZ9Me1FOBtwguUYGjCM5QgXcI5lKBfgSniUDNjmALEViIXtJBBE4huL5IBJYh+EZ09fpyECwlAr3owdDV5yyy0X5xttuZsACefIPgvn8q8OA4Txp0gGFcSoO1xmBUFiwy9iAsC05ywApJ8IHjQY8UGGnieRAUBTXnkcYmuB6UC4GBMf8NwAsb54PLIuBpKmWQsSw+2CsCplMyGMvkg1Ui4M4vwEYRMNsc7BJ6HOzm4DU1WBySAn+osk68QnglBveZVJX5W/ZSgyFqUKc+Nk5icIDRgjV7jNHc5e2thsdNvU3052BUlOhc84prxOz/xQHdKcKDD2M8vLCWcPZb6aRwUTFW2XHuW9Wst2au5+HDYP5BTLW3ClSgAhX4f8EPAQYAjrzx/JGco8gAAAAASUVORK5CYII=");
      background-size: 40px;
      z-index: 1;
    }

    &::after {
      border-color: $theme-error-2 transparent transparent;
      animation: loading 0.6s linear infinite;
      background-color: white;
    }
  }
}

.zent-loading-container-static {
  position: relative;

  .zent-page-mask {
    background: $theme-mask-2;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}