---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

// General print styles
.print-only {
	display: none;
}
@media print {
	.print-only {
		display: block;
	}
	.screen-only {
		display: none;
	}
	@page {
		size: landscape;
	}
	.o-layout {
		display: block;
	}
	.o-layout__header,
	.o-layout__footer,
	.o-layout__sidebar {
		display: none;
	}
}

// Competency styles
.theme-summary {
	font-style: italic;
}

.competency {
	padding: 1em;
	margin-bottom: 1em;
	border: solid 1px #ccc;
	background-color: #f4f4f5;
	break-inside: avoid;
	> * {
		margin: 0 !important;
		&:not(:first-child) {
			margin-top: .5em !important;
		}
	}
}
.competency__meta {
	display: flex;
	max-width: 100% !important;
	justify-content: space-between;
}
.competency__feedback {
	font-size: 14px;
}

// Overview styles (for competencies overview)
.level-overview-summary {
	display: block;
	max-height: 1.4em * 5;
	overflow: hidden;
	position: relative;

	&:after {
		content: "";
		display: block;
		width: 100%;
		height: 1.4em * 4;
		position: absolute;
		bottom: 0;
		background: linear-gradient(0deg, #fff 0, rgba(255,255,255,0) 100%);
	}
}

.o-message-in-body {
	margin-bottom: 28px;
	float: none;
}

// Layout overrides for the competencies page to force three columns max
.o-layout__overview {
	grid-template-columns: repeat(var(--_o-layout-overview-columns, auto-fit), minmax(300px, 1fr));
}