@mixin _oBannerGetThemeMixin($theme, $include-layout-styles) {
	@if not index($_o-banner-themes, $theme) {
		@error "There is no theme '#{$theme}' available in o-banner, please use one of the following: #{$_o-banner-themes}.";
	}

	@if index($_o-banner-themes, $theme) {
		.o-banner--#{$theme} {
			@include _oBannerTheme($theme, $include-layout-styles);
		}
	}
}

@mixin _oBannerGetLayoutMixin($layout) {
	@if not index($_o-banner-layouts, $layout) {
		@error "There is no layout '#{$layout}' available in o-banner, please use one of the following: #{$_o-banner-layouts}.";
	}

	@if $layout == 'small' {
		.o-banner--small {
			@include _oBannerSmall();
		}
	}

	@if $layout == 'compact' {
		.o-banner--compact {
			@include _oBannerCompact();
		}
	}
}

@mixin _oBannerBase {
	position: fixed;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
}

@mixin _oBannerClosed {
	display: none;
}

@mixin _oBannerOuter {
	@include oPrivateVisualEffectsShadowContent('high');
	background: _oBannerGet('background-color');
	color: _oBannerGet('text-color');
	border-bottom: $_o-banner-brand-border solid transparent;
}

@mixin _oBannerInner {
	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');
	-webkit-font-smoothing: antialiased;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: map-get($o-pf-grid-layouts, XL);
	margin: 0 auto;
	padding: $_o-banner-spacing 0;
	padding-bottom: $_o-banner-spacing - $_o-banner-brand-border;
	box-sizing: border-box;

	@include oPrivateGridRespondTo($until: S) {
		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');
		display: block;
		padding: $_o-banner-spacing;
		padding-bottom: $_o-banner-spacing - $_o-banner-brand-border;
		padding-top: oPrivateSpacingByIncrement(7);
	}
}

@mixin _oBannerContent {
	// flex grow so banner content takes the full width
	// when there are no banner actions, e.g. if the user
	// only wants a banner to be dismissed with a close button,
	// or they want a custom call to action within banner
	// content
	flex-grow: 1;
	padding: 0 $_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');
		margin-top: 0;
		margin-bottom: oPrivateSpacingByName('s1');
	}
	p {
		margin-top: 0;
		margin-bottom: 0;
	}
	b,
	strong {
		@include oPrivateTypographySans($weight: 'semibold');
	}
	> ul {
		@include oPrivateTypographyList('unordered');
		margin-top: oPrivateSpacingByName('s3');
		margin-bottom: 0;

		li:before {
			color: inherit;
		}
	}
	a {
		@include oPrivateTypographyLink();
	}

	@include oPrivateGridRespondTo($until: S) {
		padding: 0;
	}
}

@mixin _oBannerContentLong {
	@include oPrivateGridRespondTo($until: M) {
		display: none;
	}
}

@mixin _oBannerContentShort {
	@include oPrivateGridRespondTo($from: M) {
		display: none;
	}
}

@mixin _oBannerHeading {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 0;
	}
	&:after {
		content: '';
		display: block;
		width: 100px;
		margin-top: oPrivateSpacingByName('s2');
		margin-bottom: oPrivateSpacingByName('s4');

		// Color is set separately for easier overriding later
		border-bottom: 0.6ex solid;
		border-color: _oBannerGet('heading-rule-color');
	}
}

@mixin _oBannerActions {
	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');
	display: flex;
	align-items: center;

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

@mixin _oBannerAction {
	padding-right: $_o-banner-spacing;

	@include oPrivateGridRespondTo($until: S) {
		padding-right: 0;
	}
}

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

@mixin _oBannerButton {
	@include oPrivateButtonsContentWithThemeOverride(
		$opts: (
			'size': 'big',
			'type': 'primary',
		),
		$theme-override: (
			'color': _oBannerGet('button-background-color'),
			'context': _oBannerGet('background-color'),
		)
	);
	white-space: nowrap;
}

@mixin _oBannerLink {
	@include oPrivateTypographyLink();
	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');
	white-space: nowrap;
	&:focus,
	&:focus-visible {
		outline-color: inherit;
	}
}

@mixin _oBannerCloseButton {
	@include oPrivateIconsContent(
		'cross',
		_oBannerGet('text-color'),
		$size: $_o-banner-close-button-size
	);
	// start: undo button styles
	appearance: none;
	color: inherit;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	// end: undo button styles
	$close-button-position: calc(
		(#{$_o-banner-spacing} - #{$_o-banner-close-button-size}) / 2
	);
	display: block;
	position: absolute;
	right: $close-button-position;
	top: $close-button-position;
}

/// Add a theme modifier for banners.
///
/// @param {String} $theme-name - The banner theme to output styles for. See README for available themes, or specify a custom one if providing $opts.
/// @param {Map} $opts [null] - A brand configuration which can be used to create a custom banner theme. See README for more examples.
/// @output The output includes the `.o-banner--THEME` modifier class definition, which includes all overrides.
/// @example scss - Existing banner theme
///   @include oBannerAddTheme('marketing');
/// @example scss - Custom banner theme
///   @include oBannerAddTheme('bubblegum', (
///       background-color: oPrivateColorsMix('candy', 'white', 75),
///       text-color: oPrivateFoundationGet('o3-color-palette-oxford-90')
///   ));
/// @access public
@mixin oBannerAddTheme($theme-name, $opts: null) {
	// If we have a custom config, we use that instead of one of the
	// preconfigured themes
	$variant: if($opts, $opts, $theme-name);

	.o-banner--#{$theme-name} {
		@include _oBannerTheme($variant);
	}
}
