@use "../../01-core/prefix" as *;
@use "./table.mixins" as table;
@use "../../01-core/external" as *;

@layer ss.components {
    .#{$ss-prefix-module}-table {
        @include table.ss-table;

        th,
        td {
            @include table.ss-table-cell;
        }

        thead th {
            @include table.ss-table-head;
        }
    }

    .#{$ss-prefix-module}-table--bordered {
        @include table.ss-table-bordered;
    }
    .#{$ss-prefix-module}-table--striped {
        @include table.ss-table-striped;
    }
    .#{$ss-prefix-module}-table--hover {
        @include table.ss-table-hover;
    }

    // Responsive stacked variant. Ported from legacy
    // `bup/mixins/body_molecules/table/_table_responsive.scss`. Cells use
    // `data-label="..."` to render their column name when the layout
    // collapses to a single column on narrow viewports.
    .#{$ss-prefix-module}-table--stacked {
        width: 100%;

        @media screen and (max-width: 48em) {
            thead {
                display: none;
            }

            tbody tr {
                display: block;
                margin-bottom: var(--ss-space-md, q(16));
                border: q(1) solid var(--ss-color-line-secondary);
                border-radius: var(--ss-radius-sm, q(4));
                background-color: var(--ss-color-fill, #fff);

                &:last-child {
                    margin-bottom: 0;
                }
            }

            tbody td {
                display: block;
                padding: var(--ss-space-sm, q(12)) var(--ss-space-md, q(16));
                text-align: right;
                border-bottom: q(1) solid var(--ss-color-line-secondary);

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

                &::before {
                    content: attr(data-label);
                    float: left;
                    font-weight: 600;
                    color: var(--ss-color-text-primary);
                }

                &:empty {
                    display: none;
                }
            }

            colgroup,
            col {
                display: none;
            }
        }
    }
}