@media screen and (max-width: $j-datatable-mobile-breakpoint) {
    .table-container {
        margin-right: 5px;
        margin-left: 5px;
    }

    .table.has-mobile-cards {
        margin-right: 5px;
        margin-left: 5px;

        thead {
            display: none;
        }

        tfoot {
            th {
                border: 0; // Disable is-bordered
                display: inherit;
            }
        }

        tr {
            // Card style — Cannot extend inside media query
            box-shadow: 0 2px 3px rgba($j-datatable-box-shadow, 0.1), 0 0 0 1px rgba($j-datatable-box-shadow, 0.1);
            max-width: 100%;
            position: relative;
            display: block;

            td {
                border: 0; // Disable is-bordered
                display: inherit;

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

            &:not(:last-child) {
                margin-bottom: 1rem;
            }

            // Disables is-*
            &:not([class*="is-"]) {
                background: inherit;

                &:hover {
                    background-color: inherit;
                }
            }

            &.detail {
                margin-top: -1rem;
            }
        }

        tr:not(.detail):not(.is-empty):not(.table-footer) {
            td {
                display: flex;
                width: auto;
                justify-content: space-between;
                text-align: right;
                border-bottom: 1px solid $j-datatable-border-bottom-color;

                &:before {
                    content: attr(data-label);
                    font-weight: 400;
                    padding-right: 0.5em;
                    text-align: left;
                }
            }
        }
    }
}