:root {
    --default-col-width-ch: 14;
}

/* ************************************************** */
/* #region TABLE CONTAINER                            */
/* ************************************************** */    

.table-container {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    /* ===== Hex Halftone ===== */
    background-image: 
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px)),
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px));
    background-size: var(--dot-space) var(--dot-space);
    /* Offset the second gradient by half the spacing */
    background-position: 
        0 0,
        calc(var(--dot-space) / 2) calc(var(--dot-space) / 2);
}

/* #endregion */

/* ************************************************** */
/* #region TABLE WRAPPER                              */
/* ************************************************** */

.table-wrapper {
    flex: 1;
    display: block;
    min-width: 0;
    width: 100%;
    min-height: 0;
    overflow: auto;
}

/* #endregion */

/* ************************************************** */
/* #region TABLE                                      */
/* ************************************************** */

table {
    isolation: isolate;
    border-collapse: collapse;
    border-spacing: 0;
    box-shadow: 0 0 0 calc(0.5 * var(--border-width)) var(--border-color);
    font-variant-numeric: tabular-nums;
}

/* #endregion */

/* ************************************************** */
/* #region COLUMNS                                    */
/* ************************************************** */

col {
    width: calc(var(--default-col-width-ch) * 1ch);
}

col.hidden {
    visibility: collapse;
}

/* #endregion */

/* ************************************************** */
/* #region THEAD                                      */
/* ************************************************** */

thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* #endregion */

/* ************************************************** */
/* #region TH                                         */
/* ************************************************** */

th {
    position: relative;
    min-height: min-content;
    padding-inline: 0.5em;
    padding-block: 0.25em calc(2 * var(--border-width) + 0.25em);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: auto;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

thead tr:last-child th::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(2 * var(--border-width));
    background-color: var(--border-color);
}

/* #endregion */

/* ************************************************** */
/* #region TD                                         */
/* ************************************************** */

td {
    background-color: var(--bg-color);
    padding-inline: 0.5em;
    padding-block: 0.25em;
    font-variant-numeric: tabular-nums;
    overflow: auto;
    text-align: right;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    word-break: break-word;
}

/* ================ */
/* #region Selected */
/* ================ */

th.selected,
td.selected {
    background-color: var(--selected-cell-bg-color) !important;
    color: var(--selected-cell-text-color);
}

/* #endregion */

/* Numeric data */
td[data-type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* #endregion */

/* ************************************************** */
/* #region GRID LINES                                 */
/* ************************************************** */

th,
td {
    /* Default: transparent gridlines */
    --h-grid: 0 0 transparent;
    --v-grid: 0 0 transparent;
    --gridline-width: -0.5px;

    /* Always render both variables side-by-side */
    box-shadow: inset var(--h-grid), inset var(--v-grid);
}

/* Horizontal */
td {
    --h-grid: 0 var(--gridline-width) 0 0 var(--border-color);
}

/* Vertical */
th,
td {
    --v-grid: var(--gridline-width) 0 0 0 var(--border-color);
}

th:last-child,
td:last-child {
    --v-grid: 0 0 0 0 transparent;
}

/* #endregion */

/* ************************************************** */
/* #region ALTERNATING ROW COLORS                     */
/* ************************************************** */

tr:nth-child(even) td {
    background-color: var(--alternating-row-color);
}

/* #endregion */