table.od {
    max-width: 100%;
    overflow-x: auto;

    th,
    td {
        @extend %p-3;
        text-align: left;
        font-size: 15px;
    }

    th {
        text-transform: capitalize;
        @extend %bg-slate-100;
        border: 1px solid color-var(slate, 400);
        border-top: 0;
        border-bottom: 0;

        &:first-child {
            border-top-left-radius: 5px;
            border-left-color: color-var(slate, 100);
        }

        &:last-child {
            border-top-right-radius: 5px;
            border-right-color: color-var(slate, 100);
        }
    }

    tbody {
        tr {
            border-bottom: 1px solid color-var(gray, 300);

            &:last-child {
                border-bottom: none;
            }

            &:hover {
                @extend %bg-slate-50;
            }

            td {
                @extend %p-2;
                background: white;
                border: 1px solid color-var(gray, 300);
                border-top: 0;

                img {
                    @extend %rounded-full;
                }
            }
        }
    }

    // Dark Mode Support
    html.dark & {
        th {
            @extend %bg-slate-900;
            color: white;
            border-color: color-var(slate, 800) !important;
        }

        tbody {
            tr {
                @extend %bg-slate-800;
                color: white;
                border-color: color-var(slate, 700);

                &:hover {
                    @extend %bg-slate-950;
                }

                td {
                    @extend %bg-slate-800;
                    border-color: color-var(slate, 700);
                }
            }
        }
    }
}