.wp-block-table {
    @extend %block-spacing-sm;

    @include style-only {
        position: relative;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            left: var(--s, 0);
            width: 100%;
            height: 100%;
            pointer-events: none;
            content: "";
            background: linear-gradient(to right, rgba($color-dark, .25), rgba($color-dark, 0) 24px);
            opacity: 0;
            transition: opacity .5s;
        }

        &::after {
            background: linear-gradient(to left, rgba($color-dark, .25), rgba($color-dark, 0) 24px);
        }

        &.has-hidden-content-left {
            &::before {
                opacity: 1;
            }
        }

        &.has-hidden-content-right {
            &::after {
                opacity: 1;
            }
        }
    }

    table {
        &,
        &.has-fixed-layout {
            width: auto;
            min-width: 100%;

            td,
            th {
                @extend %text-sm;

                padding: 12px;
                text-align: left;
                word-break: normal;
                border: none;
            }

            th {
                font-weight: 700;
            }
        }
    }

    thead,
    tfoot {
        border: none;
    }

    :where(&) {
        thead,
        tfoot {
            --idle: transparent;
            --hover: var(--background-contrast-grey-hover);
            --active: var(--background-contrast-grey-active);

            color: var(--text-title-grey);
            background-color: #eee;
            background-color: var(--background-contrast-grey);
            background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey));
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 100% 2px;
        }

        tfoot {
            background-position: left top;
        }

        tbody {
            background: var(--background-alt-grey);

            tr:nth-child(2n) {
                background: var(--background-contrast-grey);
            }
        }
    }

    // tfoot doesn't exist in dsfr
    @each $color-name in $dsfr-color-names {
        &.fr-table--#{$color-name} tfoot {
            background-color: var(--background-contrast-#{$color-name});
            background-image: linear-gradient(0deg, var(--border-plain-#{$color-name}), var(--border-plain-#{$color-name}));

            --idle: transparent;
            --hover: var(--background-contrast-#{$color-name}-hover);
            --active: var(--background-contrast-#{$color-name}-active);
        }
    }
}
