.c-data-table {
    // change the bg color and cursor on hover/active events
    .drag-handle {
        cursor: move; // fallback if grab cursor is unsupported
        cursor: grab;
        color: $color-gray--020;
        transition: color 120ms ease-in 80ms;
        padding: 0;
        margin: 0;

        &:hover {
            color: $color-gray--070;
        }
        &:active {
            cursor: grabbing;
        }
    }

    // while dragging, add bg color to the row so it's not opaque
    .sortable-chosen {
        background-color: $color-white;
    }
    .sortable-ghost .drag-handle {
        visibility: hidden;
    }

    // while dragging, this prevents the hovered handle on the original row from showing and disables other hover styles
    .c-data-table--no-background .c-data-table__row {
        &:hover, &:focus, &:active {
            background-color: inherit;
            border-color: $color-gray--015;
        }
    }
}