.headerRow {
    &[data-selectable='true'] input[type='checkbox'] {
        border-color: var(--mantine-color-gray-4);
        pointer-events: auto;
        cursor: default;
    }

    &[data-selectable='false'] input[type='checkbox'] {
        background-color: var(--mantine-color-gray-2);
        border-color: var(--mantine-color-gray-3);
        pointer-events: none;
        cursor: not-allowed;

        & + svg {
            color: var(--mantine-color-gray-5);
        }
    }
}

.row {
    overflow-wrap: anywhere;

    & td:first-of-type {
        padding-left: 40px;
    }

    @mixin hover {
        background-color: var(--mantine-color-gray-1);
    }

    &[data-selectable='false'] input[type='checkbox'] {
        background-color: var(--mantine-color-gray-2);
        border-color: var(--mantine-color-gray-3);
        pointer-events: none;
        cursor: not-allowed;

        &:checked + svg {
            color: var(--mantine-color-gray-5);
        }
    }

    &[data-selected='true'] {
        &[data-multi-selection='false'] {
            background-color: var(--mantine-color-gray-1);
        }

        &[data-multi-selection='true'] {
            background-color: transparent;
        }
    }

    &[data-collapsible-cell='true'] {
        text-align: right;
        padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm) !important;
    }
}

.cell {
    vertical-align: middle;

    /* We must use height instead of minHeight here, otherwise it doesn’t apply */
    height: 56px;
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    border-bottom: rem(1) solid var(--mantine-color-gray-3);
}

.collapsibleWrapper {
    border-bottom: rem(1) solid var(--mantine-color-gray-3);
    background-color: var(--mantine-color-gray-1);
}