@mixin _oBannerCompactBase {
	width: 100%;
	margin: 0;

	@include oPrivateGridRespondTo(S) {
		width: oPrivateGridColspan(7);
		margin: div($_o-banner-spacing, 2);
	}

	@include oPrivateGridRespondTo(M) {
		width: oPrivateGridColspan(6);
	}

	@include oPrivateGridRespondTo(L) {
		width: oPrivateGridColspan(5);
	}

	@include oPrivateGridRespondTo(XL) {
		width: div(map-get($o-pf-grid-layouts, XL), 2.5); // width is 40% grid
		left: calc(
			(100vw - #{map-get($o-pf-grid-layouts, XL)}) / 2
		); // ((viewport - grid width) / 2)
	}
}

@mixin _oBannerCompactOuter {
	background-color: transparent;
	box-shadow: none;
}

@mixin _oBannerCompactInner {
	@include oPrivateVisualEffectsShadowContent('high');
	font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
	font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
	line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
	font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
	background: _oBannerGet('background-color');
	display: block;
	padding: $_o-banner-spacing;
	padding-top: oPrivateSpacingByIncrement(7);
	max-width: none;
}

@mixin _oBannerCompactContent {
	font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
	font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
	line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
	font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
	padding: 0;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul li {
		font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');
	}
}

@mixin _oBannerCompactHeading {
	font-family: oPrivateFoundationGet('o3-type-title-md-font-family');
	font-size: oPrivateFoundationGet('o3-type-title-md-font-size');
	line-height: oPrivateFoundationGet('o3-type-title-md-line-height');
	font-weight: oPrivateFoundationGet('o3-type-title-md-font-weight');
	padding-right: $_o-banner-spacing;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: oPrivateFoundationGet('o3-type-title-lg-font-family');
		font-size: oPrivateFoundationGet('o3-type-title-lg-font-size');
		line-height: oPrivateFoundationGet('o3-type-title-lg-line-height');
		font-weight: oPrivateFoundationGet('o3-type-title-lg-font-weight');
	}

	&:after {
		margin-top: oPrivateSpacingByName('s2');
		margin-bottom: oPrivateSpacingByName('s3');
		width: 60px;
		border-bottom-width: oPrivateSpacingByIncrement(1);
	}
}

@mixin _oBannerCompactActions {
	@include _oBannerSmallActions;
}

@mixin _oBannerCompactAction {
	@include _oBannerSmallAction;
}

@mixin _oBannerCompactActionSecondary {
	@include _oBannerSmallActionSecondary;
}

@mixin _oBannerCompact() {
	@include _oBannerCompactBase;

	.o-banner__outer {
		@include _oBannerCompactOuter;
	}
	.o-banner__inner {
		@include _oBannerCompactInner;
	}
	.o-banner__content {
		@include _oBannerCompactContent;
	}
	.o-banner__heading {
		@include _oBannerCompactHeading;
	}
	.o-banner__actions {
		@include _oBannerCompactActions;
	}
	.o-banner__action {
		@include _oBannerCompactAction;
	}
	.o-banner__action--secondary {
		@include _oBannerCompactActionSecondary;
	}
}
