$popover-bg: $white !default;
$popover-border-color: rgba($black, 0.2) !default;
$popover-border-width: $border-width !default;

$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: calc(
	#{$popover-border-radius} - #{$popover-border-width}
) !default;

$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
$popover-font-size: $font-size-sm !default;
$popover-max-width: 276px !default;

$popover-inline-scroller-max-height: 14.75rem !default;

$popover-header-bg: clay-darken($popover-bg, 3%) !default;
$popover-header-border-color: null !default;
$popover-header-color: $headings-color !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-font-weight: $font-weight-semi-bold !default;
$popover-header-margin-x: null !default;
$popover-header-margin-y: 0 !default;
$popover-header-padding-x: 0.75rem !default;
$popover-header-padding-y: 0.5rem !default;

$popover-body-color: $body-color !default;
$popover-body-padding-x: $popover-header-padding-x !default;
$popover-body-padding-y: $popover-header-padding-y !default;

$popover-offset-border-width: $popover-inner-border-radius !default;

$popover-arrow-color: $popover-bg !default;
$popover-arrow-height: 0.5rem !default;
$popover-arrow-offset: 0.375rem !default;
$popover-arrow-width: 1rem !default;

$popover-arrow-outer-color: rgba($black, 0.25) !default;

$popover-bottom-arrow-color: $popover-header-bg !default;
$popover-bottom-left-arrow-color: $popover-header-bg !default;
$popover-bottom-right-arrow-color: $popover-header-bg !default;
$popover-left-arrow-color: $popover-arrow-color !default;
$popover-left-bottom-arrow-color: null !default;
$popover-left-top-arrow-color: $popover-header-bg !default;
$popover-right-arrow-color: $popover-arrow-color !default;
$popover-right-bottom-arrow-color: null !default;
$popover-right-top-arrow-color: $popover-header-bg !default;
$popover-top-arrow-color: $popover-arrow-color !default;
$popover-top-left-arrow-color: null !default;
$popover-top-right-arrow-color: null !default;

// .popover

$popover: () !default;
$popover: map-deep-merge(
	(
		background-clip: padding-box,
		background-color: $popover-bg,
		border: $popover-border-width solid $popover-border-color,
		border-radius: clay-enable-rounded($popover-border-radius),
		box-shadow: clay-enable-shadows($popover-box-shadow),
		display: block,
		font-family: $font-family-base,
		font-size: $popover-font-size,
		font-style: normal,
		font-weight: $font-weight-normal,
		left: 0,
		letter-spacing: normal,
		line-break: auto,
		line-height: $line-height-base,
		max-width: $popover-max-width,
		position: absolute,
		text-align: left,
		text-decoration: none,
		text-shadow: none,
		text-transform: none,
		top: 0,
		white-space: normal,
		word-break: normal,
		word-spacing: normal,
		word-wrap: break-word,
		z-index: $zindex-popover,
		focus: (
			box-shadow: $component-focus-box-shadow,
			outline: 0,
		),
		arrow: (
			display: block,
			height: $popover-arrow-height,
			margin: 0 $popover-border-radius,
			position: absolute,
			width: $popover-arrow-width,
			before: (
				border-color: transparent,
				border-style: solid,
				content: '',
				display: block,
				position: absolute,
			),
			after: (
				border-color: transparent,
				border-style: solid,
				content: '',
				display: block,
				position: absolute,
			),
		),
		inline-scroller: (
			max-height: $popover-inline-scroller-max-height,
		),
	),
	$popover
);

// Popovers

$popovers: () !default;
$popovers: map-deep-merge(
	(
		popover: $popover,
		// @deprecated as of v3.141.0 popover-secondary
		popover-secondary:
			(
				box-shadow: 0 8px 16px 0 rgba($primary, 0.16),
				popover-header: (
					background-color: transparent,
					border-color: transparent,
					padding-bottom: 0,
				),
				close: (
					color: $gray-600,
				),
			),
	),
	$popovers
);

// .popover-header

