.ga-loader {
  @apply flex flex-col items-center justify-center gap-2;

  &.ga-loader--small {
    @apply text-xs;

    .ga-loader__icon {
      @apply h-4 w-4;
    }
  }

  &.ga-loader--medium {
    @apply text-sm;

    .ga-loader__icon {
      @apply h-8 w-8;
    }
  }

  &.ga-loader--large {
    @apply text-md;

    .ga-loader__icon {
      @apply h-16 w-16;
    }
  }

  .ga-loader__icon--animated {
    @apply animate-[ga-loader-animation_1100ms_linear_infinite];
  }

  .ga-loader__icon--reduced-motion {
    @apply hidden text-(--ga-color-icon-primary);
  }

  @media (prefers-reduced-motion: reduce) {
    .ga-loader__icon--animated {
      @apply hidden;
    }

    .ga-loader__icon--reduced-motion {
      @apply block;
    }
  }

  .ga-loader__label {
    @apply text-(--ga-color-text-body);

    &:empty {
      @apply hidden;
    }
  }
}

.ga-inline-loading {
  @apply flex flex-row items-center gap-1 text-sm text-(--ga-color-text-body);

  &.ga-inline-loading--active {
    .ga-inline-loading__icon {
      @apply h-4 w-4 animate-[ga-loader-animation_1100ms_linear_infinite];
    }
  }

  &.ga-inline-loading--completed {
    .ga-inline-loading__icon {
      @apply text-(--ga-color-icon-success);
    }
  }

  &.ga-inline-loading--error {
    .ga-inline-loading__icon {
      @apply text-(--ga-color-icon-error);
    }
  }

  &.ga-inline-loading--inactive {
    @apply text-(--ga-color-text-disable-selected);
  }

  .ga-inline-loading__icon {
    @apply h-4 w-4;
  }
}

@keyframes ga-loader-animation {
  0% {
    transform: rotate(0deg);
  }

  31.82% {
    /* 350ms / 1100ms */
    transform: rotate(90deg);
  }

  63.64% {
    /* (350ms + 350ms) / 1100ms */
    transform: rotate(180deg);
  }

  81.82% {
    /* (350ms + 350ms + 200ms) / 1100ms */
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}