.loader {
  --spinnerOneColorLight: #08616D;
  --spinnerOneColorDark: #52BBB7;
  --spinnerTwoColorLight: #FD9F43;
  --spinnerTwoColorDark: #FD9F43;
  --spinnerThreeColorLight: #C14838;
  --spinnerThreeColorDark: #C14838;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #232329;
  z-index: 99999;
  transition: opacity 0.5s ease-in-out;
}

.loader__message {
  /*display: none;*/
  color: rgb(255, 255, 255);
  font-family: sans-serif;
  font-size: 14px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 80px));
  width: 100%;
}

.loader__message span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(1)translate(-50%, -50%);
  transform-origin: 0;
  transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
  opacity: 1;
}

.loader__message span.loader__message__item--fade-in {
  transform: scale(1.5)translate(-50%, -100%);
  opacity: 0;
}

.loader__message span.loader__message__item--fade-out {
  opacity: 0;
  transition: all 1s cubic-bezier(0.5, 1, 0.89, 1);
  transform: scale(0)translate(-50%, 50%);
}

.loader__message a {
  color: var(--spinnerOneColorDark);
  &:hover {
    color: var(--spinnerTwoColorDark);
  }
  &:active {
    color: var(--spinnerThreeColorDark);
  }
}

.loader--hidden {
  opacity: 0;
  pointer-events: none;
}

.loader--hidden.loader--paused .loader__inner {
  animation-play-state: paused;
}

.loader__spinner {
  width: 72px;
  height: 72px;

  border-radius: 50%;
  perspective: 800px;
}

.loader__inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
}

.loader__inner--one {
  left: 0;
  top: 0;
  animation: loader__rotate--one 1s linear infinite;
  border-bottom: 3px solid var(--spinnerOneColorDark);
}

.loader__inner--two {
  right: 0;
  top: 0;
  animation: loader__rotate--two 1s linear infinite;
  border-right: 3px solid var(--spinnerTwoColorDark);
}

.loader__inner--three {
  right: 0;
  bottom: 0;
  animation: loader__rotate--three 1s linear infinite;
  border-top: 3px solid var(--spinnerThreeColorDark);
}

@keyframes loader__rotate--one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes loader__rotate--two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes loader__rotate--three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

body.theme-light .loader {
  background-color: #FFFFFF;
}

body.theme-light .loader__message {
  color: #19181B;
}

body.theme-light .loader__message a {
  color: var(--spinnerOneColorLight);
  &:hover {
    color: var(--spinnerTwoColorLight);
  }
  &:active {
    color: var(--spinnerThreeColorLight);
  }
}

body.theme-light .loader__inner--one {
  border-bottom: 3px solid var(--spinnerOneColorLight);
}

body.theme-light .loader__inner--two {
  border-right: 3px solid var(--spinnerTwoColorLight);
}

body.theme-light .loader__inner--three {
  border-top: 3px solid var(--spinnerThreeColorLight);
}

@media (prefers-color-scheme: light) {
  body:not(.theme-dark) .loader {
    background-color: #FFFFFF;
  }

  body:not(.theme-dark) .loader__message {
    color: #19181B;
  }

  body:not(.theme-dark) .loader__message a {
    color: var(--spinnerOneColorLight);
    &:hover {
      color: var(--spinnerTwoColorLight);
    }
    &:active {
      color: var(--spinnerThreeColorLight);
    }
  }

  body:not(.theme-dark) .loader__inner--one {
    border-bottom: 3px solid var(--spinnerOneColorLight);
  }

  body:not(.theme-dark) .loader__inner--two {
    border-right: 3px solid var(--spinnerTwoColorLight);
  }

  body:not(.theme-dark) .loader__inner--three {
    border-top: 3px solid var(--spinnerThreeColorLight);
  }
}