/* ============================================================================
   AlphaSpa.Components
   ----------------------------------------------------------------------------
   Bootstrap 5 defines no `.btn-xs` or `.btn-md` size class, so this library
   supplies them for a Button with Size="ButtonSize.ExtraSmall" or
   Size="ButtonSize.Medium"; it draws the order arrow a DataGridColumn
   renders in its caption, so the library needs no icon font; and it styles
   the row selection of a DataGrid - the checkbox cells, the partial state of
   the select-all checkbox and the selected row.

   Consumers load this file with:
     <link href="_content/AlphaAppTools.Spa.Components/AlphaSpa.Components.css" rel="stylesheet"/>
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Button (Buttons/) - the .btn-* size classes below are emitted by Button via ButtonSize.ToCssClass()
   ---------------------------------------------------------------------------- */

.btn-xs {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.15rem;
}

.btn-md {
    padding: 0.47rem 1rem;
    font-size: 1.125rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

/* ----------------------------------------------------------------------------
   DataGrid (DataGrids/) - the order arrow a DataGridColumn renders in its caption inside a cascaded OrderManager:
   <i class="data-grid-order data-grid-order-ascending|descending">, a triangle drawn with borders, so no icon font is needed
   ---------------------------------------------------------------------------- */

.data-grid-order {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.3em;
    vertical-align: middle;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
}

.data-grid-order-ascending {
    border-bottom: 0.4em solid currentColor;
}

.data-grid-order-descending {
    border-top: 0.4em solid currentColor;
}

/* ----------------------------------------------------------------------------
   DataGrid (DataGrids/) - row selection: the cells of a DataGridSelectColumn (header cell included) carry .data-grid-select-cell and hold a bare
   Bootstrap .form-check-input, a selected row carries .data-grid-row-selected and a row that a click toggles .data-grid-row-selectable.
   The highlight is themable: set --data-grid-selected-row-bg on the table or any ancestor.
   ---------------------------------------------------------------------------- */

.data-grid-select-cell {
    width: 1%;
    white-space: nowrap;
    /* A Shift-click extends the selection range; without this it would also select the text between the two clicks. */
    user-select: none;
}

td.data-grid-select-cell,
.data-grid-select-cell > .form-check-input {
    cursor: pointer;
}

/* Bootstrap lays .form-check-input out for a .form-check wrapper with a label next to it; the box stands alone in its cell here. */
.data-grid-select-cell > .form-check-input {
    float: none;
    margin: 0;
    vertical-align: middle;
}

.data-grid-select-cell > .form-check-input:disabled {
    cursor: default;
}

/* The cell of a row that the grid's RowSelectable rule refuses: a click on it selects nothing, so it offers none. Bootstrap takes the pointer
   events off a disabled box, which leaves the cell's cursor showing over it as well. */
td.data-grid-select-cell:has( > .form-check-input:disabled ) {
    cursor: default;
}

/* Some but not all rows selected. A checkbox is indeterminate through a DOM property only, which markup cannot set and this library ships no
   script to set, so the select-all box carries this class instead and the rule paints what Bootstrap paints for :indeterminate. */
.form-check-input.data-grid-select-partial {
    background-color: var( --bs-primary, #0d6efd );
    border-color: var( --bs-primary, #0d6efd );
    background-image: url( "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e" );
}

/* Bootstrap paints a cell with an inset shadow of --bs-table-accent-bg (5.0 - 5.2) or --bs-table-bg-state (5.3), so the selected row sets both
   on its cells - with one more type selector than Bootstrap's .table-striped and .table-hover rules, which would otherwise repaint it. */
.table > tbody > tr.data-grid-row-selected > td {
    --bs-table-accent-bg: var( --data-grid-selected-row-bg, var( --bs-primary-bg-subtle, #e7f1ff ) );
    --bs-table-bg-state: var( --data-grid-selected-row-bg, var( --bs-primary-bg-subtle, #e7f1ff ) );
}

/* A row that a click toggles (SelectOnRowClick). Like the checkbox cell it gives up text selection: a Shift-click extends the range of rows, and
   the browser would extend a text selection from the click before along with it. */
.data-grid-row-selectable {
    cursor: pointer;
    user-select: none;
}