/**
 * WMS shared text loader — usage: <div class="wms-loader"></div> or wmsSetButtonLoading(btn, true|false).
 * Letter-bounce via text-shadow; string must stay 10 chars (Laddar....) to match keyframe steps.
 */

.wms-loader {
  --w: 10ch;
  --wms-loader-c: #18A0A8;
  --wms-loader-jump: -10px;
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 1.4em;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  text-shadow:
    calc(0 * var(--w)) 0 var(--wms-loader-c),
    calc(-1 * var(--w)) 0 var(--wms-loader-c),
    calc(-2 * var(--w)) 0 var(--wms-loader-c),
    calc(-3 * var(--w)) 0 var(--wms-loader-c),
    calc(-4 * var(--w)) 0 var(--wms-loader-c),
    calc(-5 * var(--w)) 0 var(--wms-loader-c),
    calc(-6 * var(--w)) 0 var(--wms-loader-c),
    calc(-7 * var(--w)) 0 var(--wms-loader-c),
    calc(-8 * var(--w)) 0 var(--wms-loader-c),
    calc(-9 * var(--w)) 0 var(--wms-loader-c);
  animation: wms-loader-l20 2s infinite linear;
}

.wms-loader::before {
  content: "Laddar....";
}

/* Button / compact: fit btn height. */
.wms-loader.wms-loader--btn,
.btn .wms-loader,
.wms-btn-loading .wms-loader {
  font-size: 12px;
  line-height: 1.25em;
  --wms-loader-jump: -6px;
}

/*
 * Filled / dark buttons: white letter-bounce (teal #18A0A8 disappears on primary blue).
 * Set on .wms-loader itself — it owns --wms-loader-c, so a parent currentColor override never wins.
 */
.btn-primary .wms-loader,
.btn-danger .wms-loader,
.btn-success .wms-loader,
.btn-dark .wms-loader,
.btn-secondary .wms-loader,
.btn-info .wms-loader,
.btn-primary.wms-btn-loading .wms-loader,
.btn-danger.wms-btn-loading .wms-loader,
.btn-success.wms-btn-loading .wms-loader,
.btn-dark.wms-btn-loading .wms-loader,
.btn-secondary.wms-btn-loading .wms-loader,
.btn-info.wms-btn-loading .wms-loader {
  --wms-loader-c: #fff;
}

.wms-loader.wms-loader--section {
  display: block;
  margin: 0.75rem auto;
  font-size: 1.25rem;
  --wms-loader-jump: -8px;
}

@keyframes wms-loader-l20 {
  9.09% {
    text-shadow:
      calc(0 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  18.18% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  27.27% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  36.36% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  45.45% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  54.54% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  63.63% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  72.72% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  81.81% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c),
      calc(-9 * var(--w)) 0 var(--wms-loader-c);
  }
  90.90% {
    text-shadow:
      calc(0 * var(--w)) 0 var(--wms-loader-c),
      calc(-1 * var(--w)) 0 var(--wms-loader-c),
      calc(-2 * var(--w)) 0 var(--wms-loader-c),
      calc(-3 * var(--w)) 0 var(--wms-loader-c),
      calc(-4 * var(--w)) 0 var(--wms-loader-c),
      calc(-5 * var(--w)) 0 var(--wms-loader-c),
      calc(-6 * var(--w)) 0 var(--wms-loader-c),
      calc(-7 * var(--w)) 0 var(--wms-loader-c),
      calc(-8 * var(--w)) 0 var(--wms-loader-c),
      calc(-9 * var(--w)) var(--wms-loader-jump) var(--wms-loader-c);
  }
}

/* Chunked upload progress: red → orange → green */
.wms-chunk-progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}
.wms-chunk-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.2s ease, background-color 0.25s ease;
  background-color: #dc3545; /* start: red */
}
.wms-chunk-progress-bar.is-start {
  background-color: #dc3545;
}
.wms-chunk-progress-bar.is-mid {
  background-color: #fd7e14; /* mid: orange */
}
.wms-chunk-progress-bar.is-done {
  background-color: #198754; /* complete: green */
}

/* Inventering WIP aliases (same look, keep existing markup working) */
.inv-wip-xml-chunk-progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}
.inv-wip-xml-chunk-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.2s ease, background-color 0.25s ease;
  background-color: #dc3545;
}
.inv-wip-xml-chunk-progress-bar.is-start {
  background-color: #dc3545;
}
.inv-wip-xml-chunk-progress-bar.is-mid {
  background-color: #fd7e14;
}
.inv-wip-xml-chunk-progress-bar.is-done {
  background-color: #198754;
}