/* Custom styling for AsciiDoc's built-in UI macros (currently: btn:[]) on docs.fenecon.de.
   Applies site-wide (desktop and mobile alike) -- kept separate from mobile-overrides.css,
   which is scoped to responsive/device-driven layout tweaks rather than macro styling. */

/* Asciidoctor renders btn:[Label] as <b class="button">Label</b>. The theme's base
   stylesheet only wraps it in literal "[" / "]" characters with no visual button styling,
   so remove those brackets and give every btn:[] a real button look instead. Two distinct
   styles are supported:
   - btn:[Label]                     -- default style, mimicking a button as it appears
                                        inside the FENECON App itself (for documentation
                                        steps like "tap SAVE"). Used by far the most often,
                                        so no role is needed for it.
   - [.docs-btn]#btn:[Label]#        -- docs site style, mimicking the PDF download button
                                        in the page header. Used rarely, so it requires
                                        this opt-in role.
   Both styles use FENECON's brand cyan (--color-oem-primary) for their blue parts. */
.doc b.button::after {
  content: none;
}

.doc b.button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  /* Shrinking the button's own font-size (rather than the surrounding text's) scales
     every other em-based measurement below (height, padding, icon size) down with it,
     since "em" on any property but font-size resolves against the element's own
     computed font-size -- this keeps the button from looking thicker/taller than a
     normal line of body text, while shrinking the label text and icon to match. */
  font-size: 0.8em;
  white-space: nowrap;
  font-weight: 400;
}

/* Default: app-mimicking style, matching the FENECON App's own filled buttons (cyan
   background, white uppercase regular-weight text, moderately rounded corners -- not a
   full pill). No icon badge here. */
.doc b.button {
  height: 1.68em;
  padding: 0 0.5em;
  border-radius: 0.35em;
  overflow: visible;
  background: var(--color-oem-primary, #0fcdf8);
  border: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* See the equivalent comment in the docs-btn rule below for why this is needed --
     re-measured against real descenders for this variant's own (smaller) height. */
  vertical-align: 0.271em;
}

.doc b.button::before {
  content: none;
}

/* Docs site style, opt-in via [.docs-btn]#btn:[Label]#, e.g. the PDF download button.
   Rectangular with soft rounded corners (not a full pill). The cyan icon section is a
   full-height/width "strip" flush against the left/top/bottom edges (clipped to the
   button's own rounded corners via overflow: hidden), rather than a small padded icon
   badge. Explicitly resets every property the default style above sets, since CSS
   cascades per-property (not per-rule) and this selector doesn't automatically undo
   properties it doesn't mention itself. */
.doc .docs-btn b.button {
  /* Sized to match the app-style button's own height exactly (2.1em * 0.8 = 1.68em),
     so the two button styles sit at the same height in-line, with every other
     em-based dimension below scaled down by that same 0.8 factor to match. */
  height: 1.68em;
  padding: 0 0.72em 0 0;
  border-radius: 0.6em;
  overflow: hidden;
  background: #e1e1e1;
  border: none;
  color: var(--color-oem-secondary, #00204e);
  text-transform: none;
  letter-spacing: normal;
  /* An inline-flex box with no baseline-participating children falls back to using its
     own bottom margin edge as its baseline, which the browser then aligns with the
     surrounding text's baseline -- letting the button's bottom edge sink below where
     descenders (g, j, p, q, y) end and making it look like it "sags" out of the line.
     Nudging it up by this amount (measured against real descenders, then expressed
     relative to the button's own font-size so it keeps scaling correctly) keeps the
     bottom edge flush with the descender depth instead, for better optical centering. */
  vertical-align: 0.23em;
}

/* Cyan icon strip using FontAwesome's real "download" glyph (solid style, codepoint
   \f019) via the "Font Awesome 6 Free" webfont the theme's UI bundle already loads
   site-wide -- the same icon used e.g. by icon:download[] elsewhere in the docs.
   Asciidoctor's btn:[] macro only provides the label text with no icon slot, so the
   icon is added here via this pseudo-element instead. */
.doc .docs-btn b.button::before {
  content: "\f019";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.92em;
  height: 100%;
  margin-right: 0.48em;
  flex-shrink: 0;
  background-color: var(--color-oem-primary, #0fcdf8);
  color: #fff;
  font: normal normal 900 1em/1 "Font Awesome 6 Free";
}