bg-dom.css

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.BGFeedbackDialog {
	.pkgList {
		margin-bottom:1em;
		div {
			margin-left: 2em;
		}
	}
	progress {
		width: 100%;
		/* margin-bottom:1em; */
	}
}



atom-panel.BGOneExample {

	width:  100%;
	height: 100%;
	display: grid;
	grid-template-areas:
			"title    title    title"
			"code     dragger  demo"
			"errorMsg errorMsg errorMsg";
	grid-template-rows: min-content 1fr min-content;
	grid-template-columns: 1fr min-content 1fr;

	atom-pane-axis.horizontal & {
		grid-template-areas:
				"title"
				"code"
				"errorMsg"
				"dragger"
				"demo";
		grid-template-rows: min-content 1fr min-content min-content 1fr;
		grid-template-columns: none;
	}

	.title {
		grid-area: title;
		font-size: large;
		padding-bottom: 0.5em;
	}

	.code {
		grid-area: code;
		height: 100%;
		overflow: auto;
	}

	.demo {
		grid-area: demo;
		border: 1px solid;
		overflow: auto;
	}

	.errorMsg {
		grid-area: errorMsg;
		height: fit-content;
		background-color: rgb(255,200,200);
		font-size: 150%;
		border: 1px solid;
	}

	.dragger {
		grid-area: dragger;
		inline-size: 5px;
		block-size: 100%;
		border-inline: 1px solid #E0E0E0;
		cursor: ew-resize;
	}
	atom-pane-axis.horizontal & .dragger {
		inline-size: 100%;
		block-size:  5px;
		border-block: 1px solid #E0E0E0;
		cursor: ns-resize;
	}


	.code.syntaxError {
//		background-color: rgb(255,200,200);
	}
}