/*
    THE AI MARK'S OWN STYLESHEET.

    Everything Components/Shared/AiMark.razor needs and nothing else, in its own file rather than a
    section of utilities.css: a shared utility file is where a rule goes to be edited by somebody
    who has never opened the component.

    AMBER, because it is the one accent and this is the one thing on a data screen that costs money
    per press. The glyph is a SHAPE, so it takes --sv-accent-fill; the letters are TEXT, so they
    take --sv-accent, which is darkened on paper where the fill fails AA. That way round or the
    light theme carries unreadable amber lettering.

    WHAT IT DOES NOT OWN. .sv-btn is a utility seventy-odd screens set and stays in utilities.css;
    the last rule here only says what the mark does when it is inside one.
*/

.sv-ai-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  flex: 0 0 auto;
}

.sv-ai-mark__glyph {
  width: 14px;
  height: 14px;
  fill: var(--sv-accent-fill);
  flex: 0 0 auto;
}

.sv-ai-mark__text {
  font: 500 10px/1 var(--sv-font-mono);
  letter-spacing: 0.1em;
  color: var(--sv-accent);
}

/* Inside a button the words are already there, so the glyph carries it alone and needs the optical
   nudge a leading icon always needs. */
.sv-ai-mark--compact {
  margin-right: 2px;
}

/* ON A FILLED ACCENT SURFACE THE MARK TAKES THE SURFACE'S OWN INK. The glyph is --sv-accent-fill and
   an .sv-btn--primary is filled with the same token, so a mark hosted on one is amber on amber: it
   is drawn, it is announced, and nobody can see it. currentColor rather than --sv-on-accent, so the
   mark follows whatever the host sets its text to and cannot drift from the words beside it. */
.sv-btn--primary .sv-ai-mark__glyph {
  fill: currentColor;
}

.sv-btn--primary .sv-ai-mark__text {
  color: currentColor;
}