/* Originally pulled from the LoadingBars component */

/* Default */
.pure-css-loading-bars {
  --loading-bars-height: 2rem;
  --gsg-primary: #0077B3;
  --loading-bars-color: var(--gsg-primary);
}

.pure-css-loading-bars.xs {
  --loading-bars-height: 1rem;
}

.pure-css-loading-bars.sm {
  --loading-bars-height: 1.5rem;
}

.pure-css-loading-bars.md {
  --loading-bars-height: 2rem;
}

.pure-css-loading-bars.lg {
  --loading-bars-height: 3rem;
}

.pure-css-loading-bars.xl {
  --loading-bars-height: 5rem;
}

.pure-css-loading-bars {
  --loading-bars-height: 2rem;
  --loading-bars-width: -webkit-calc(var(--loading-bars-height) / 8);
  --loading-bars-width: calc(var(--loading-bars-height) / 8);
  --loading-bars-radius: -webkit-calc(var(--loading-bars-width) / 2);
  --loading-bars-radius: calc(var(--loading-bars-width) / 2);
  height: var(--loading-bars-height);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: auto 0 auto;
  align-items: center;
  justify-content: center;
}

/*
 * Custom properties are parsed permissively — the browser stores any token
 * stream, even unsupported functions like round(), so a later round()
 * declaration always overwrites an earlier calc() fallback.  At computed-value
 * time the stored round() becomes invalid and the property resolves to its
 * initial (empty) value, making the bars invisible.
 *
 * To avoid this, the base rule uses plain calc() and the round() upgrade is
 * guarded by @supports so it only applies when the browser can actually
 * evaluate it.
 *
 * Regular properties (.bar height) don't have this problem — the browser
 * validates immediately and drops unknown functions, so the calc() fallback
 * declared just before the round() line is kept.
 */
@supports (width: round(nearest, 1px, 1px)) {
  .pure-css-loading-bars {
    --loading-bars-width: round(nearest, calc(var(--loading-bars-height) / 8), 1px);
    --loading-bars-radius: round(nearest, calc(var(--loading-bars-width) / 2), 1px);
  }
}

.bar {
  background-color: var(--loading-bars-color);
  display: inline-block;
  /*
   * Fallback for pre-round() browsers. The round() override is dropped on those
   * engines because height is a regular property, not a custom one.
   */
  height: -webkit-calc((var(--loading-bars-height) / 2) - var(--loading-bars-radius));
  height: calc((var(--loading-bars-height) / 2) - var(--loading-bars-radius));
  height: round(down, -webkit-calc((var(--loading-bars-height) / 2) - var(--loading-bars-radius)), 1px);
  height: round(down, calc((var(--loading-bars-height) / 2) - var(--loading-bars-radius)), 1px);
  margin: 0 max(var(--loading-bars-width) / 4, 1px);
  width: var(--loading-bars-width);
}

.bar:nth-child(1) {
  -webkit-animation: top-bars-78382e1c 1s ease-in-out infinite;
  animation: top-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 0);
  animation-delay: calc(0.09s * 0);
  border-top-left-radius: var(--loading-bars-radius);
  border-top-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
}

.bar:nth-child(3) {
  -webkit-animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 0);
  animation-delay: calc(0.09s * 0);
  border-bottom-left-radius: var(--loading-bars-radius);
  border-bottom-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
}

.bar:nth-child(4) {
  -webkit-animation: top-bars-78382e1c 1s ease-in-out infinite;
  animation: top-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 1);
  animation-delay: calc(0.09s * 1);
  border-top-left-radius: var(--loading-bars-radius);
  border-top-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
}

.bar:nth-child(6) {
  -webkit-animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 1);
  animation-delay: calc(0.09s * 1);
  border-bottom-left-radius: var(--loading-bars-radius);
  border-bottom-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
}

.bar:nth-child(7) {
  -webkit-animation: top-bars-78382e1c 1s ease-in-out infinite;
  animation: top-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 2);
  animation-delay: calc(0.09s * 2);
  border-top-left-radius: var(--loading-bars-radius);
  border-top-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
}

.bar:nth-child(9) {
  -webkit-animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 2);
  animation-delay: calc(0.09s * 2);
  border-bottom-left-radius: var(--loading-bars-radius);
  border-bottom-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
}

.bar:nth-child(10) {
  -webkit-animation: top-bars-78382e1c 1s ease-in-out infinite;
  animation: top-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 3);
  animation-delay: calc(0.09s * 3);
  border-top-left-radius: var(--loading-bars-radius);
  border-top-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
}

.bar:nth-child(12) {
  -webkit-animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  animation: bottom-bars-78382e1c 1s ease-in-out infinite;
  -webkit-animation-delay: -webkit-calc(0.09s * 3);
  animation-delay: calc(0.09s * 3);
  border-bottom-left-radius: var(--loading-bars-radius);
  border-bottom-right-radius: var(--loading-bars-radius);
  -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
}

@-webkit-keyframes top-bars-78382e1c {
  0% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  }

  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  }
}

@keyframes top-bars-78382e1c {
  0% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  }

  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / 4 - var(--loading-bars-radius)));
  }
}

@-webkit-keyframes bottom-bars-78382e1c {
  0% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  }

  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  }
}

@keyframes bottom-bars-78382e1c {
  0% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  }

  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-webkit-calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
    transform: translateY(calc(var(--loading-bars-height) / -4 + var(--loading-bars-radius)));
  }
}