.components-popover {
	position: fixed;
	z-index: z-index( ".components-popover" );
	left: 50%;

	&:not(.is-mobile) {
		margin-left: 2px;

		&:before {
			border: 8px solid $light-gray-500;
		}

		&:after {
			border: 8px solid $white;
		}

		&:before,
		&:after {
			content: "";
			position: absolute;
			margin-left: -10px;
			height: 0;
			width: 0;
			border-left-color: transparent;
			border-right-color: transparent;
			line-height: 0;
		}

		&.is-top {
			bottom: 100%;
			margin-top: -8px;

			&:before {
				bottom: -8px;
			}

			&:after {
				bottom: -6px;
			}

			&:before,
			&:after {
				border-top-style: solid;
				border-bottom: none;
			}
		}

		&.is-bottom {
			top: 100%;
			margin-top: 8px;
			z-index: z-index( ".components-popover.is-bottom" );

			&:before {
				top: -8px;
			}

			&:after {
				top: -6px;
			}

			&:before,
			&:after {
				border-bottom-style: solid;
				border-top: none;
			}
		}
	}
}

.components-popover__content {
	box-shadow: $shadow-popover;
	border: 1px solid $light-gray-500;
	background: $white;
	height: 100%;

	.components-popover.is-mobile & {
		height: calc( 100% - #{ $panel-header-height } );
		border-top: 0;
	}

	.components-popover:not(.is-mobile) & {
		position: absolute;
		min-width: 240px;
		height: auto;
	}

	.components-popover:not(.is-mobile).is-top & {
		bottom: 100%;
	}

	.components-popover:not(.is-mobile).is-center & {
		left: 50%;
		transform: translateX( -50% );
	}

	.components-popover:not(.is-mobile).is-right & {
		position: absolute;
		left: 100%;
		margin-left: -24px;
	}

	.components-popover:not(.is-mobile).is-left & {
		position: absolute;
		right: 100%;
		margin-right: -24px;
	}
}

// The withFocusReturn div
.components-popover__content > div {
	height: 100%;
}

.components-popover__header {
	align-items: center;
	background: $white;
	border: 1px solid $light-gray-500;
	display: flex;
	height: $panel-header-height;
	justify-content: space-between;
	padding: 0 8px 0 $panel-padding;
}

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

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