.loader-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  vertical-align: center;
  text-align: center;
  top: 50%;
  left: 50%;
  gap: 20px;
  transform: translate(-50%, -50%);
  margin-top: -28px;

  p {
    text-align: center;
    user-select: none;

    &:after {
      content: '.';
      color: hsl(var(--text-secondary));
      animation: dots 1s steps(5, end) infinite;

      @keyframes dots {
        0%, 20% {
          color: rgba(0, 0, 0, 0);
          text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
            .5em 0 0 rgba(0, 0, 0, 0);
        }
        40% {
          color: hsl(var(--text-secondary));
          text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
            .5em 0 0 rgba(0, 0, 0, 0);
        }
        60% {
          text-shadow:
            .25em 0 0 hsl(var(--text-secondary)),
            .5em 0 0 rgba(0, 0, 0, 0);
        }
        80%, 100% {
          text-shadow:
            .25em 0 0 hsl(var(--text-secondary)),
            .5em 0 0 hsl(var(--text-secondary));
        }
      }
    }
  }

  .loader {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    border: 4px solid hsl(var(--text));
    border-left-color: transparent;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    animation: SpinAnimation 1s linear infinite;

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

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