/* The filling-S loader (see logo-loader.js). */
.logo-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 0;
  color: #55655e;
  font-size: 0.95rem;
}

.logo-loader-mark {
  position: relative;
  height: 72px;
  aspect-ratio: 219 / 240;
}

.logo-loader-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.logo-loader-base {
  filter: grayscale(1);
  opacity: 0.16;
}

.logo-loader-fill {
  clip-path: polygon(0% 100%, 100% 100%);
}

.logo-loader.compact {
  gap: 8px;
  padding: 16px 0;
  font-size: 0.85rem;
}

.logo-loader.compact .logo-loader-mark {
  height: 40px;
}

.logo-loader.inline {
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  font-size: 0.85rem;
}

.logo-loader.inline .logo-loader-mark {
  height: 20px;
}