@keyframes spinner {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

[role="progressbar"] {
  width: size(5);
  display: inline-block;

  // TODO replace this with aspect-ratio when possible
  &:not([aria-valuenow])::after {
    content: "";
    width: 100%;
    padding-bottom: 100%;
    display: block;
    background: url("~images/loading-rainbow.svg") no-repeat;
    background-size: cover;
    animation: spinner 1s infinite linear;
  }

  &[aria-valuenow] {
    border: $border;
    border-radius: 50%;
    background: none;
    &:not([aria-valuenow="100"])::before {
      content: "";
      padding-bottom: 100%;
      width: 100%;
      display: block;
      border-radius: 50%;
      background-color: full-color(accent);
      transform: rotate(45deg);

      // Extracted nested calculations as postcss-calc gives compile time errors otherwise
      // See https://github.com/postcss/postcss-calc/issues/104
      --min-progress-25: min(var(--progress), 0.25);
      --min-progress-50: min(var(--progress), 0.5);
      --min-progress-75: min(var(--progress), 0.75);
      clip-path: polygon(
        50% 50%,
        0 0,
        calc(min(var(--progress), 0.25) * 400%) 0,
        calc(min(var(--progress), 0.25) * 400%) calc((max(0.25, var(--min-progress-50)) - 0.25) * 400%),
        calc(min(var(--progress), 0.25) * 400% - (max(0.5, var(--min-progress-75)) - 0.5) * 400%)
          calc((max(0.25, var(--min-progress-50)) - 0.25) * 400%),
        calc(var(--min-progress-25) * 400% - (max(0.5, var(--min-progress-75)) - 0.5) * 400%)
          calc((max(0.25, var(--min-progress-50)) - 0.25) * 400% - (max(0.75, var(--progress)) - 0.75) * 400%)
      );
    }
  }

  &[aria-valuenow="100"] {
    @include bg-color(accent);
    &::after {
      @extend %icon, .icon-outline-check;
      min-height: 0;
      padding-bottom: 80%;
      width: 80%;
      margin: 10%;
      height: 0;
    }
  }
}
