@import '~styles/variables'
@import '~styles-lib/mixins'

// Sync with the JS so we know how long hides take.
$-transition-time = 200ms

.popper
	display: inline-block

	&-backdrop
		z-index: $zindex-popover - 1 !important

.popper.-block
	display: block !important

.popper-wrapper
	position: absolute
	top: 0
	z-index: $zindex-popover
	outline: 0
	transition: opacity $-transition-time, visibility $-transition-time

	// We don't want to show the popover stuff at all on SSR, or it breaks
	// styling since it tries to fit the container into the page.
	&.-ssr
		display: none !important

	&.-hide
		opacity: 0

	.popper-arrow
		width: 0
		height: 0
		border-style: solid
		border-color: var(--theme-bg-subtle)
		z-index: 1

	&[data-popper-placement^='top']
		padding-bottom: $popover-arrow-size * 1.5

		.popper-arrow
			border-width: $popover-arrow-size $popover-arrow-size 0 $popover-arrow-size
			border-left-color: transparent !important
			border-right-color: transparent !important
			border-bottom-color: transparent !important
			bottom: $popover-arrow-size * 0.5

	&[data-popper-placement^='bottom']
		padding-top: $popover-arrow-size * 1.5

		.popper-arrow
			border-width: 0 $popover-arrow-size $popover-arrow-size $popover-arrow-size
			border-left-color: transparent !important
			border-right-color: transparent !important
			border-top-color: transparent !important
			top: $popover-arrow-size * 0.5

	&[data-popper-placement^='right']
		padding-left: $popover-arrow-size * 1.5

		.popper-arrow
			border-width: $popover-arrow-size $popover-arrow-size $popover-arrow-size 0
			border-left-color: transparent !important
			border-top-color: transparent !important
			border-bottom-color: transparent !important
			left: $popover-arrow-size * 0.5

	&[data-popper-placement^='left']
		padding-right: $popover-arrow-size * 1.5

		.popper-arrow
			border-width: $popover-arrow-size 0 $popover-arrow-size $popover-arrow-size
			border-top-color: transparent !important
			border-right-color: transparent !important
			border-bottom-color: transparent !important
			right: $popover-arrow-size * 0.5

	&[data-popper-reference-hidden][data-popper-escaped]
		opacity: 0
		visibility: hidden
		pointer-events: none

.popper-content
	elevate-2()
	rounded-corners-lg()
	change-bg('bg-offset')
	theme-prop('border-color', 'bg-subtle')
	overflow: hidden
	max-width: $popover-size
	min-width: 200px
	border-width: $border-width-base
	border-style: solid

	&.-track-trigger-width
		max-width: none
		min-width: unset

	&.-force-max-width
		min-width: unset
		width: calc(100vw - 10px)
		max-width: $popover-size

	> nav.pills > ul
	> .button
		margin-bottom: $popover-spacing !important

	> nav.platform-list
		margin-bottom: 0
		margin-top: $popover-spacing * 2

	.alert
		margin-bottom: 0

	.well
		margin-bottom: 0

	hr
		margin-top: $popover-spacing
		margin-bottom: $popover-spacing

.popper-heading
	padding: $popover-spacing
	white-space: nowrap
	font-weight: bold
