/* The margin (margin.js): the app's margin marks, ported from
   src/editor/spark/MarginMark.css and MarginMarks.css, scoped to .p-margin.
   The tokens are the drawer's (.p-app in lab.css). */

/* MarginMarks.css: the rail, the block's child, its near edge 24 right of
   the highlight area (margin.js places it, and draws it in on a board too
   narrow for it); only the marks take the pointer. */
.p-margin {
  position: absolute;
  top: 0;
  left: calc(100% + 24px);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.p-margin .margin-mark-slot {
  position: absolute;
  display: flex;
  width: 36px;
  height: 36px;
}

/* MarginMark.css: a 36 box, all of it the hit area; a 32 disc for hover,
   selected and pressed; bare, a 20 glyph centred at (8, 8); with the ring,
   an 18 glyph at (9, 9) in the 32 ring; the 12 badge at (24, 0). */
.p-margin .margin-mark {
  --mm-glyph: var(--color-muted);
  position: relative;
  box-sizing: border-box;
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mm-glyph);
  cursor: default;
  outline: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% 50%;
  animation: p-margin-mark-in 160ms var(--ease-out) both;
  transition: --mm-glyph var(--motion-hover) var(--ease-out);
}
.p-margin .margin-mark[data-instant] { animation: none; }
@property --mm-glyph {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
.p-margin .margin-mark[data-leaving] {
  pointer-events: none;
  animation: p-margin-mark-out 120ms var(--ease-out) both;
}
@keyframes p-margin-mark-in {
  from { opacity: 0; scale: 0.9; }
  to { opacity: 1; scale: 1; }
}
@keyframes p-margin-mark-out {
  from { opacity: 1; scale: 1; }
  to { opacity: 0; scale: 0.9; }
}
.p-margin .margin-mark-disc {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  transition:
    background-color var(--motion-hover) var(--ease-out),
    box-shadow var(--motion-hover) var(--ease-out);
}
/* Hover (a real pointer, or the film's: data-hover): color-active and the
   soft raise. */
.p-margin .margin-mark:is(:hover, [data-hover]):not(:active, [data-pressed], [data-selected]) {
  --mm-glyph: var(--color-ink);
  transition-duration: var(--motion-hover-in);
}
.p-margin .margin-mark:is(:hover, [data-hover]):not(:active, [data-pressed], [data-selected]) > .margin-mark-disc {
  background-color: var(--color-active);
  background-image: var(--soft-raise-shade);
  box-shadow:
    inset 0 1px 0 var(--soft-raise-rim),
    0 1px 3px var(--raised-shadow);
  transition-duration: var(--motion-hover-in);
}
/* Selected (its face shows in the drawer): the darker flat fill. */
.p-margin .margin-mark[data-selected]:not(:active, [data-pressed]) { --mm-glyph: var(--color-ink); }
.p-margin .margin-mark[data-selected]:not(:active, [data-pressed]) > .margin-mark-disc { background-color: var(--color-hover); }
/* Pressed: ink, the glyph in surface, at once. */
.p-margin .margin-mark:is(:active, [data-pressed]) {
  --mm-glyph: var(--color-surface);
  transition: none;
}
.p-margin .margin-mark:is(:active, [data-pressed]) > .margin-mark-disc {
  background-color: var(--color-ink);
  background-image: none;
  box-shadow: none;
  transition: none;
}
.p-margin .margin-mark-centre {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-margin .margin-mark[data-shape='bare'] > .margin-mark-centre {
  left: 8px;
  top: 8px;
  width: 20px;
  height: 20px;
}
.p-margin .material-symbols-rounded {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'FILL' var(--icon-fill), 'wght' var(--icon-wght), 'GRAD' var(--icon-grad), 'opsz' 24;
  font-feature-settings: 'liga' 1;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
.p-margin .margin-mark-glyph { color: var(--mm-glyph); font-size: 20px; }
.p-margin .margin-mark[data-shape='ring'] .margin-mark-glyph { font-size: 18px; }
/* Working: the glyph dims (40%) until the spinner takes its place. */
.p-margin .margin-mark[data-working] .margin-mark-glyph { opacity: 0.4; }
/* The ray spinner (ray-spinner.css) in the glyph's colour. */
.p-margin .ray-spinner {
  display: block;
  flex: 0 0 auto;
  color: var(--mm-glyph);
  shape-rendering: geometricPrecision;
  transform-origin: 50% 50%;
  animation: p-ray-turn 1s steps(12, end) infinite;
}
.p-margin .ray-spinner line { stroke: currentColor; stroke-linecap: round; fill: none; }
.p-margin .margin-mark-spinner { width: 18px; height: 18px; }
.p-margin .margin-mark[data-shape='bare'] .margin-mark-spinner { width: 20px; height: 20px; }
/* The Deep ring over the disc, 32: the track the outer 20% of the radius;
   color-line while it starts or waits, color-hairline under a run's steps;
   the steps round-ended arcs in ink, each growing over 400 ease-out; muted
   while paused. */
.p-margin .margin-mark-ring {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 32px;
  height: 32px;
  overflow: visible;
  pointer-events: none;
}
.p-margin .margin-mark-ring circle { fill: none; stroke-width: 3.2px; }
.p-margin .margin-mark-ring-track { stroke: var(--color-line); }
.p-margin .margin-mark-ring[data-track='hairline'] .margin-mark-ring-track { stroke: var(--color-hairline); }
.p-margin .margin-mark-ring-step {
  stroke: var(--color-ink);
  stroke-linecap: round;
  opacity: 0;
  transition:
    stroke-dasharray 400ms var(--ease-out),
    stroke 400ms var(--ease-out);
}
.p-margin .margin-mark-ring-step[data-on] { opacity: 1; }
.p-margin .margin-mark-ring[data-muted] .margin-mark-ring-step { stroke: var(--color-muted); }
/* The badge: a 12 circle at the top-right, the 2 px cut-out in the stage's
   colour, a 9 glyph or the unread dot inside. */
.p-margin .margin-mark-badge {
  position: absolute;
  left: 24px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--solid-stage);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-active);
  color: var(--color-muted);
}
.p-margin .margin-mark-badge[data-badge='unread'] { background-color: var(--solid-stage); }
.p-margin .margin-mark-badge[data-badge='failed'] {
  background-color: var(--on-ink-danger);
  color: var(--ink-surface-text);
}
.p-margin .margin-mark-badge-glyph { font-size: 9px; }
.p-margin .margin-mark-badge-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-ink);
}
@media (prefers-reduced-motion: reduce) {
  .p-margin .margin-mark { animation: p-margin-mark-in-reduced 80ms linear both; }
  .p-margin .margin-mark[data-instant] { animation: none; }
  .p-margin .margin-mark[data-leaving] { animation: p-margin-mark-out-reduced 80ms linear both; }
  .p-margin .margin-mark-ring-step { transition: opacity 80ms linear; }
}
@keyframes p-margin-mark-in-reduced { from { opacity: 0; } to { opacity: 1; } }
@keyframes p-margin-mark-out-reduced { from { opacity: 1; } to { opacity: 0; } }
/* The clear-out (moment 12) takes the marks with the text: margin.js
   removes them, each playing its leave. */