/* Bulk selection: a row's avatar doubles as a round checkbox, and a
   white panel overlays the header while anything is selected. The checkbox
   only exists where a bulk-selection controller is listening. */

.posting__select { display: none; }

/* Box pages wrap their rows in the selection scope; it adds no box of its own */
.bulk-scope { display: contents; }

/* The row stacks its link and the checkbox in one grid cell, so the checkbox
   lands on the avatar whatever padding the list gives the row. */
[data-controller~="bulk-selection"] .posting { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-controller~="bulk-selection"] .posting > * { grid-area: 1 / 1; }
/* A row's note (topics/notes/_row) sits under it, in a row of its own */
[data-controller~="bulk-selection"] .posting > .posting__note { grid-area: 2 / 1; }

[data-controller~="bulk-selection"] .posting__select {
  position: relative;
  z-index: 1;
  display: block;
  align-self: start;
  justify-self: start;
  width: 44.55px;
  height: 44.55px;
  margin: 9.9px 0 0 16.5px;
  border: 2px solid rgb(var(--ink-rgb) / 0.35);
  border-radius: 100%;
  background: var(--color-sheet) center / 24px no-repeat;
  appearance: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 80ms ease;
}

[data-controller~="bulk-selection"] .posting__select:hover,
.bulk-selecting .posting__select { opacity: 1; }

.posting__select:focus { outline: none; }
.posting__select:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }

[data-controller~="bulk-selection"] .posting__select:checked {
  border-color: #3072dd;
  background-color: #3072dd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 1;
}

/* As the reference's: a selected row keeps only its checkmark; the wash is
   the hover's, following the pointer */

/* The panel, laid out as the reference's: three big tiles, a grid
   of actions with their keys, and a close button. Icons take the tones of the
   Postboxey menu's. data-mode ("one" or "many", set by bulk-selection) shows
   the single-thread or several-thread actions. */

.bulk-actions {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 6;
  translate: -50% 0;
  width: min(1089px, 100%);
  padding: 5.5px;
}

.bulk-actions__content {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px 52px 12px 12px;
  border: 1px solid var(--popup-line);
  border-radius: 22px;
  background: var(--popup-surface);
  box-shadow: var(--popup-shadow);
  color: var(--popup-ink);
}

/* How many are selected: read out to screen readers, not shown (Scott: the
   selection highlights already say it) */
.bulk-actions__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bulk-actions__primary { display: flex; flex: none; gap: 8px; }
.bulk-actions__chips { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.bulk-actions__form { display: contents; }

/* Single-thread or several-thread actions, by the bar's mode */
.bulk-actions[data-mode="many"] [data-bulk-only="one"],
.bulk-actions[data-mode="one"] [data-bulk-only="many"] { display: none; }

.bulk-actions__tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--popup-line);
  border-radius: 10px;
  background: var(--popup-tile);
  color: var(--popup-ink);
  font: 500 14px/1 var(--font);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.bulk-actions__tile--big {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 96px;
  height: 120px;
  padding: 10px 8px 8px;
  font-size: 15px;
}

.bulk-actions__tile:hover, .bulk-actions__menu[open] > .bulk-actions__tile { background: var(--color-soft); }
.bulk-actions__tile:focus { outline: none; }
.bulk-actions__tile:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }

.bulk-actions__icon { flex: none; width: 18px; height: 18px; color: var(--tone, currentColor); }
.bulk-actions__tile--big .bulk-actions__icon { width: 26px; height: 26px; }

.bulk-actions__tile kbd {
  position: absolute;
  top: 50%;
  right: 8px;
  translate: 0 -50%;
  color: rgb(var(--popup-ink-rgb) / 0.4);
  font: 700 11.5px/1 SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.bulk-actions__tile--big kbd { top: 9px; translate: none; }

/* Tones, matching the Postboxey menu's icon colours */
[data-tone="reply_later"] { --tone: #0b7d70; }
[data-tone="set_aside"] { --tone: #7c4dcc; }
[data-tone="seen"], [data-tone="reply"], [data-tone="inbox"], [data-tone="snooze"] { --tone: #3072dd; }
[data-tone="forward"] { --tone: #0b7d70; }
[data-tone="read"] { --tone: #4f5bd5; }
[data-tone="done"] { --tone: #3a7d2c; }
[data-tone="feed"] { --tone: #c2560a; }
[data-tone="paper_trail"], [data-tone="unseen"] { --tone: #5b6b78; }
[data-tone="label"] { --tone: #b7791f; }
[data-tone="collection"] { --tone: #0e7490; }
[data-tone="workflow"] { --tone: #a8456b; }
[data-tone="note"] { --tone: #8a6d1f; }
[data-tone="ignore"] { --tone: #c0392b; }
[data-tone="trash"] { --tone: #6b6560; }
:root[data-appearance="dark"] .bulk-actions__icon { color: color-mix(in srgb, var(--tone, currentColor) 55%, white); }
@media (prefers-color-scheme: dark) {
  :root[data-appearance="system"] .bulk-actions__icon { color: color-mix(in srgb, var(--tone, currentColor) 55%, white); }
}

.bulk-actions__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--popup-line);
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--popup-ink);
  cursor: pointer;
}

.bulk-actions__close:hover { background: var(--popup-line); }
.bulk-actions__close:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
/* The X spans 11.4px, as the reference's */
.bulk-actions__close-icon { width: 20.4px; height: 20.4px; }

/* Snooze, Label, Collection and Workflow open small menus under their chips */
.bulk-actions__menu { position: relative; display: flex; }
.bulk-actions__menu > summary { list-style: none; }
.bulk-actions__menu > summary::-webkit-details-marker { display: none; }

.bulk-actions__popup { top: calc(100% + 6px); right: auto; left: 0; max-height: 60vh; overflow-y: auto; }
.bulk-actions__choice { position: relative; }
.bulk-actions__hint { position: absolute; right: 12px; top: 50%; translate: 0 -50%; opacity: 0.6; font-weight: 400; }
.bulk-actions__empty { margin: 0 8.9px; color: var(--popup-muted); }

@media (max-width: 760px) {
  [data-controller~="bulk-selection"] .posting__select { margin-left: 12px; }
  .bulk-actions__content { flex-wrap: wrap; }
  .bulk-actions__primary { width: 100%; }
  .bulk-actions__tile--big { flex: 1; width: auto; height: 84px; }
}