// ================================================
// Responsive Table View Template Styles for GravityView
// https://www.gravitykit.com
// ================================================

@import "table-view-legacy";

/**
 * @see https://j.eremy.net/responsive-table/
 *
 * Note: max-width based on Bootstrap: https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints
 */
@media screen and ( max-width: 575.98px ) {
	.gv-table-view {
		thead,
		tfoot {
			display: none;
		}

		tr {
			display: block;
			position: relative;
			padding: 1.2em 0;
			overflow-x: auto;

			&:first-of-type {
				border-top: 1px solid #ccc;
			}

			td {
				display: table-row;

				&:before {
					content: attr( data-label );
					font-weight: bold;
					display: table-cell;
					padding: 0.2em 0.6em 0.2em 0;
					text-align: right;
					width: 40%;
				}

				&:last-child:after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					border-bottom: 1px solid #ccc;
					width: 100%;
				}
			}
		}
	}
}