/*
 * Table component styles
 */

@use "sass:math";

.table {
    // header
    > thead th {
        font-size: $font-size-sm;
        text-transform: uppercase;
    }

    // Fixes vertical align in tables
    > thead {
        vertical-align: $table-cell-vertical-align; // bootstrap forces it to "bottom"
    }

    .list-selected {
        .list-selected-label {
            padding: $table-cell-padding-x 0;
            .fa {
                width: 50px; // same as .checkbox-cell. TODO : use a var
                margin-right: $table-cell-padding-x;
            }
        }

        .btn {
            padding: $table-cell-padding-y $table-cell-padding-x !important;;
            border: none !important;;
        }
    }
}

// -
// Cells
// ---

.sorting-cell {
    position: relative; // for positioning sorting indicator
    padding-right: 24px !important; // arbitrary value to have the sorting indicator centered in the padding. FIXME
    cursor: pointer;

    .fa {
        line-height: /*1.42857 */$line-height-base; // todo find the correct computed line-height
        position: absolute;
        right: 8px; // same as horizontal padding of the cell
    }
}

.checkbox-cell {
    width: 50px;
    text-align: center;
}

.actions-cell {
    width: 50px; // because this cell should only contain a dropdown to gain horizontal space (no buttons bar)
    padding: 0 !important; // move padding on btns
    white-space: nowrap; // avoids buttons to break on multi lines
    text-transform: none !important;

    .btn {
        padding: $table-cell-padding-y $table-cell-padding-x !important;
        border: none !important;;
    }

    .dropdown-menu {
        margin-top: 0;
    }
}

.table-sm {
    .list-selected {
        .list-selected-label {
            padding: $table-cell-padding-y-sm 0;
            .fa {
                margin-right: $table-cell-padding-x-sm;
            }
        }
    }

    .list-selected .btn,
    .actions-cell .btn {
        padding: $table-cell-padding-y-sm $table-cell-padding-x-sm  !important;;
        border: none  !important;;
    }
}
