// Loader component - Loading spinners and animations

/**
 * @section Spinner Loader
 */

/** @public Base spinner loader */
.loader {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid hsl(var(--muted));
  border-right-color: hsl(var(--foreground));
  border-radius: 50%;
  animation: loader-spin 0.75s linear infinite;

  // Sizes
  &.loader-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
  }

  &.loader-lg {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
  }

  &.loader-xl {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
  }

  // Variants
  &.loader-primary {
    border-color: hsl(var(--primary) / 0.3);
    border-right-color: hsl(var(--primary));
  }

  &.loader-secondary {
    border-color: hsl(var(--secondary) / 0.3);
    border-right-color: hsl(var(--secondary));
  }

  &.loader-success {
    border-color: hsl(var(--success) / 0.3);
    border-right-color: hsl(var(--success));
  }

  &.loader-destructive {
    border-color: hsl(var(--destructive) / 0.3);
    border-right-color: hsl(var(--destructive));
  }
}

/** @public Centered loader container - min-height 100px */
.loader-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100px;
}

/** @public Three dots loader with span between pseudo-elements */
.loader-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  &::before,
  &::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: currentColor;
    border-radius: 50%;
    animation: loader-dots 0.8s ease-in-out infinite;
  }

  &::before {
    animation-delay: -0.3s;
  }

  &::after {
    animation-delay: -0.15s;
  }

  span {
    width: 0.5rem;
    height: 0.5rem;
    background: currentColor;
    border-radius: 50%;
    animation: loader-dots 0.8s ease-in-out infinite;
  }

  &.loader-sm {
    gap: 0.25rem;
    &::before,
    &::after,
    span {
      width: 0.25rem;
      height: 0.25rem;
    }
  }

  &.loader-lg {
    gap: 0.75rem;
    &::before,
    &::after,
    span {
      width: 0.75rem;
      height: 0.75rem;
    }
  }
}

// Animations
@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader-dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}