@use "sass:math";

$mac-spinner-duration: 800ms;
$mac-spinner-color: var(--fg-color);
$mac-spinner-size: 24px;

.mac-spinner {
  width: $mac-spinner-size;
  height: $mac-spinner-size;
  position: relative;
  transform: scale(0.8);

  .bar-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(50%, $mac-spinner-size * 0.25);
  }

  .bar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 2px;
    height: $mac-spinner-size * 0.25;
    background: $mac-spinner-color;
    transform-origin: bottom center;
    border-radius: 2px;
    opacity: 0.05;
    animation: opacity-pulse $mac-spinner-duration infinite linear;
  }

  @for $i from 1 through 12 {
    .bar:nth-child(#{$i}) {
      transform: rotate(($i - 1) * 30deg) translateY(-$mac-spinner-size * 0.25);
      animation-delay: ($i - 1) * math.div($mac-spinner-duration, 12);
    }
  }

  &.light .bar {
    background: white;
  }
}

@keyframes opacity-pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.01;
  }
}