$popover-header: () !default;
$popover-header: map-deep-merge(
	(
		color: $popover-header-color,
		background-color: $popover-header-bg,
		border-bottom: $popover-border-width solid
			clay-darken($popover-header-bg, 5%),
		border-color: $popover-header-border-color,
		border-top-left-radius:
			clay-enable-rounded($popover-inner-border-radius),
		border-top-right-radius:
			clay-enable-rounded($popover-inner-border-radius),
		font-size: $popover-header-font-size,
		font-weight: $popover-header-font-weight,
		margin-bottom: $popover-header-margin-y,
		margin-left: $popover-header-margin-x,
		margin-right: $popover-header-margin-x,
		margin-top: $popover-header-margin-y,
		padding: $popover-header-padding-y $popover-header-padding-x,
		empty: (
			display: none,
		),
	),
	$popover-header
);

// Popover Headers

$popover-headers: () !default;
$popover-headers: map-deep-merge(
	(
		popover-header: $popover-header,
	),
	$popover-headers
);

// .popover-body

$popover-body: () !default;
$popover-body: map-merge(
	(
		border-bottom-left-radius:
			clay-enable-rounded($popover-offset-border-width),
		border-bottom-right-radius:
			clay-enable-rounded($popover-offset-border-width),
		color: $popover-body-color,
		padding: $popover-body-padding-y $popover-body-padding-x,
	),
	$popover-body
);

// Popover Bodies

$popover-bodies: () !default;
$popover-bodies: map-deep-merge(
	(
		popover-body: $popover-body,
	),
	$popover-bodies
);

// Popover Widths

$popover-widths: () !default;
$popover-widths: map-deep-merge(
	(
		popover-width-lg: (
			max-width: 421px,
		),
	),
	$popover-widths
);

// .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right

$clay-popover-top: () !default;
$clay-popover-top: map-deep-merge(
	(
		margin-bottom: $popover-arrow-height,
		arrow: (
			left: 50%,
			margin-left: math-sign($popover-arrow-width * 0.5),
			bottom:
				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
			margin: 0,
			before: (
				border-top-color: $popover-arrow-outer-color,
				border-width: $popover-arrow-height
					(
						$popover-arrow-width * 0.5,
					)
					0,
				bottom: 0,
			),
			after: (
				border-top-color: $popover-top-arrow-color,
				border-width: $popover-arrow-height
					(
						$popover-arrow-width * 0.5,
					)
					0,
				bottom: $popover-border-width,
			),
		),
	),
	$clay-popover-top
);

// .clay-popover-top-left

$clay-popover-top-left: () !default;
$clay-popover-top-left: map-deep-merge(
	(
		arrow: (
			left: $popover-arrow-offset,
			margin: 0,
			after: (
				border-top-color: $popover-top-left-arrow-color,
			),
		),
	),
	$clay-popover-top-left
);

// .clay-popover-top-right

$clay-popover-top-right: () !default;
$clay-popover-top-right: map-deep-merge(
	(
		arrow: (
			left: auto,
			right: $popover-arrow-offset,
			margin: 0,
			after: (
				border-top-color: $popover-top-right-arrow-color,
			),
		),
	),
	$clay-popover-top-right
);

// .clay-popover-right, .clay-popover-right-bottom, .clay-popover-right-top

$clay-popover-right: () !default;
$clay-popover-right: map-deep-merge(
	(
		margin-left: $popover-arrow-height,
		arrow: (
			height: $popover-arrow-width,
			left:
				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
			margin: math-sign($popover-arrow-height * 0.5) 0 0,
			top: 50%,
			width: $popover-arrow-height,
			before: (
				border-right-color: $popover-arrow-outer-color,
				border-width: (
					$popover-arrow-width * 0.5,
				)
				$popover-arrow-height
				(
					$popover-arrow-width * 0.5,
				)
				0,
				left: 0,
			),
			after: (
				border-right-color: $popover-right-arrow-color,
				border-width: (
					$popover-arrow-width * 0.5,
				)
				$popover-arrow-height
				(
					$popover-arrow-width * 0.5,
				)
				0,
				left: $popover-border-width,
			),
		),
	),
	$clay-popover-right
);

