.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 {
    position: absolute;
    inset-block-end: 1rem;

    display: flex;
    align-items: center;
    column-gap: 2rem;
    word-break: keep-all;
    transition: opacity 150ms ease-in-out;

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

    > * + ::before {
        position: absolute;
        content: "";
        inset-block: auto;
        inset-inline-start: calc(-1.0625rem);
        block-size: 110%;
        inline-size: 0.125rem;
        background-color: #dedede;
    }

    > a {
        text-decoration: none;
    }

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

.tableRow {
    &:nth-child(odd) {
        background-color: #f6f7f7;
    }

    &:nth-child(even) {
        background-color: #fff;
    }

    &:hover .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;
    padding-inline: 2.5em;
    padding-block: 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;
}

.monetary {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--give-primary-color);
}

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