@use "../abstract" as abstract;

table:not(.no-responsive-table) {
    width: 100%;
    
    @include abstract.for-narrow-screen {
        display: block;

        > tbody {
            display: block;
        }

        tr {
            display: block;
            padding: 7px 0;
            border-style: none;
            border-bottom-style: solid;
            border-width: 1px;

            &:nth-child(2) {
                border-top-style: solid;
            }

            > td {
                display: block;
                text-align: left !important;
            }
        }
    }
}

table:not(.alternating) {
    @include abstract.for-narrow-screen {
        tr:nth-child(2n+1) {
            background-color: #bbb;
        }
    }
}
