/**
 * @file
 * Table select behavior.
 *
 * Core's `tableselect.js` puts a `selected` class on a `<tr>` whose
 * checkbox is ticked, and the stock stylesheet this file was started from
 * paints that row `#ffc` through `tr.selected td`. That rule is
 * deliberately absent here: the design gives a ticked row no fill of its
 * own - only its checkbox changes - so the row keeps the card's white and
 * still takes the hover fill the `table-row` component applies. Do not
 * restore it from core's copy.
 *
 * The `selected` class itself is left alone. It is core's own state hook
 * and other behaviour may read it; only the paint is dropped.
 *
 * The rules below are the one place in this theme where the checkbox box
 * is written outside the `forms/checkbox` component, and that is not a
 * second opinion about it - it is the same design, in the only language
 * that can reach this element. `tableselect.js` builds a table's
 * select-all box at runtime from `Drupal.theme('checkbox')` and prepends
 * it to `th.select-all`, so it passes through no template: there is
 * nothing for Tailwind to scan and no `Attribute` object to add a utility
 * class to. Every value is taken from the same custom property the
 * component's utilities resolve to, so the two cannot drift apart on a
 * token change - only on a change to the box's shape, which is what the
 * cross-reference below is for.
 *
 * @see tableselect.js
 * @see components/forms/checkbox/checkbox.twig
 */

th.select-all input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-secondary);
}

th.select-all input[type="checkbox"]:checked {
  /* The design draws the fill edge to edge. The border is repainted
     rather than removed, which would shift the box by 1px. */
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19.7177 6.80365C20.1023 7.20003 20.0927 7.83312 19.6964 8.2177L10.4203 17.2177C10.0324 17.5941 9.41563 17.5941 9.02769 17.2177L4.30369 12.6347C3.90729 12.2502 3.8977 11.6171 4.28226 11.2207C4.66683 10.8243 5.29992 10.8147 5.69632 11.1993L9.72397 15.1067L18.3037 6.7823C18.7 6.39771 19.3331 6.40728 19.7177 6.80365Z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

th.select-all input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-medium);
}

td.checkbox,
th.checkbox {
  text-align: center;
}
[dir="rtl"] td.checkbox,
[dir="rtl"] th.checkbox {
  /* This is required to win over specificity of [dir="rtl"] td */
  text-align: center;
}

/*
 * The row checkbox sits at the top of its cell.
 *
 * A listing's cells are top-aligned, so a two-line address and a one-line
 * e-mail start on the same line; the checkbox is meant to start there
 * too. It does not, because Views Bulk Operations builds it as an
 * ordinary form element and Form API wraps every one of those in a
 * `.form-item` - which `css/components/form.css`, the core-parity
 * boilerplate this theme was generated with, gives a 1em block margin.
 * On a 72px row that 16px is enough to read as a checkbox centred in its
 * cell rather than aligned with the row's first line.
 *
 * Cancelled on the bulk-form column only: the margin is right for a form
 * item in a form, and the header's select-all box reaches the page
 * through `tableselect.js` without a wrapper at all, so this is the one
 * place it is wrong.
 */
.views-field-views-bulk-operations-bulk-form .form-item {
  margin-block: 0;
}