/*
 * .ks-icon is 1em square, so an icon takes the size of the text it sits in.
 *
 * :not([width]) — a rule outranks a presentation attribute whatever its specificity,
 * so a plain .ks-icon would beat the width="96" the renderer prints for an explicit
 * size. The renderer strips width and height unless a size was asked for, which is
 * what makes the attribute a reliable signal. :where() adds no specificity, keeping
 * .ks-icon--<set> and .card .ks-icon as easy to write as against a bare .ks-icon.
 */
.ks-icon { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.ks-icon:not(:where([width])) { width: 1em; height: 1em; }

/*
 * Font Awesome is the one library that is not square: 512 tall, 384 to 640 wide. A 1em
 * box would letterbox it, not distort it, and the drawing would read as smaller than
 * every other set. Beats the rule above on source order alone, so it must not gain weight.
 */
.ks-icon--fontawesome:not(:where([width])),
.ks-icon--fontawesome-brands:not(:where([width])) { width: auto; height: 1em; }