/* Maps the DM Tools design tokens onto the theme variables of the open-source initiative tracker
   (@dm-tabletop/initiative-tracker, README "Theming"). This is the ONLY tracker styling in this
   repo: the component draws itself, this file only says which colours, font and shapes it uses.
   Because the --dm-* tokens change with the light/dark toggle, so does the tracker. The corner
   cut follows --dm-cut (0.5rem if the token is not defined yet). */
:root {
  --it-bg: var(--dm-surface);
  --it-fg: var(--dm-text);
  --it-muted: var(--dm-text-muted);
  --it-border-strong: var(--dm-border-strong);
  --it-surface: var(--dm-surface-sunken);
  --it-input-bg: var(--dm-surface-raised);
  --it-rule: var(--dm-border);
  --it-head-bg: var(--dm-bar);
  --it-head-fg: var(--dm-on-bar);
  --it-row-bg: var(--dm-bar-raised);
  --it-row-fg: var(--dm-on-bar);
  --it-active-bg: color-mix(in srgb, var(--dm-bar-raised) 80%, var(--dm-on-bar));
  --it-down-bg: color-mix(in srgb, var(--dm-bar-raised) 70%, var(--dm-danger));
  --it-accent: var(--dm-accent);
  --it-accent-fg: var(--dm-on-accent);
  --it-focus: var(--dm-focus);
  --it-danger: var(--dm-danger);
  --it-cut: var(--dm-cut, 0.5rem);
  --it-font: var(--dm-font-sans);
  --it-weight: var(--dm-weight-body);
  --it-weight-strong: var(--dm-weight-strong);
  --it-shadow: var(--dm-shadow-md);
}

/* The saved-encounters list is drawn like the buttons beside it: the same height, padding, cut
   corners and 2px edge (it picks up the shared cut-corner shape in tokens.css). */
.it-root label.it-field {
  margin-bottom: 0; /* the page's label rule would lift it off the buttons it lines up with */
}
.it-root .it-field select {
  --dm-cut: var(--it-cut);
  --dm-edge: var(--it-border-strong);
  --dm-edge-w: 2px;
  --dm-fill: var(--it-surface);
  padding: 6px 14px 6px 18px;
  font-weight: var(--it-weight-strong);
  cursor: pointer;
}
.it-root .it-field select:hover {
  --dm-edge: var(--it-accent);
}