.eui-21 {
    table.eds-table-default {
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
        color: var(--eds-c-foreground);
        max-width: 100%;
        overflow: auto;
        position: relative;

        th,
        td {
            &:first-child {
                border-left: 0;
            }

            &:last-child {
                border-right: 0;
            }
        }

        // Overall settings (default)
        thead > tr > th,
        tbody > tr > td,
        tfoot > tr > td {
            vertical-align: middle;
        }

        tr > th,
        tr > td {
            padding: var(--eds-sp-s);
            text-align: left;
        }

        thead {
            th {
                color: var(--eds-c-foreground-default);
                padding: var(--eds-sp-m) var(--eds-sp-s);
                vertical-align: middle;
                font: var(--eds-f-label-m-semi-bold);
            }

            tr {
                border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
                border-top: 0;
                background: var(--eds-c-surface-elevation);
            }
        }

        // Striped & hovered tables by default
        tbody {
            tr:nth-of-type(odd) {
                background-color: transparent;

                &:hover {
                    background-color: var(--eds-c-surface-hover);
                }
            }

            tr:nth-of-type(even) {
                background-color: var(--eds-c-surface-elevation);

                &:hover {
                    background-color: var(--eds-c-surface-hover);
                }
            }
        }

        tfoot {
            tr {
                background: var(--eds-c-surface-elevation);
            }
        }

        tr {
            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
            display: table-row;
        }

        &--no-zebra {
            tbody {
                tr:nth-of-type(odd) {
                    background-color: transparent;
                }

                tr:nth-of-type(even) {
                    background-color: transparent;
                }
            }
        }

        // Compact table
        &--compact {
            thead {
                th {
                    padding: var(--eds-sp-xs) var(--eds-sp-s);
                }
            }

            tr > td {
                padding: var(--eds-sp-3xs) var(--eds-sp-s);
            }
        }

        // Responsive table
        &--responsive {
            display: table;
            width: 100%;

            &--bordered {
                border: 0;
            }
        }

        // NoWrap table content
        &--nowrap {
            white-space: nowrap;

            thead > tr > th,
            tbody > tr > td,
            tfoot > tr > td {
                white-space: nowrap;
            }
        }

        // Centered table
        &--centered {
            display: table;
            margin: 0 auto;
            width: auto;
        }

        // Middle aligned cells content
        &--align-middle {
            thead > tr > th,
            tbody > tr > td,
            tfoot > tr > td {
                vertical-align: middle;
            }
        }
    }
}