.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-overlay);
  z-index: 2000;
}

.loading-overlay.open {
  display: flex;
}

.loader {
  --size: 1px;
  --color-1: var(--color-accent-primary);
  --color-2: var(--color-accent-secondary);

  font-size: calc(48 * var(--size));
  color: var(--color-1);
  display: inline-block;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  position: relative;
}

.loader:after {
  content: '';
  height: calc(4 * var(--size));
  width: 0%;
  display: block;
  background: var(--color-2);
  border-radius: var(--border-radius-full);
  animation: 1.4s lineGrow ease-in-out infinite;
}

@keyframes lineGrow {
  to {
    width: 100%;
  }
}