// Tables
//
// Markup:
// <table class="px2-table">
//     <thead>
//         <tr>
//             <th>head1</th>
//             <th>head2</th>
//             <th>head3</th>
//             <th>head4</th>
//         </tr>
//     </thead>
//     <tfoot>
//         <tr>
//             <th>foot1</th>
//             <th>foot2</th>
//             <th>foot3</th>
//             <th>foot4</th>
//         </tr>
//     </tfoot>
//     <tbody>
//         <tr>
//             <th>th</th>
//             <td>td2</td>
//             <td>td3</td>
//             <td>td4</td>
//         </tr>
//     </tbody>
// </table>
//
// Styleguide 4.0

.px2-table{
	border: none;
	border-collapse: collapse;
	text-align: left;

	th,
	td {
		vertical-align: top;
		border: 1px solid #999999;
		background: $px2-background-color; // fallback
		background: var(--px2-background-color, $px2-background-color);
		padding: 10px;
	}

	th {
		background: #e7e7e7;
	}

	thead th,
	tfoot th {
		background: #d9d9d9;
		text-align: center;
	}

	thead td,
	tfoot td {
		background: #eeeeee;
	}
}