/* Pangolin's rules on top of hauy.css: the theme switch, and the few
   things the utilities do not cover. Everything else is composed from
   hauy's classes in lib/pangolin_web. */

/* The switch in the layout sets data-theme and data-theme-source on
   <html>; hauy's palettes follow color-scheme through light-dark(). */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* The page colours, as hauy.io sets them for itself. */
body {
  background-color: var(--surface, Canvas);
  color: var(--on-surface, CanvasText);
}

/* Links in hauy's link roles, which follow the theme and the contrast
   level; the hover colour is the hover feedback, so a text link carries
   no dim. :where keeps both rules below any colour class, so a link with
   on-surface or on-focus, as the toggles, keeps its colour on hover. */
:where(a) { color: var(--link); transition: color .15s ease-in; }
:where(a:hover, a:focus) { color: var(--link-hover); }

/* The theme switch as on hauy.io: a thumb sliding behind the light,
   system and dark buttons, 40 pixels apart, the colour hauy.io gives it.
   The chosen button is the one without the o-70 the others carry. */
.theme-thumb {
  left: 40px;
  width: 40px;
  height: 36px;
  background-color: var(--overlay, ButtonFace);
  transition: left 150ms ease-out;
}

html[data-theme-source="user"][data-theme="light"] .theme-thumb { left: 0; }
html[data-theme-source="user"][data-theme="dark"] .theme-thumb { left: 80px; }

.theme-choice { opacity: 0.7; }

html[data-theme-source="system"] [data-phx-theme="system"],
html[data-theme-source="user"][data-theme="light"] [data-phx-theme="light"],
html[data-theme-source="user"][data-theme="dark"] [data-phx-theme="dark"] {
  opacity: 1;
}

/* The accessibility menu as on hauy.io: the open pill inverts, the chosen
   contrast is bold on the button face while the others are faded, and
   the text size buttons fade out at 12px and 20px. */
.disclosure-pill[open] > summary {
  background-color: var(--on-surface-muted, CanvasText);
  border-color: var(--on-surface-muted, CanvasText);
  color: var(--surface, Canvas);
}

.contrast-choice {
  background-color: transparent;
  opacity: 0.7;
}

html:not([data-contrast]) [data-phx-contrast="system"],
html[data-contrast="more"] [data-phx-contrast="more"],
html[data-contrast="less"] [data-phx-contrast="less"] {
  background-color: ButtonFace;
  opacity: 1;
  font-weight: 700;
}

/* Buttons and selects take the text colour around them; a disabled button
   fades out, in the accessibility menu and in the pagination alike. */
button, select { color: inherit; }

button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* A select in a .select-box shows the chevron of <.select_box> instead of
   the browser's arrow; the icon is filled with the text colour. */
.select-box {
  position: relative;
  display: inline-flex;
}

.select-box > select {
  appearance: none;
  padding-right: 1.6em;
}

.select-box > svg {
  position: absolute;
  top: 50%;
  right: 0.4em;
  width: 0.8em;
  height: 0.8em;
  transform: translateY(-50%);
  pointer-events: none;
}

.zebra tbody tr:nth-child(even) { background-color: var(--overlay-05); }

/* A fleet host with an upgrade to run or a reboot to do, tinted from
   hauy's palette so it follows the theme: a warning orange, under half
   strength so it hints rather than blocks. The even rows keep the zebra
   stripe by mixing in the text colour, as the overlay would. */
.zebra tbody tr.row-actionable {
  --row-actionable: color-mix(in srgb, var(--orange-90) 45%, var(--surface));
  background-color: var(--row-actionable);
}
.zebra tbody tr.row-actionable:nth-child(even) {
  background-color: color-mix(in srgb, var(--row-actionable), var(--on-surface) 5%);
}

/* A paged table keeps its column widths from page to page: the widths come
   from the header cells, not from the rows shown, and a long value wraps. */
.table-fixed { table-layout: fixed; }
.table-fixed td { overflow-wrap: anywhere; }

/* The copy button of a code block shows the check instead of the copy icon
   while app.js keeps data-copied on it, a moment after copying. */
[data-copied] > .icon-copy { display: none; }
:not([data-copied]) > .icon-copied { display: none; }

/* The token colours of a highlighted code block, from hauy's palettes so
   they follow the theme and the contrast level. */
.hljs-comment { color: var(--on-surface-muted); }
.hljs-string { color: var(--green-30); }
.hljs-variable { color: var(--orange-30); }
.hljs-keyword { color: var(--purple-30); }
.hljs-section { color: var(--blue-30); }
.hljs-attr { color: var(--blue-40); }

.pre-wrap { white-space: pre-wrap; }