/* brand-display.css - styles for the brand.css custom properties. */

/* logo */
.brand-logo {
  --_art: var(--brand-logo-light);
  --_ar:  var(--brand-logo-light-ar, 3);
  --_box: var(--brand-logo-light-box, transparent);
  --_pad: var(--brand-logo-light-pad, 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--brand-logo-pad, var(--_pad));
  background: var(--_box);
  border-radius: var(--wa-border-radius-m, .5rem);
}
.brand-logo__art {
  display: var(--brand-logo-art, block);
  block-size: var(--logo-h, 2.5rem);
  inline-size: calc(var(--logo-h, 2.5rem) * var(--_ar));
  max-inline-size: var(--logo-max, calc(var(--logo-h, 2.5rem) * 6));
  background: var(--_art) center / contain no-repeat;
}

/* name shown in place of a missing logo, within the same bounds */
.brand-logo::after {
  content: var(--brand-name, "");
  display: var(--brand-logo-word, none);
  align-self: center;
  max-inline-size: var(--logo-max, calc(var(--logo-h, 2.5rem) * 6));
  font: 800 calc(var(--logo-h, 2.5rem) * .62) / 1 var(--brand-font, system-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* dark surfaces use the dark variant. :where() keeps these at single-class
   weight so the --on-dark / --on-light modifiers below can override them. */
:where(:root.wa-dark, .wa-dark) .brand-logo {
  --_art: var(--brand-logo-dark);
  --_ar:  var(--brand-logo-dark-ar, 3);
  --_box: var(--brand-logo-dark-box, transparent);
  --_pad: var(--brand-logo-dark-pad, 0);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not(.wa-light)) .brand-logo {
    --_art: var(--brand-logo-dark);
    --_ar:  var(--brand-logo-dark-ar, 3);
    --_box: var(--brand-logo-dark-box, transparent);
    --_pad: var(--brand-logo-dark-pad, 0);
  }
}

/* force a variant for a known surface, regardless of theme: --on-dark for a
   logo on a colored/dark splash in light mode, --on-light for a logo on a
   light card in dark mode */
.brand-logo--on-dark {
  --_art: var(--brand-logo-dark);
  --_ar:  var(--brand-logo-dark-ar, 3);
  --_box: var(--brand-logo-dark-box, transparent);
  --_pad: var(--brand-logo-dark-pad, 0);
}
.brand-logo--on-light {
  --_art: var(--brand-logo-light);
  --_ar:  var(--brand-logo-light-ar, 3);
  --_box: var(--brand-logo-light-box, transparent);
  --_pad: var(--brand-logo-light-pad, 0);
}

/* size slots */
.brand-logo--sm   { --logo-h: 1.25rem; }
.brand-logo--nav  { --logo-h: 1.75rem; }
.brand-logo--card { --logo-h: 2.75rem; }
.brand-logo--hero { --logo-h: 4rem; }

/* brand-color hero */
.brand-hero {
  background: var(--brand-hero, var(--brand-primary));
  color: var(--brand-hero-text);
}
.brand-hero .brand-logo {
  --_art: var(--brand-hero-logo);
  --_ar:  var(--brand-hero-logo-ar, 3);
  --_box: var(--brand-hero-chip, transparent);
  --_pad: var(--brand-hero-chip-pad, 0);
}

/* text emphasis */
.brand-emphasis {
  color: var(--brand-emph, currentColor);
  background: var(--brand-emph-bg, transparent);
  border-radius: .2em;
  padding: var(--brand-emph-pad, 0);
}
:root.wa-dark .brand-emphasis,
.wa-dark .brand-emphasis {
  color: var(--brand-emph-dark, currentColor);
  background: var(--brand-emph-dark-bg, transparent);
  padding: var(--brand-emph-dark-pad, 0);
}
@media (prefers-color-scheme: dark) {
  :root:not(.wa-light) .brand-emphasis {
    color: var(--brand-emph-dark, currentColor);
    background: var(--brand-emph-dark-bg, transparent);
    padding: var(--brand-emph-dark-pad, 0);
  }
}

/* wordmark fallback (no logo on file) */
.brand-wordmark {
  display: inline-block;
  max-inline-size: var(--logo-max, calc(var(--logo-h, 2.5rem) * 6));
  font: 800 calc(var(--logo-h, 2.5rem) * .62) / 1 var(--brand-font, system-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-wordmark::after { content: var(--brand-name); }