.sortable-ghost {
    visibility: hidden;
    color: transparent;
    background-color: $color-gray--010;
    border-left-color: transparent;
    border-right-color: transparent;
}

.drag-handle__row, .delete-handle__row {
    position: relative;
}

.drag-handle__row:hover .drag-handle__wrapper, .delete-handle__row:hover .delete-handle__wrapper {
    visibility: visible;
}

.drag-handle__hidden.drag-handle__row:hover .drag-handle__wrapper .drag-handle .fa-arrows-alt {
    visibility: hidden;
}

.drag-handle__contents, .delete-handle__contents {
    flex-grow: 1;
}

.drag-handle__wrapper {
    position: absolute;
    top: 50%;
    transform: translate(-2em, -50%);
    visibility: hidden;
}

.drag-handle {
    cursor: move; // fallback if grab cursor is unsupported
    cursor: grab;
    color: $color-gray--020;
    transition: color 120ms ease-in 80ms;
    padding: 1em;
    margin: -1em;

    // Apply a "closed-hand" cursor during drag operation.
    &:active, &:focus {
        cursor: grabbing;
    }

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

.delete-handle__wrapper {
    position: absolute;
    top: 1.25em;
    transform: translate(-2em, -50%);
    visibility: hidden;
    left: 100%;
}

.delete-handle {
    cursor: pointer;
    transition: color 120ms ease-in 80ms;
    padding: 1em;
    margin: -1em;

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