@import 'react-toolbox/components/colors.css';
@import 'react-toolbox/components/variables.css';

@import './FixedHeaderGridTableBase.css';

:root {
    --table-hover-color: #eee;
    --table-dividers: 1px solid #e6e6e6;
    --table-selection-color: #f5f5f5;
    --table-column-padding: calc(1.8 * var(--unit));
    --table-cell-padding: calc(1.2 * var(--unit));
}

.cell
{
    transition: 0.28s background cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--table-cell-padding) var(--table-column-padding);
    border-top: var(--table-dividers);
}

.first_col
{
    padding-left: 24px;
}

.last_col
{
    padding-right: 24px;
}

.first_row, .sticky_col .first_col
{
    font-weight: 500;
    color: #888;
}

.first_row
{
    border-top: 0;
    background: white;
}

.sticky
{
    background: white;
}

.sticky_col .first_col
{
    background: white;
}

.first_row:after
{
    content: " ";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(209,209,209,1) 50%, rgba(254,254,254,0) 100%);
}

.zebra .even
{
    background: #f8f8f8;
}

.hover, .zebra .even.hover, .first_row.hover, .sticky.hover, .sticky_col .first_col.hover
{
    background: var(--table-hover-color);
}