// See COPYRIGHT.md for copyright information

#ixv {
  .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 85%);
    z-index: 10;
  }

  .loader .text {
    padding-top: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: var(--colour-loader);
    font-size: large;
    font-family: sans-serif;
  }

  .loader.loading .text::after,
  .loader.loading .text::before {
    margin: 0 0 0 -30px;
    height: 60px;
    width: 60px;
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    border-radius: 500rem;
    border-style: solid;
    border-width: 3px;
    box-shadow: 0 0 0 1px transparent;
  }

  .loader.loading .text::before {
    border: 3px solid rgb(255 255 255 / 10%);
  }

  .loader.loading .text::after {
    -webkit-animation: loader 4s steps(64);
    animation: loader 4s steps(64);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-color: var(--colour-loader) transparent transparent;
  }

  @keyframes loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}