// .clay-popover-right-bottom

$clay-popover-right-bottom: () !default;
$clay-popover-right-bottom: map-deep-merge(
	(
		arrow: (
			bottom: $popover-arrow-offset,
			margin: 0,
			top: auto,
			after: (
				border-right-color: $popover-right-bottom-arrow-color,
			),
		),
	),
	$clay-popover-right-bottom
);

// .clay-popover-right-top

$clay-popover-right-top: () !default;
$clay-popover-right-top: map-deep-merge(
	(
		arrow: (
			margin: 0,
			top: $popover-arrow-offset,
			after: (
				border-right-color: $popover-right-top-arrow-color,
			),
		),
	),
	$clay-popover-right-top
);

// .clay-popover-bottom, .clay-popover-bottom-left, .clay-popover-bottom-right

$clay-popover-bottom: () !default;
$clay-popover-bottom: map-deep-merge(
	(
		margin-top: $popover-arrow-height,
		arrow: (
			left: 50%,
			margin: 0 0 0 math-sign($popover-arrow-width * 0.5),
			top:
				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
			before: (
				border-bottom-color: $popover-arrow-outer-color,
				border-width: 0
					(
						$popover-arrow-width * 0.5,
					)
					$popover-arrow-height
					(
						$popover-arrow-width * 0.5,
					),
				top: 0,
			),
			after: (
				border-bottom-color: $popover-bottom-arrow-color,
				border-width: 0
					(
						$popover-arrow-width * 0.5,
					)
					$popover-arrow-height
					(
						$popover-arrow-width * 0.5,
					),
				top: $popover-border-width,
			),
		),
	),
	$clay-popover-bottom
);

// .clay-popover-bottom-left

$clay-popover-bottom-left: () !default;
$clay-popover-bottom-left: map-deep-merge(
	(
		arrow: (
			left: $popover-arrow-offset,
			margin: 0,
			after: (
				border-bottom-color: $popover-bottom-left-arrow-color,
			),
		),
	),
	$clay-popover-bottom-left
);

// .clay-popover-bottom-right

$clay-popover-bottom-right: () !default;
$clay-popover-bottom-right: map-deep-merge(
	(
		arrow: (
			left: auto,
			right: $popover-arrow-offset,
			after: (
				border-bottom-color: $popover-bottom-right-arrow-color,
			),
		),
	),
	$clay-popover-bottom-right
);

// .clay-popover-left, .clay-popover-left-bottom, .clay-popover-left-top

$clay-popover-left: () !default;
$clay-popover-left: map-deep-merge(
	(
		margin-right: $popover-arrow-height,
		arrow: (
			height: $popover-arrow-width,
			margin: math-sign($popover-arrow-height * 0.5) 0 0,
			right:
				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
			top: 50%,
			width: $popover-arrow-height,
			before: (
				border-left-color: $popover-arrow-outer-color,
				border-width: (
					$popover-arrow-width * 0.5,
				)
				0
				(
					$popover-arrow-width * 0.5,
				)
				$popover-arrow-height,
				right: 0,
			),
			after: (
				border-left-color: $popover-left-arrow-color,
				border-width: (
					$popover-arrow-width * 0.5,
				)
				0
				(
					$popover-arrow-width * 0.5,
				)
				$popover-arrow-height,
				right: $popover-border-width,
			),
		),
	),
	$clay-popover-left
);

// .clay-popover-left-bottom

$clay-popover-left-bottom: () !default;
$clay-popover-left-bottom: map-deep-merge(
	(
		arrow: (
			bottom: $popover-arrow-offset,
			margin: 0,
			top: auto,
			after: (
				border-left-color: $popover-left-bottom-arrow-color,
			),
		),
	),
	$clay-popover-left-bottom
);

// .clay-popover-left-top

$clay-popover-left-top: () !default;
$clay-popover-left-top: map-deep-merge(
	(
		arrow: (
			margin: 0,
			top: $popover-arrow-offset,
			after: (
				border-left-color: $popover-left-top-arrow-color,
			),
		),
	),
	$clay-popover-left-top
);