:root {
    --checkbox-size: 14px;
    --checkbox-size-mobile: 12px;
}

.table-checkbox-header {
    width: var(--checkbox-size);
    min-width: var(--checkbox-size);
    max-width: var(--checkbox-size);
    text-align: center;
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--color-white);
    z-index: 20;
}

.table-checkbox-cell {
    width: var(--checkbox-size);
    min-width: var(--checkbox-size);
    max-width: var(--checkbox-size);
    text-align: center;
    padding: 4px;
    position: sticky;
    left: 0;
    background-color: var(--color-white);
    z-index: 10;
}

.table-checkbox-select-all,
.table-checkbox-row {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    cursor: pointer;
    accent-color: var(--color-primair);
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 1100px) {
    .table-checkbox-header {
        width: var(--checkbox-size-mobile);
        min-width: var(--checkbox-size-mobile);
        max-width: var(--checkbox-size-mobile);
    }

    .table-checkbox-cell {
        width: var(--checkbox-size-mobile);
        min-width: var(--checkbox-size-mobile);
        max-width: var(--checkbox-size-mobile);
        padding: 2px;
    }

    .table-checkbox-select-all,
    .table-checkbox-row {
        width: var(--checkbox-size-mobile);
        height: var(--checkbox-size-mobile);
    }
}