/* User Provided Stylesheet */

/* Custom admonitions inspired by the LHCb Starterkit, adapted to the
 * Jupyter Book 2 / MyST-MD book theme.
 *
 * MyST renders an admonition as
 *   <aside class="myst-admonition ... <custom classes>">
 *     <div class="myst-admonition-header ..."><svg class="myst-admonition-header-icon"/> Title</div>
 *     <div class="myst-admonition-content ...">...</div>
 *   </aside>
 * (a collapsible `dropdown` admonition uses <details>/<summary> instead).
 * The `:class:` option of the directive is appended to the element classes,
 * so the tutorial classes below can be styled directly. Icons use the
 * Font Awesome 4.7 sheet that the theme already loads. */

.myst-admonition.prereq {
  --adm-fg: #8a6d3b;
  --adm-bg: #fcf8e3;
  --adm-fg-dark: #e6c98a;
  --adm-icon: "\f135"; /* rocket */
}

.myst-admonition.callout {
  --adm-fg: #214f78;
  --adm-bg: #9bc2e4;
  --adm-fg-dark: #9bc2e4;
  --adm-icon: "\f129"; /* info */
}

.myst-admonition.challenge {
  --adm-fg: #3c763d;
  --adm-bg: #dff0d8;
  --adm-fg-dark: #a3d39c;
  --adm-icon: "\f024"; /* flag */
}

.myst-admonition.solution {
  --adm-fg: #a94442;
  --adm-bg: #f2dede;
  --adm-fg-dark: #e8a3a1;
  --adm-icon: "\f00c"; /* check */
}

.myst-admonition.objectives {
  --adm-fg: #8a6d3b;
  --adm-bg: #fcf8e3;
  --adm-fg-dark: #e6c98a;
  --adm-icon: "\f201"; /* line-chart */
}

.myst-admonition.keypoints {
  --adm-fg: #3c763d;
  --adm-bg: #dff0d8;
  --adm-fg-dark: #a3d39c;
  --adm-icon: "\f084"; /* key */
}

.myst-admonition.discussion {
  --adm-fg: #31708f;
  --adm-bg: #d9edf7;
  --adm-fg-dark: #9fd0e6;
  --adm-icon: "\f0f3"; /* bell */
}

/* Box border */
.myst-admonition.prereq,
.myst-admonition.callout,
.myst-admonition.challenge,
.myst-admonition.solution,
.myst-admonition.objectives,
.myst-admonition.keypoints,
.myst-admonition.discussion {
  border-left-color: var(--adm-fg);
}

/* Title bar */
.myst-admonition.prereq > .myst-admonition-header,
.myst-admonition.callout > .myst-admonition-header,
.myst-admonition.challenge > .myst-admonition-header,
.myst-admonition.solution > .myst-admonition-header,
.myst-admonition.objectives > .myst-admonition-header,
.myst-admonition.keypoints > .myst-admonition-header,
.myst-admonition.discussion > .myst-admonition-header {
  color: var(--adm-fg);
  background-color: var(--adm-bg);
}

html.dark .myst-admonition.prereq > .myst-admonition-header,
html.dark .myst-admonition.callout > .myst-admonition-header,
html.dark .myst-admonition.challenge > .myst-admonition-header,
html.dark .myst-admonition.solution > .myst-admonition-header,
html.dark .myst-admonition.objectives > .myst-admonition-header,
html.dark .myst-admonition.keypoints > .myst-admonition-header,
html.dark .myst-admonition.discussion > .myst-admonition-header {
  color: var(--adm-fg-dark);
  background-color: color-mix(in srgb, var(--adm-fg) 30%, transparent);
}

/* Replace the theme's SVG icon with the Starterkit Font Awesome glyphs */
.myst-admonition.prereq > .myst-admonition-header > .myst-admonition-header-icon,
.myst-admonition.callout > .myst-admonition-header > .myst-admonition-header-icon,
.myst-admonition.challenge > .myst-admonition-header > .myst-admonition-header-icon,
.myst-admonition.solution > .myst-admonition-header > .myst-admonition-header-icon,
.myst-admonition.objectives > .myst-admonition-header > .myst-admonition-header-icon,
.myst-admonition.keypoints > .myst-admonition-header > .myst-admonition-header-icon,
.myst-admonition.discussion > .myst-admonition-header > .myst-admonition-header-icon {
  display: none;
}

.myst-admonition.prereq > .myst-admonition-header::before,
.myst-admonition.callout > .myst-admonition-header::before,
.myst-admonition.challenge > .myst-admonition-header::before,
.myst-admonition.solution > .myst-admonition-header::before,
.myst-admonition.objectives > .myst-admonition-header::before,
.myst-admonition.keypoints > .myst-admonition-header::before,
.myst-admonition.discussion > .myst-admonition-header::before {
  content: var(--adm-icon);
  font-family: FontAwesome;
  font-size: 1.1rem;
  width: 2rem;
  padding-left: 0.5rem;
  margin-right: 0.5rem;
  flex: none;
  align-self: center;
  text-align: center;
}