/**
 * @file
 * The dropbutton clearance example.
 *
 * Only the readout under each table is styled here; the tables and the
 * dropbuttons in them are the theme's, which is what the page demonstrates.
 * The readout sits directly under its table, so its own movement is the
 * movement being reported.
 *
 * Plain CSS with fallbacks, like the other stylesheets of this module: it has
 * to be readable in a theme that defines none of these variables.
 */

.dropbutton-clearance-readout {
  display: block;
  margin-block: 0.5rem 2rem;
  padding: 0.5rem 0.75rem;
  border-inline-start: 4px solid var(--color-border, #767676);
  font-size: 0.875rem;
}

.dropbutton-clearance-readout.is-moved {
  border-inline-start-color: var(--color-warning, #b25e00);
}