table{
    --scroll-bg: #e3e3e3;
    --scroll-width: 8px;

    --scroll-thumb-width: 6px;
    --scroll-thumb-bg: #CCCED1FF;
    --scroll-thumb-border: 1px solid #EDEDEDFF;

    --table-width: max-content;

    --thead-width: 100%;
    --thead-background: #fff;
    --thead-position: sticky;
    --thead-top: -6px;

    --tbody-overflow: auto;
    --tbody-height: 100%;
    --tbody-width: 100%;
    --tbody-display: table-row-group;

    --th-border: 1px solid #E6E6E6;
    --th-padding: 2px;

    --th-font-size: 12px;
    --th-color: #000;
    --th-font-weight: 400;


    --td-border: 1px solid #E6E6E6;
    --td-padding: 2px;
    --td-cursor: default;

    --td-active-bg: #fff;
    --td-active-border: 1px solid #000;
    --td-active-color: #000;

    --td-changed-bg: unset;
    --td-changed-border: 1px solid #E6E6E6;
    --td-changed-color: #664dff;

    --td-font-size: 12px;
    --td-color: #000;
    --td-font-weight: 400;
    --td-line-clamp: 1;

    --tr-bg: #fff;
    --tr-hover-bg: #f2f2f2;
    --tr-selected-bg: #d0d0d0;

    width: var(--table-width);

    thead{
        width: var(--thead-width);
        position: var(--thead-position);
        top: var(--thead-top);
        background: var(--thead-background);
        z-index: 10;

        --tr-bg: var(--thead-background);
    }
    tbody{
        overflow: var(--tbody-overflow);
        height: var(--tbody-height);
        width: var(--tbody-width);
        display: var(--tbody-display);
    }

    tr{
        background: var(--tr-bg);
        &:hover{
            background: var(--tr-hover-bg)!important;
        }
        &.selected{
            background: var(--tr-selected-bg)!important;
        }
    }
    td{
        border: var(--td-border);
        padding: var(--td-padding);

        font-size: var(--td-font-size);
        color: var(--td-color);
        font-weight: var(--td-font-weight);

        cursor: var(--td-cursor);

        div{
            overflow-wrap: anywhere;
        }
        div:focus-visible{
            outline: none;
        }
        &.changed{
            background: var(--td-changed-bg);
            border: var(--td-changed-border);
            color: var(--td-changed-color);
        }
        &.active{
            background: var(--td-active-bg);
            border: var(--td-active-border);
            color: var(--td-active-color);
        }
    }

    th{
        border: var(--th-border);
        padding: var(--th-padding);

        font-size: var(--th-font-size);
        color: var(--th-color);
        font-weight: var(--th-font-weight);

        div{
            overflow-wrap: anywhere;
        }
    }
}