/**
 * Info box (CKEditor 5 plugin nsb_infobox).
 *
 * Markup: <div class="infobox infobox--{variant} infobox--icon-{icon}">
 *           <div class="infobox__content">…</div>
 *         </div>
 * Spacing follows the download paragraph (.button.download in the nsb theme);
 * font size and line height are inherited from the surrounding text.
 * Icons are inline SVG masks coloured via --infobox-icon-color, so no icon
 * font is needed on the front end or inside the editor.
 */

.infobox {
  --infobox-bg: #fff;
  --infobox-border: #c4cdd5;
  --infobox-icon-color: #0460c1;
  --infobox-icon-size: 20px;
  /* How far (in icon heights) the icon reaches below the first baseline. */
  --infobox-icon-drop: 0.25;

  position: relative;
  display: flex;
  align-items: first baseline;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px;
  color: #333;
  background: var(--infobox-bg);
  border: 1px solid var(--infobox-border);
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(22, 29, 37, 0.16);
}

.infobox:last-child {
  margin-bottom: 0;
}

/* Specificity beats the theme's spacing on p, ol, ul and headings (headings
   carry their top spacing as padding). */
.infobox .infobox__content > :first-child {
  margin-top: 0;
  padding-top: 0;
}

.infobox .infobox__content > :last-child,
.infobox .infobox__content > :last-child > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Icon: a flex item aligned to the first text baseline, so it lines up with a
   heading as well as with a paragraph. A flex item without text gets its
   baseline from its bottom border edge, so the negative top margin shrinks the
   icon's "ascent" below the text's and keeps it from pushing the content down;
   the transform then lowers the drawing so it sits centred on the lowercase
   letters of body text. */
.infobox::before {
  content: "";
  flex: none;
  width: var(--infobox-icon-size);
  height: var(--infobox-icon-size);
  margin-top: calc(var(--infobox-icon-size) * -0.25);
  transform: translateY(calc(var(--infobox-icon-size) * var(--infobox-icon-drop)));
  background-color: var(--infobox-icon-color);
  -webkit-mask: var(--infobox-icon) center / contain no-repeat;
  mask: var(--infobox-icon) center / contain no-repeat;
}

/* Large headings have taller capitals, so the icon drops less to stay centred
   on them. Browsers without :has() keep the body-text offset. */
.infobox:has(> .infobox__content > h2:first-child) {
  --infobox-icon-drop: 0;
}

.infobox:has(> .infobox__content > h3:first-child) {
  --infobox-icon-drop: 0.12;
}

.infobox__content {
  flex: 1 1 auto;
  min-width: 0;
}

.infobox--icon-none::before {
  display: none;
}

/* Variants (weiss uses the defaults). */
.infobox--blau {
  --infobox-bg: #e6edf5;
  --infobox-border: #e6edf5;
  --infobox-icon-color: #004288;
}

.infobox--gelb {
  --infobox-bg: #fff6d6;
  --infobox-border: #fff6d6;
  --infobox-icon-color: #333;
}

.infobox--grau {
  --infobox-bg: #f1f3f3;
  --infobox-border: #f1f3f3;
  --infobox-icon-color: #333;
}

/* Icons (24x24 paths, own drawings). */
.infobox--icon-info {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1.25 6.5h2.5V17h-2.5zM12 6.6a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z'/></svg>");
}

.infobox--icon-tipp {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2zm0 2a5 5 0 0 1 2.9 9.07l-.9.64V16h-4v-2.29l-.9-.64A5 5 0 0 1 12 4zm-3 15h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1z'/></svg>");
}

.infobox--icon-hinweis {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5 1.5 20.5h21L12 2.5zm0 4 7.04 12H4.96L12 6.5zM11 10h2v4.5h-2V10zm1 5.6a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/></svg>");
}

.infobox--icon-person {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm0 8.5c4.42 0 8 2.24 8 5V21H4v-2.5c0-2.76 3.58-5 8-5zm0 2c-3.47 0-6 1.6-6 3v.5h12V18.5c0-1.4-2.53-3-6-3z'/></svg>");
}

.infobox--icon-zitat {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5A6.5 6.5 0 0 1 10.5 6v2.2A4.3 4.3 0 0 0 6.6 11H10v7H4v-5.5zm9.5 0A6.5 6.5 0 0 1 20 6v2.2a4.3 4.3 0 0 0-3.9 2.8H20v7h-6.5v-5.5z'/></svg>");
}

.infobox--icon-check {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm4.3 4.6 1.4 1.4-6.7 6.7-3.7-3.7 1.4-1.4 2.3 2.3 5.3-5.3z'/></svg>");
}

.infobox--icon-stern {
  --infobox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 2.5 2.95 6.3 6.9.8-5.1 4.7 1.35 6.8L12 17.7 5.9 21.1l1.35-6.8-5.1-4.7 6.9-.8L12 2.5zm0 4.7-1.65 3.55-3.9.45 2.9 2.65-.75 3.85L12 15.4l3.4 2.3-.75-3.85 2.9-2.65-3.9-.45L12 7.2z'/></svg>");
}

@media screen and (min-width: 769px) {
  .infobox {
    --infobox-icon-size: 24px;

    gap: 16px;
    padding: 24px 32px;
  }
}