.tableCell {
    color: var(--givewp-neutral-700);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    padding: var(--givewp-spacing-6) var(--givewp-spacing-3) calc(var(--givewp-spacing-6) + var(--givewp-spacing-5));
    position: relative;
    vertical-align: middle;

    & a {
        text-decoration: none;

        &:focus, &:hover, &:active {
            text-decoration: underline;
            transition: all 0.05s ease-in-out;
        }
    }

    &:first-child {
        padding-inline-start: var(--givewp-spacing-4);
    }

    &:last-child {
        padding-inline-end: var(--givewp-spacing-4);
    }

    input[type="checkbox"] {
        --transition: 0.2s ease;

        appearance: none;
        background-color: transparent;
        border-radius: var(--givewp-rounded-4);
        border: solid 1px var(--givewp-neutral-200);
        color: #2271b1;
        cursor: pointer;
        flex-shrink: 0;
        font-size: inherit;
        height: 1.5rem;
        margin: 0;
        margin: 0;
        padding: 0;
        transform: translateY(-1px);
        transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
        vertical-align: middle;
        width: 1.5rem;

        &::before {
            content: none;
        }

        &:focus {
            border-color: transparent;
            box-shadow: #2271b1 0px 0px 0px 0.125rem;
            outline: none;
        }

        &:checked,
        &:checked:active,
        &:checked:focus {
            background-color: #2271b1;
            background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgb%28255, 255, 255%29%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E");
            background-position: center;
            background-size: 1rem auto;
            background-repeat: no-repeat;
            border-color: #2271b1;
        }

        &[aria-invalid="false"] {
            border-color: var(--givewp-green-500);
        }

        &[aria-invalid="true"] {
            border-color: var(--givewp-red-400);
        }
    }

    :root {
        tr:first-child {
            .tableCell {
                padding-block-start: var(--givewp-spacing-6);
            }
        }

        tr:last-child {
            .tableCell {
                padding-block-end: var(--givewp-spacing-12);
            }
        }
    }

    &[data-column-id="campaigns-status"],
    &[data-column-id="donationForms-status"],
    &[data-column-id="donations-paymentType"],
    &[data-column-id="donations-status"],
    &[data-column-id="donations-subscriptionDonationType"],
    &[data-column-id="donors-donorType"] {
        text-align: center;
    }

    &[data-column-id="campaigns-donationsCount"],
    &[data-column-id="campaigns-revenue"],
    &[data-column-id="donationForms-donationCount"],
    &[data-column-id="donationForms-donationRevenue"],
    &[data-column-id="donations-amount"],
    &[data-column-id="donors-donationCount"],
    &[data-column-id="donors-donationRevenue"],
    &[data-column-id="donors-latestDonation"],
    &[data-column-id="subscriptions-amount"] {
        text-align: right;
    }
}

.tableRowHeader {
    z-index: 1;
    text-align: start;

    > a {
        font-size: 1.125rem;
        font-weight: 700;
        text-decoration: none;
    }
}

.statusBadge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7rem;
    height: 2rem;
    background-color: var(--give-primary-color);
    border-radius: 0.1875rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    column-gap: 1rem;
    text-transform: uppercase;
}

.idBadge {
    display: inline-flex;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    background-color: #f3f2ec;
    border: 0.0625rem solid #e0dfd9;
    border-radius: 9999px;
    color: #5f5f5f;
    padding-block: 0.1em;
    padding-inline: 0.5em;
    text-align: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.idBadge::before {
    content: '#';
    font-size: 0.615em;
    padding-inline-end: 0.25em;
}