/* console.css

	Sample CSS file for the $p.console output

	Note: this assumes that the console element has the ID 'console'. Please adapt to your setup!
*/

#console {
	& {
		display: block;
		width: 100%;
		margin: .25em 0;
		padding: .25em .25em 0 .25em;
		box-shadow: inset .125em .125em .125em #999;
		font-family: Consolas, Courier, monospace;
	}

	details {
		& > summary {
			padding: .3em;
			border-bottom: #666 solid 1px;
			cursor: pointer;
		}
		&[open] {
			border-bottom: none 0;
		}
		&[open] > ul {
			margin-left: .9em;
		}
	}

	ul {
		& {
			list-style: none;
			margin: 0; padding: 0;
			overflow: auto;
		}
		li {
			& {
				color: #333;
				width: calc(100% - .47em);
				min-width: fit-content;
				padding: .25em;
				border-bottom: #999 solid 1px;
				box-sizing: border-box;
			}
			&.info {
				color: #5C5C5F;
			}
			&.info::before {
				content: '\24d8 ';
				color: #3D3D3D;
			}
			&.warn {
				background-color: #FFFBD6;
				color: #715100;
			}
			&.warn::before {
				content: '\26A0 ';
				color: #BE9B00;
			}
			&.error, &.assert_fail {
				background-color: #FDF2F5;
				color: #A4000F;
			}
			&.error::before {
				content: '\2B23 ';
				color: #D70022;
			}
			&.assert_pass::before {
				content: '\2705 ';
				color: #16C60C;
			}
			&.assert_fail::before {
				content: '\274C ';
				color: #F03A17;
			}
		}
	}

	table {
		& {
			border: #666 solid 1px;
			border-spacing: 0;
			border-collapse: collapse;
		}
		thead {
			border-bottom: #666 solid 2px;
		}
		th, td {
			padding: .25em;
			border: #666 solid 1px;
		}
		td[class]::before {
			content: attr(class);
			display: inline-block;
			background-color: #999;
			color: #FFF;
			padding: 0 2pt;
			border-radius: 2pt;
			margin-right: .25em;
		}
	}
}