/*
 * The tables of kiopstudio/table (templates/components/Table.html.twig),
 * loaded with the controller (package.json, "autoimport"). On top of
 * Bootstrap's .table, which a page passes as the table's class.
 */

/*
 * Header layout.
 *
 * Bootstrap aligns thead cells to the bottom. As soon as one column carries a
 * filter input that cell grows taller, and every other heading drops down to
 * sit level with that input instead of with the other headings. Aligning to
 * the top puts all labels on one line whether or not an input follows below
 * them.
 */
table.table-component > thead,
table.table-component > thead > tr > th {
    vertical-align: top;
}

/* Keeps the label row the same height everywhere, so a column with a filter
   below it does not sit a pixel off from one without. */
table.table-component > thead > tr > th > .table-component__label {
    min-height: 1.5rem;
}

/*
 * Frame. A table keeps a minimum width (see the table controller); where its
 * place is narrower, it scrolls sideways in its frame instead of running out
 * of the page.
 */
.table-component-frame {
    max-width: 100%;
    overflow-x: auto;
}

/*
 * Stable column widths.
 *
 * Set by the table controller once it has measured the columns: the widths
 * in the colgroup then hold no matter which rows a filter or sort brings in.
 * A cell longer than its column wraps instead of widening it.
 */
table.table-component.table-component--stable {
    table-layout: fixed;
}

table.table-component.table-component--stable > tbody > tr > td {
    overflow-wrap: break-word;
}

/*
 * Sort buttons.
 *
 * Every sortable column shows its icon faintly, so it is visible at a glance
 * which columns can be sorted; the column that actually orders the table
 * shows its arrow at full strength. Hovering or focusing a faint icon brings
 * it forward, so it reads as something to click.
 */
.sort-indicator {
    font-size: 0.9rem;
    line-height: 1;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.sort-indicator.is-inactive {
    opacity: 0.35;
}

.sort-indicator.is-inactive:focus-visible,
th:hover .sort-indicator.is-inactive {
    opacity: 0.75;
}

/*
 * Multiselect filter.
 *
 * The dropdown sits in a heading of fixed width, so it may be wider than its
 * column; a long list of options scrolls instead of running off the page.
 * It is positioned fixed (see filters/_multiselect.html.twig), so a
 * percentage would be one of the window - hence a width of its own.
 */
.table-component__choices .dropdown-menu {
    min-width: 12rem;
}

.table-component__choice-list {
    max-height: 16rem;
    overflow-y: auto;
}

/*
 * Cells made of several parts (a badge and its text) with one alignment per
 * part, see TableColumn::$partAlign.
 *
 * Each part sits in a slot of its own and is aligned in it. The slot widths
 * come from the template (each as wide as its content) and are then set by
 * the table controller to the widest entry of the whole column, so the parts
 * line up across all rows.
 */
.table-component__parts {
    display: grid;
    gap: 0.5rem;
    align-items: baseline;
}

/*
 * A list of multi-part entries in one cell (badgesWithText with align as a
 * list): all lines share one grid, so each column is as wide as its widest
 * entry and the texts after badges of different length start on one line.
 * Each line hands its parts straight to that grid.
 */
.table-component__parts-list {
    display: grid;
    column-gap: 0.5rem;
    align-items: baseline;
}

.table-component__parts--listed {
    display: contents;
}