.datagrid_target {

    --datagrid_font_size     : calc( var( --r ) * 0.9 );
    --sort_char_default      : '-';
    --sort_char_asc          : "\25BE";
    --sort_char_desc         : "\25B4";
    --target_width           : 100%;
    --target_height          : 100%;
    --table_active_color     : hsl( 230deg 80% 10% );
    --table_active_color_alt : hsl( 230deg 80% 15% );

    overflow: auto;
    width: var( --target_width );
    height: var( --target_height );
    max-width: var( --target_width );
    max-height: var( --target_height );

    position: relative;
}

html.light .datagrid_target {
    --table_active_color : hsl( 230deg 80% 90% );
    --table_active_color_alt : hsl( 230deg 80% 85% );
}

.datagrid_target.no_records {
    font-size: var( --h5_font_size );
    display: flex;
    align-items: center;
    justify-content: center;
}

table.datagrid {
    margin: 0;
    max-width: 100%;
    border-top: none;
    border-left: none;
    font-size: var( --datagrid_font_size );
}

table.datagrid tr th:last-child,
table.datagrid tr td:last-child {
    border-right: none !important;
}

table.datagrid thead th {

    /* TODO: Address -1px stick header which moves when scrolling down */
    /*       - Had to happen because of border-collapse causing a 1px gap on the top of the th */
    /*         elements which would show table content as it scrolled by */
    position: sticky;
    top: -1px;
    z-index: 1;
    border-top: none;
    white-space: nowrap;
}

table.datagrid thead th.sortable {
    cursor: pointer;
    user-select: none;
}

table.datagrid thead th.sortable:after {
    display: inline-block;
    content: var( --sort_char_default );
    margin: 0 0 0 0.4rem;
}

table.datagrid thead th.sortable.desc:after {
    content: var( --sort_char_asc );
    margin: 0 0 0 0.4rem;
}

table.datagrid thead th.sortable.asc:after {
    content: var( --sort_char_desc );
    margin: 0 0 0 0.4rem;
}

table.datagrid tbody > tr.even th,
table.datagrid tbody > tr.even td {
    background: var( --table_normal_row_bg );
}

table.datagrid tbody > tr.odd th,
table.datagrid tbody > tr.odd td {
    background: var( --table_striped_row_bg );
}

table.datagrid tbody > tr:hover th,
table.datagrid tbody > tr:hover td {
}

table.datagrid tbody > tr.filtered {
    display: none;
    visibility: hidden;
}

table.datagrid tbody > tr.checked_row th,
table.datagrid tbody > tr.checked_row td {
    background: var( --table_active_color );
}

table.datagrid tbody > tr.checked_row.odd th,
table.datagrid tbody > tr.checked_row.odd td {
    background: var( --table_active_color_alt );
}

table.datagrid td .record_tools {
    display: flex;
    align-items: center;
}

table.datagrid td .record_tools span.tool {
    position: relative;
    padding: 0 0 0 1.4rem;
}

/* Icon is abosolutely positioned to tool due to table cell width issues */
/* - When rendering just text a `.shrink` 0.1% width cell will handle text fine, but choke on images */
/* - To account we use an explicit positioning for the icon */
table.datagrid td .record_tools span.tool svg.icon,
table.datagrid td .record_tools span.tool img.icon {
    top: 0.05rem;
    position: absolute;
    margin: 0;
    width: 1.2rem;
    height: 1.2rem;
    left: 0;
}

table.datagrid td .seperator {
    border-left: var( --k_25 ) solid 1px;
    border-right: var( --k_25 ) solid 1px;
    margin: 0 .5rem;
    height: 1rem;
    width: 0;
}

/* Dark styling */
html.dark table.datagrid a,
html.dark table.datagrid .record_tools {
    filter: contrast( 60% ) brightness( 150% );
}

html.dark table.datagrid .seperator {
    border-color: var( --k_85 ) !important;
}