@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';

// Banners can be put at the top of a page to draw attention. A banner has
// two children:
// - A .background element which contains an image to render behind the text
// - A .content which holds the actual text.
.page-banner {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: relative;
	min-height: 60vh;
	background-color: colors.$blue-800;

	@include colors.coderdojo-theme {
		background-color: colors.$brown-800;
	}

	> .background {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	> .content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;

		> div {
			display: inline-block;
			padding: layout.$small-gap layout.$normal-gap;
			font-size: typography.$subheading-size;
			background-color: colors.$yellow-600;

			@include colors.coderdojo-theme {
				background-color: colors.$brown-800;
				color: colors.$inverse-text;
			}

			> p:first-child {
				margin-top: 0;
			}

			> p:last-child {
				margin-bottom: 0;
			}

			> p {
				margin-left: 0;
				margin-right: 0;
			}
		}

		> .title {
			padding: 0 layout.$normal-gap;
			line-height: 5rem;
			font-size: typography.$title-size;
			font-weight: typography.$emphasized-weight;
			background-color: colors.$teal-500;

			@include colors.coderdojo-theme {
				background-color: colors.$orange-500;
			}
		}

		@media screen and (min-width: layout.$breakpoint) {
			padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw);
		}
	}
}

%callout {
	background-color: colors.$yellow-300;
	color: colors.$blue-800;
}

.page-callout {
	@extend %callout;
	padding: layout.$normal-gap;
}

.inline-callout {
	@extend %callout;
	display: inline-block;
	font-style: normal;
	padding: layout.$small-gap layout.$normal-gap;
}