@use "sass:meta";

body {
	font: 90%/1.5em system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}

main,
section {
	position: relative;
}

div.demo-html > table {
	width: 100%;
}

body.dt-example {
	div.container {
		max-width: 980px;
		margin: 0 auto;
	}

	h1 {
		font-weight: normal;
		font-size: 3em;
		line-height: 1em;
		margin: 1em 0;
	  
		span {
			display: block;
			padding-top: 0.5em;
			font-size: 0.5em;
			line-height: 1em;
		}
	}

	h2 {
		font-size: 2em;
		margin: 1em 0;
	}

	h3 {
		font-size: 1.3em;
		margin: 1em 0;
	}
}

a {
	cursor: pointer;
	color: #3174c7;
	text-decoration: none;
}
  
p > a:hover {
	text-decoration: underline;
}
  
div {
	&.toc {
		ul {
			color: #4E6CA3;
			list-style-type: none;
			padding-left: 0;
		}
  
		li {
			padding: 0.2em 1em;
			border-left: 4px solid transparent;

			&.active {
				border-left: 4px solid #458ae0;
			}
		}
	}
  
	&.epilogue {
		text-align: center;
		margin-top: 2em;
	}
}
  
p.copyright {
	font-size: 0.8em;
	padding-bottom: 2em;
	margin-bottom: 0;
	margin-top: 1em;
}
  
.clear {
	clear: both;
	height: 0;
}
  
div {
	&.footer {
		position: relative;
		margin-top: 3em;
		border-top: 1px solid #999;
		background-color: #eee;
		padding: 0;
  
		> div {
			&.liner {
				max-width: 960px;
				margin: 0 auto;
			}

			&.gradient {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 6px;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);

				/* W3C */
			}
		}
	}
}

div.column_half {
	float: left;
	width: 49%;
	padding-right: 1%;
}


@media only screen and (max-width: 979px) {
	div {
		&.container, &.footer {
			padding: 0 1em;
		}
	}

	body.dt-example h1 {
		margin: 0.5em auto;
	}

	div.dt-demo-options {
		position: relative;
		margin: 1em auto 0;
		width: fit-content;
	}
}

html.dark {
	body {
		background-color: rgb(33, 37, 41);
		color: rgb(229, 233, 238);

		&.dt-example-bootstrap5 {
			background-color: var(--bs-body-bg);
			color: var(--bs-body-color);
		}

		&.dt-example-bulma {
			background-color: var(--bulma-body-background-color);
			color: var(--bulma-body-color);
		}
	}

	div.info a,
	div.dt-tabs a,
	div.footer a {
		color: rgb(110, 168, 254);
	}
  
	div {
		&.footer {
			border-top-color: rgb(26, 27, 27);
			background-color: rgb(31, 34, 36);
		}
	}

	input,
	select {
		color-scheme: dark;
	}
}

// Although most of the switching is done by the class name to allow easy
// switching it use this to stop the flicker of white between page loads
@media (prefers-color-scheme: dark) {
	body {
		background-color: rgb(33, 37, 41);
		color: rgb(229, 233, 238);
	}

	html.light {
		body {
			background-color: #fff;
			color: #333;
		}
	}
}

@include meta.load-css('styles/box.scss');
@include meta.load-css('styles/columns.scss');
@include meta.load-css('styles/code.scss');
@include meta.load-css('styles/selector.scss');
@include meta.load-css('styles/tabs.scss');
@include meta.load-css('styles/framework-overrides.scss');
