@use "sass:math";
@use "design";

.loading {
  display: grid;
  grid-template-columns: auto;
  align-content: center;
  justify-content: center;

  &.large {
    --spinner-size: 1.9em;
    padding: design.$space-200;
  }

  &.noDelay {
    --spinner-delay: 0;
  }
}

.loading {
  $duration: 1s;

  --spinner-size: 1.1em;
  --spinner-color: currentColor;
  --spinner-delay: 500ms;

  // Necessary to keep container of spinner exactly the size of spinner
  .spinnerWrap {
    display: inline-block;
    line-height: 0;
    text-align: center;

    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 750ms;
    animation-delay: var(--spinner-delay);
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  .spinner {
    display: inline-block;
    animation-name: anim-spinner;
    animation-duration: $duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    opacity: 0.75;

    .circle {
      width: var(--spinner-size);
      height: calc(var(--spinner-size) / 2);
      overflow: hidden;
    }

    .circleInner {
      transform: rotate(45deg);
      border-radius: 50%;
      border: calc(var(--spinner-size) / 8) solid var(--spinner-color);
      border-right: calc(var(--spinner-size) / 8) solid transparent;
      border-bottom: calc(var(--spinner-size) / 8) solid transparent;
      width: 100%;
      height: 200%;
      animation-name: anim-circle-1;
      animation-duration: $duration;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.5, 1);
    }

    .circle2 {
      transform: rotate(180deg);

      & .circleInner {
        animation-name: anim-circle-2;
      }
    }

    @keyframes anim-circle-1 {
      from {
        transform: rotate(60deg);
      }
      to {
        transform: rotate(205deg);
      }
    }
    @keyframes anim-circle-2 {
      from {
        transform: rotate(30deg);
      }
      to {
        transform: rotate(-115deg);
      }
    }
    @keyframes anim-spinner {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

.message {
  margin-top: design.$space-100;
}