/// Styles for a 'FlatTable'
/// @access private
@mixin _oTableResponsiveFlat {
	.o-table.o-table--responsive-flat {
		width: 100%;

		// hide elements added for the mobile version of the flat table
		.o-table__duplicate-row,
		.o-table__responsive-body {
			display: none;
		}

		@include oPrivateGridRespondTo($until: S) {
			// hide elements for the desktop version of the table
			thead,
			thead tr,
			thead th {
				display: none;
			}

			tbody:not(.o-table__responsive-body),
			tr:not(.o-table__duplicate-row) {
				display: none;
			}

			// show elements created for the mobile version of the flat table
			.o-table__responsive-body {
				display: table-row-group;
			}

			.o-table__duplicate-row {
				display: table-row;
			}

			th,
			td {
				box-sizing: border-box;
				padding: 10px;
				width: 50%;
			}

			// Add border between items
			tbody:not(:last-child) {
				border-bottom: 1px solid _oTableGet('table-data-color');
			}

			// Remove stripes when flat.
			&.o-table--row-stripes tr,
			&.o-table--row-stripes tr th {
				background-color: transparent;
			}

			// Alternate background colour of each item
			tbody {
				background-color: _oTableGet('table-background');
				&:nth-child(even) {
					background-color: _oTableGet('table-item-alternate-background', 'flat');
				}
			}

			&.o-table--horizontal-lines th:not(:last-of-type),
			&.o-table--horizontal-lines td:not(:last-of-type) {
				// When flat, only show row border if a colour is defined.
				// Else the browser will use a black border.
				@if _oTableGet('table-border-color') {
					border-bottom: 1px solid _oTableGet('table-border-color');
				}
			}

			.o-table__cell--numeric {
				text-align: left;
			}
		}
	}
}