@use "../variables" as *;

// Win9x Style Progress Bar

.retro-progress {
  width: 100%;
  background: var(--retro-progress-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  height: 22px;
  position: relative;
  margin: 1em 0;
  box-shadow: none;
  overflow: hidden;
}

// Determinate bar: solid blue
.retro-progress-bar {
  background: var(--retro-progress-bar-bg);
  height: 100%;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 2px solid var(--retro-border-light);
  border-radius: var(--retro-border-radius);
  box-shadow: none;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}

.retro-progress-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--retro-spacing-xs);
  font-size: var(--retro-font-size-sm);
  line-height: 1.2;
  color: var(--retro-text);
  font-family: var(--retro-font);
  pointer-events: none;
  user-select: none;
  // The label straddles two backgrounds -- the filled bar and the empty track
  // -- and those are always opposite in lightness, so no flat colour works for
  // both. A text-shadow halo was the previous answer, and it lost: over the
  // striped navy bar the dark glyphs and their light fringe simply mixed. The
  // label now carries its own plate in the track colour, so it is read against
  // one known surface whatever the bar is doing underneath it. Bordered,
  // because an unbordered plate on a striped bar reads as a gap in the stripes.
  background: var(--retro-progress-bg);
  border: 1px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
}

// Striped/animated variant: blocky blue segments
.retro-progress-bar-striped {
  background: repeating-linear-gradient(
    90deg,
    var(--retro-primary) 0 12px,
    var(--retro-bg) 12px 18px
  );
  animation: retro-progress-blocks 0.8s linear infinite;
}

@keyframes retro-progress-blocks {
  0% { background-position: 0 0; }
  100% { background-position: 18px 0; }
}

// Colour variants for the filled bar. Only the default primary bar existed.
@each $n in "success", "danger", "warning", "info" {
  .retro-progress-bar-#{$n} {
    background: var(--retro-#{$n});
  }
}