/**
 * @file
 * Thin progress bar styles.
 *
 * Part of zaira/page-loader (see zaira.libraries.yml and
 * zaira_page_attachments() in zaira.theme). Gradient is derived entirely
 * from the configured brand color (set via --thin-progress-color by
 * thin-progress-bar.js) so the bar always matches the active theme's
 * palette. Solid-color fallback is declared first: if color-mix() is
 * unsupported, the gradient declaration below is invalid and ignored
 * entirely, which would otherwise leave the bar transparent (showing the
 * page background as the bar).
 */

.thin-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--thin-progress-color, #C09A52);
  background: linear-gradient(90deg, var(--thin-progress-color, #C09A52), color-mix(in srgb, var(--thin-progress-color, #C09A52) 55%, white));
  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: var(--thin-progress-color, #C09A52);
  background: linear-gradient(90deg, var(--thin-progress-color, #C09A52), color-mix(in srgb, var(--thin-progress-color, #C09A52) 55%, white));
  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;
}