/* ==========================================================================
   Loading Bar - Reusable loading indicator
   ========================================================================== */

/* Base loading bar styles */
.loading-bar {
  height: 0;
  overflow: hidden;
  transition: height var(--transition-normal);
  background: linear-gradient(
    90deg,
    var(--np-color-inverse-surface) 0%,
    var(--np-color-inverse-surface) 33%,
    var(--np-color-outline-variant) 50%,
    var(--np-color-inverse-surface) 67%,
    var(--np-color-inverse-surface) 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0%;
}

/* Active state - controlled by parent .is-loading class or direct .is-active */
.is-loading > .loading-bar,
.loading-bar.is-active {
  height: var(--space-1);
  animation: loading-shimmer var(--transition-loading) linear infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}

/* Page loading bar - positioned at top of main-content, ignoring padding */
.page-loading-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 10;
}