.loading-circle {
  @include flex(0, center, center, column);

  margin: 0;

  background-color: $color-grey-regular;

  overflow: hidden;

  &__heading {
    padding: 1.6rem 3.2rem;

    width: 100%;

    font-size: $font-size-larger;
    text-align: center;

    background-color: $color-primary-regular;
  }

  &__body {
    @include flex(0, center, center);

    height: 24rem;
  }
}

.circle-wrap {
  position: relative;

  width: 15rem;
  height: 15rem;

  background-color: $color-grey-light;
  border-radius: 50%;
}

.circle {
  & .mask {
    width: 15rem;
    height: 15rem;

    position: absolute;
    border-radius: 50%;

    & .fill {
      clip: rect(0px, 7.5px, 15rem, 0px);
    }
  }
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
  background-image: $color-gradient-radial;
}

.mask {
  &.full--1 {
    animation: loading-circle-fill-1 ease-in-out 3s;
    transform: rotate(172deg);
  }

  &.full--2 {
    animation: loading-circle-fill-2 ease-in-out 3s;
    transform: rotate(154deg);
  }

  &.full--3 {
    animation: loading-circle-fill-3 ease-in-out 3s;
    transform: rotate(176deg);
  }
}

.circle .fill {
  animation: loading-circle-fill-1 ease-in-out 3s;
  transform: rotate(176deg);
}

.inside-circle {
  @include flex(0, center, center);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 12rem;
  height: 12rem;

  background-color: $color-grey-dark;

  border-radius: 50%;
}

.inside-circle-text {
  font-family: $font-family-headings;
  font-size: 3.6rem;
  font-weight: 600;
  text-align: center;
  color: transparent;

  background-image: $color-gradient-regular;
  -webkit-background-clip: text;
  background-clip: text;

  transform: translateY(4px);
}

@keyframes loading-circle-fill-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(172deg);
  }
}

@keyframes loading-circle-fill-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(154deg);
  }
}

@keyframes loading-circle-fill-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(176deg);
  }
}
