/*
:filename: wexa_statics/css/sortatable.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: style for a table with buttons to sort rows

-------------------------------------------------------------------------

This file is part of Whakerexa: https://github.com/brigitte-bigi/Whakerexa

Copyright (C) 2023-2026 Brigitte Bigi, CNRS
Laboratoire Parole et Langage, Aix-en-Provence, France

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

This banner notice must not be removed.

-------------------------------------------------------------------------

*/


/* Sort buttons of a table */

.sortatable {
    margin: 0;
    padding: calc(0.5 * var(--font-size));
    width: 100%;
    /* A button is never narrower than what it says. Its box is the one of its
       column, and a column drawn on its cells can be shorter than its header:
       the column follows the button, instead of clipping the word. */
    min-width: max-content;
    height: 100%;
    min-height: 1.5rem;
    font-weight: var(--font-weight-bold);
    /* The head of a column carries the ground, and what sorts it is written on
       that ground: a command's own pair would put its ink on the head's paper. */
    background: none;
    color: inherit;
    border: none;
}

.sortatable::after {
    content: '';
    display: inline-block;
    width: 0.8rem;
    height: 0.6rem;
    margin-left: calc(1.25 * var(--typography-spacing-horizontal));
    vertical-align: middle;
    border-style: solid;
    border-color: currentColor;
}

/* No sorted: a square */
.sortatable:not(.sort-asc):not(.sort-desc)::after {
    width: 0.8rem;
    height: 0;
    border-top: 0.1rem solid currentColor;
}

/* Sorted: an arrow */
.sort-asc::after {
    border-width: 0 0.4rem 0.4rem 0.4rem;
    border-color: transparent transparent currentColor transparent;
}

.sort-desc::after {
    border-width: 0.4rem 0.4rem 0 0.4rem;
    border-color: currentColor transparent transparent transparent;
}



/* -----------------------------------------------------------------------
   On paper
   ----------------------------------------------------------------------- */

@media print {

    /* print.css hides every button, and a sort button is one. Its label is
       also the header of its column: without it, the table loses its
       headers. Sorting has nothing left to do, so only the label stays. */
    .sortatable {
        display: inline;
        padding: 0;
        text-align: left;
    }

    .sortatable::after {
        display: none;
    }
}