.deleted {
    animation: disappear 400ms ease-in;
    animation-fill-mode: forwards;
    pointer-events: none;
}

@keyframes disappear {
    0% {
        filter: grayscale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        filter: grayscale(1);
        opacity: 0;
    }
}

tr.duplicated {
    animation: disappear 0.5s ease-in reverse;
}

.tableRowActions {
    --column-gap: 1.25rem;
    position: absolute;
    inset-block-end: 1rem;
    display: flex;
    align-items: center;
    column-gap: var(--column-gap);
    word-break: keep-all;
    font-size: 0.875rem;
    font-weight: 600;
    inset-block-end: initial;
    line-height: 1.29;
    margin-top: var(--givewp-spacing-3);

    > * {
        position: relative;
        color: #0878b0;
        font-weight: 400;
        line-height: 1;
        flex-shrink: 0;
    }

    > * + ::before {
        position: absolute;
        color: var(--givewp-neutral-200);
        background: none;
        content: "|";
        font-size: 0.8125rem;
        font-weight: 600;
        pointer-events: none;
        left: calc(var(--column-gap) * -0.5);
        transform: translateX(-50%);
    }

    > a {
        text-decoration: none;
    }

    &:focus-within {
        opacity: 1;
    }
}

.tableRow {
    background-color: var(--givewp-shades-white);

    &:hover {
        > * {
            background-color: var(--givewp-grey-5);
        }

        .tableRowActions {
            opacity: 1;
        }
    }

    & .start {
        text-align: start;
    }

    & .center {
        text-align: center;
    }

    & .end {
        text-align: end;
    }
}

.donationStatus {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    align-items: center;

    & > * {
        flex-shrink: 0;
    }
}

.statusMessage {
    font-weight: 600;
    font-size: 1.2em;
}

div.pending, div.processing, div.preapproval {
    background-color: rgba(8, 120, 176);
}

div.draft, div.auto-draft {
    background-color: rgba(244, 148, 32);
}

div.future {
    background-color: rgba(164, 99, 191);
}

div.trash, div.failed, div.revoked {
    background-color: rgba(232, 75, 59);
}

div.private, div.refunded {
    background-color: rgba(51, 51, 51, 1);
}

div.abandoned {
    background-color: rgba(244, 197, 32, 1)
}

.unclickable {
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .tableRowActions {
        opacity: 0;
    }
}

.tableRow:hover {
    :global {
        .givewp-default-form-pill {
            opacity: 0;
        }
    }
}