style.scss

$arrow-triangle-base-size: 14px;

$shadow-popover-border-default: 0 0 0 $border-width $gray-400;
$shadow-popover-border-default-alternate: 0 0 0 $border-width $gray-900;
$shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
$shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;

.components-popover {
	@include reset;
	z-index: z-index(".components-popover");
	will-change: transform;

	&.is-expanded {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: z-index(".components-popover") !important;
	}
}

.components-popover__content {
	background: $white;
	box-shadow: $shadow-popover-border-default, $elevation-medium;
	border-radius: $radius-medium;
	box-sizing: border-box;
	width: min-content;

	// Alternate treatment for popovers that put them at elevation zero with high contrast and smaller radius.
	.is-alternate & {
		box-shadow: $shadow-popover-border-default-alternate;
		border-radius: $radius-small;
	}

	// A style that gives the popover no visible ui.
	.is-unstyled & {
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	.components-popover.is-expanded & {
		position: static;
		height: calc(100% - #{ $panel-header-height });
		overflow-y: visible;
		width: auto;
		box-shadow: $shadow-popover-border-top-only;
	}
	.components-popover.is-expanded.is-alternate & {
		box-shadow: $shadow-popover-border-top-only-alternate;
	}
}

.components-popover__header {
	align-items: center;
	background: $white;
	display: flex;
	height: $panel-header-height;
	justify-content: space-between;
	padding: 0 8px 0 $grid-unit-20;
}

.components-popover__header-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.components-popover__close.components-button {
	z-index: z-index(".components-popover__close");
}

.components-popover__arrow {
	position: absolute;
	width: $arrow-triangle-base-size;
	height: $arrow-triangle-base-size;
	pointer-events: none;
	display: flex;

	// Thin line that helps to make sure that the underlying
	// popover__content's outline is fully overlapped by the
	// arrow
	&::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 1px;
		height: 2px;
		right: 1px;
		background-color: $white;
	}

	// Position and rotate the arrow depending on the popover's placement.
	// The `!important' is necessary to override the inline styles.
	&.is-top {
		bottom: -1 * $arrow-triangle-base-size !important;
		transform: rotate(0);
	}
	&.is-right {
		/*rtl:begin:ignore*/
		left: -1 * $arrow-triangle-base-size !important;
		transform: rotate(90deg);
	}
	&.is-bottom {
		top: -1 * $arrow-triangle-base-size !important;
		transform: rotate(180deg);
	}
	&.is-left {
		/*rtl:begin:ignore*/
		right: -1 * $arrow-triangle-base-size !important;
		transform: rotate(-90deg);
		/*rtl:end:ignore*/
	}
}

.components-popover__triangle {
	display: block;
	flex: 1;
}

.components-popover__triangle-bg {
	// Fill color is the same as the .components-popover__content's background
	fill: $white;
}

.components-popover__triangle-border {
	// Stroke colors are the same as the .components-popover__content's outline
	fill: transparent;
	stroke-width: $border-width;
	stroke: $gray-400;

	.is-alternate & {
		stroke: $gray-900;
	}
}