/**
 * @file
 * Thin progress bar styles.
 */

.thin-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--thin-progress-color, #4a6cf7), #6e8efb, #a777e3);
  z-index: 9999;
  transition: width 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.thin-progress-bar.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  background-size: 10px 10px;
  animation: thin-progress-move 0.4s linear infinite;
}

.thin-progress-bar.complete {
  background: linear-gradient(90deg, var(--thin-progress-color, #4a6cf7), #6e8efb, #a777e3);
  transition: opacity 0.8s ease 0.5s;
}

@keyframes thin-progress-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 10px 0;
  }
}

/* Ultra-thin variant - 1px height */
.thin-progress-bar.ultra-thin {
  height: 1px;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
}

.thin-progress-bar.ultra-thin.loading::after {
  background-size: 8px 8px;
}

/* Admin theme adjustments */
.adminimal-admin-toolbar .thin-progress-bar {
  top: 39px;
}

.toolbar-horizontal .thin-progress-bar {
  top: 39px;
}

.toolbar-vertical .thin-progress-bar {
  top: 39px;
  left: 240px;
}

.toolbar-tray-open.toolbar-horizontal .thin-progress-bar {
  top: 79px;
}

/* Ensure progress bar is above most content but below admin toolbar */
.thin-progress-bar {
  z-index: 999;
}

.toolbar-oriented .thin-progress-bar {
  z-index: 499;
}