/* 3/3/22: Copy of edp-table.less from edpweb converted to css, with variables added to match edpweb/ebay skin values */

:root {
	/* colors */
	--color-text-default: var(--color-grey7);
	--color-text-secondary: var(--color-grey5);
	--color-background-default: var(--color-white);
	--color-background-highlight: var(--color-grey1);
	--color-border-default: var(--color-grey7);
	--color-border-secondary: var(--color-grey3);
  
	/* Grey */
	--color-white: #fff;
	--color-grey1: #f7f7f7;
	--color-grey2: #e5e5e5;
	--color-grey3: #c7c7c7;
	--color-grey4: #a2a2a2;
	--color-grey5: #707070;
	--color-grey6: #414141;
	--color-grey7: #111820;
	--color-black: #000;

	/* typography */
	--font-size-small: 0.75rem; /* 12px */
	--line-height-small: 18px;
	--font-size-regular: 0.875rem; /* 14px */
	--line-height-regular: 20px;
	--font-size-medium: 1rem; /* 16px */
    --line-height-medium: 24px;
	--max-line-length: 46em;
	--font-weight-bold: 700;

	/* spacing, padding, margins */
	--spacing-large: 32px;
	--spacing-small: 16px;
	--spacing-extra-small: 8px;
	--spacing-tiny: 4px;
	
	/* screen sizes for media queries*/
	--screen-size-5: 960px;
	--screen-size-3: 600px;

	/* borders */
	--border-width-default: 1px;
	--border-style-default: solid;
	--border-color-default: var(--color-border-default);
	--border-color-secondary: var(--color-border-secondary);
}

table {
	max-width: 100%;
	margin: var(--spacing-large) 0;
	overflow-x: auto;
	border-collapse: collapse;
	border: var(--border-width-default) var(--border-style-default) var(--border-color-default);
}

table table {
	margin: 0;
}

table ul {
	padding-left: var(--spacing-small);
}

tbody tr:nth-child(even):not([rowspan]) {
	background: var(--color-background-highlight);
}

tbody td[rowspan] {
	background: var(--color-white);
}

th, 
td {
	text-align: left;
	vertical-align: top;
	font-size: var(--font-size-regular);
	line-height: var(--line-height-regular);
	max-width: var(--max-line-length);
	padding: var(--spacing-extra-small) var(--spacing-small);
	border: var(--border-width-default) var(--border-style-default) var(--border-color-default);
	overflow-wrap: break-word;
}

td p,
td li {
	font-size: var(--font-size-regular);
	line-height: var(--line-height-regular);
}

th p:first-child, 
td p:first-child, 
td ul:first-child:not(:only-child), 
td ul:first-child > li:first-child {
	margin-top: 0;
}

th p:last-child, 
td p:last-child, 
td ul:last-child, 
td ul:last-child > li:last-child {
	margin-bottom: 0;
}

td div[class^="msgbox"],
td .tablenote {
	padding: var(--spacing-extra-small);
}

th {
	font-weight: var(--font-weight-bold);
	vertical-align: bottom;
	background: var(--color-background-highlight);
}

td:nth-child(n + 3) {
	hyphens: auto;
}

caption {
    font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-text-secondary);
}

.condensed td,
.condensed th,
th.condensed,
td.condensed  {
	padding: var(--spacing-extra-small);
}

@media only screen and (max-width: var(--screen-size-5)) {
/* Don't think these are ever used in Flare tables, but leaving in just in case */
	table.JColResizer {
		table-layout: auto;
   }
	.JCLRgrips {
		display: none;
   }
}

@media only screen and (max-width: var(--screen-size-3)) {
	/* Can remove the th selector when the table-fluid javascript is implemented */
	th,
	td {
		padding: var(--spacing-extra-small);
	}
   
   /* Responsive tables */
	.page-grid table {
		width: 100%;
		margin-top: var(--spacing-small);
		border-bottom: medium solid var(--border-color-default);
	}
	
	.page-grid table col {
		width: 100%;
	}

	/* Add this when the table-fluid javascript is implemented
        thead {
            display: none;
        }
    */

	/* Remove this when the table-fluid javascript is implemented */
   .page-grid thead th {
		display: block;
		max-width: 100%;
		border-left: none;
		border-right: none;
		border-top: none;
   }
   
	.page-grid tr td:first-child {
		border-top: medium solid var(--border-color-default);
   }
	.page-grid tbody td {
		display: block;
		background-color: var(--color-background-default);
		max-width: 100%;
		border-left: none;
		border-right: none;
		border-top: none;
   }
   /* Add this when the table-fluid javascript is implemented
        tbody td:before {
            content: attr(data-th);
            display: block;
            .typography-small-secondary();
        }
    */
}