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

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

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

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

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

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

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

@mixin _oBannerSmallContent {
	padding: 0;
	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');

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul li {
		font-family: oPrivateFoundationGet('o3-type-body-lg-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-lg-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-lg-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-lg-font-weight');
	}
	@include oPrivateGridRespondTo($until: M) {
		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 _oBannerSmallHeading {
	padding-right: $_o-banner-spacing;
	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');

	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');
	}
}

@mixin _oBannerSmallActions {
	margin-top: oPrivateSpacingByName('s6');

	@include oPrivateGridRespondTo($until: M) {
		flex-direction: column;
		align-items: flex-start;
		margin-top: oPrivateSpacingByName('s6');
	}
}

@mixin _oBannerSmallAction {
	padding-right: div($_o-banner-spacing, 2);
}

@mixin _oBannerSmallActionSecondary {
	@include oPrivateGridRespondTo($until: M) {
		margin-top: div($_o-banner-spacing, 4);
	}
}

@mixin _oBannerSmall() {
	@include _oBannerSmallBase;

	.o-banner__outer {
		@include _oBannerSmallOuter;
	}
	.o-banner__inner {
		@include _oBannerSmallInner;
	}
	.o-banner__content {
		@include _oBannerSmallContent;
	}
	.o-banner__heading {
		@include _oBannerSmallHeading;
	}
	.o-banner__actions {
		@include _oBannerSmallActions;
	}
	.o-banner__action {
		@include _oBannerSmallAction;
	}
	.o-banner__action--secondary {
		@include _oBannerSmallActionSecondary;
	}
}
