/* Brand mark master. The layer that says how big a logo is allowed to be, so that the answer is not
   an inline `style` attribute on each of the eighteen places one appears.

   Sizing a mark by one axis only works while every brand's mark is square, which is a property of
   Nimblr's files and not a property of logos. A wordmark is around seven times wider than it is
   tall, and `width: 50px` on one of those draws it about seven pixels tall. So a slot here is a box
   the mark fits inside: both axes capped, both axes free to be smaller, aspect never touched. For a
   square mark the result is identical to the single-axis rule it replaces, which is why this could
   be swapped in without moving anything on the current brand.

   The steps are the values the portal already used. See server/brand.js for the marks themselves. */

.brand-mark {
    /* Caps only. An upper bound on each axis leaves the mark at its own aspect and lets whichever
       axis runs out first decide, which is the whole trick. There is deliberately no `width: auto`
       here: it looks like it belongs, and it releases the height Bulma computes for a mark used as a
       button, which moved the conversations filter by two pixels when it was in. */
    object-fit: contain;
}

/* The assistant's face on a wizard step, at the two sizes the steps ask for. The modifiers are
   `is-mark-*` and not `is-small`/`is-medium` on purpose: those two are Bulma button size modifiers,
   and one of these marks is also a button, so the short names shrank its font and with it its
   height. */
.brand-mark.is-mark-small {
    max-width: 50px;
    max-height: 50px;
}

.brand-mark.is-mark-medium {
    max-width: 85px;
    max-height: 85px;
}