/*
Currently in use at:
- NDN
		Numerous pages
- DH.com
		Numerous pages
- Signup
		Custom component


Popover Component

	Popovers are used for any contextual content that shouldn't block
	the user. Some common uses are dropdown menus, hovercards, tooltips.

	Basic guidelines:
	- The default theme is light.
	- The default width is medium.
	- Popover content can vary, there are no strict dos and don'ts.
	- The max-height class is optional. It enforces a 60vh max-height.
	- It is possible to nest hover popovers inside of click popovers.
	- popovers with max-height cannot contain nested popovers.
	- Padding size can vary.
	- The caret is optional.
	- Replace .on-click with .on-hover for hover popovers.

	Usage:
	<div class="Popover-container on-click">
		<div class="Popover Popover--dark Popover--bottom
		Popover--flush-left Popover--max-height has-caret">
			<div class="Popover__wrapper">
				<div class="p-3">
					This is a dark themed popover with small padding. It appears
					below the clicked element, is flushed left, has max-height
					enforced, and has a caret. Note, popovers must live within
					.Popover-container. To enable popovers on hover, the
					.on-hover class must be included on the
					container.
				</div>
			</div>
		</div>
		<a class="btn js-toggle-popover">Click me</a>
	</div>

*/


// Base
.Popover-container {
	display: inline-block;
	position: relative;
}

.Popover {
	position: absolute;
	text-align: center;
	border-radius: $border-radius;
	border-width: 0;
	margin-bottom: 1rem;
	bottom: 100%;
	transform: translateX(-50%) translateY(-5px);
	box-shadow: 0 0 1px 1px rgba(31,45,61,.15);
	z-index: 999;
	opacity: 0;
	width: 300px;
	visibility: hidden;
}

.Popover,
.Popover.has-caret:after {
	background: $c-w100;
	color: $black;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

.Popover.has-caret:after {
	display: block;
	position: absolute;
	border-radius: $border-radius;
	width: 12px;
	height: 12px;
	content: '';
	transform: rotate(45deg);
	box-shadow: 1px 1px 0 0 rgba(31,45,61,.15);
	bottom: -5px;
}

.Popover.is-open,
.on-hover:hover > .Popover,
.on-hover:focus > .Popover {
	opacity: 1;
	height: auto;
	overflow: visible;
	visibility: visible;
}

/*
	Max height:
	Enforces 60% viewport maximum height.
 */
.Popover--max-height .Popover__wrapper{
	max-height: 60vh;
	height: 100%;
	overflow-y: hidden;
}

.Popover--max-height.is-open .Popover__wrapper {
	overflow-y: scroll;
}


/*
	Themes:
	- Popover--dark
	- Popover--error
	- Popover--success
*/
.Popover {
	&.Popover--dark {
		&,
		& a {
			color: $c-w100;
		}

		&,
		&.has-caret:after {
			background: $c-b700;
		}
	}

	&.Popover--error {
		&,
		& a {
			color: $c-w100;
		}

		&,
		&.has-caret:after {
			background: $c-r300;
		}
	}

	&.Popover--success{
		&,
		& a {
			color: $c-w100;
		}

		&,
		&.has-caret:after {
			background: $c-t500;
		}
	}
}

/*
	Alignment:
	- Popover--right
	- Popover--bottom
	- Popover--left

	Positioning:
	- Popover--flush-top
	- Popover--flush-right
	- Popover--flush-bottom
	- Popover--flush-left
*/
.Popover--bottom {
	margin-bottom: 2rem;
	transform: translateX(-50%);
}

.Popover:after,
.Popover--bottom:after {
	margin-left: -6px;
}

.Popover,
.Popover:after,
.Popover--bottom,
.Popover--bottom:after {
	left: 50%;
}

.Popover.is-open,
.on-hover:hover > .Popover,
.on-hover:focus > .Popover {
	transform: translateX(-50%) translateY(0);
}

.Popover.Popover--flush-left,
.Popover.Popover--flush-right {
	transform: translateX(0);
}

.Popover.Popover--flush-left,
.Popover--bottom.Popover--flush-left {
	left: 0;
}

.Popover.Popover--flush-right,
.Popover--bottom.Popover--flush-right {
	right: 0;
	left: auto;
}

.Popover.Popover--flush-left,
.Popover--bottom.Popover--flush-left,
.Popover.Popover--flush-right,
.Popover--bottom.Popover--flush-right {
	transform-origin: left bottom;
}

.Popover.Popover--flush-left,
.Popover.Popover--flush-right,
.Popover--bottom.Popover--flush-left.is-open,
.Popover--bottom.Popover--flush-right.is-open,
.on-hover:hover > .Popover--bottom.Popover--flush-left,
.on-hover:hover > .Popover--bottom.Popover--flush-right,
.on-hover:focus > .Popover--bottom.Popover--flush-left,
.on-hover:focus > .Popover--bottom.Popover--flush-right {
	transform: translateX(0) translateY(-5px);
}

.Popover--bottom.Popover--flush-left,
.Popover--bottom.Popover--flush-right,
.Popover:not(.Popover--bottom).Popover--flush-left.is-open,
.Popover:not(.Popover--bottom).Popover--flush-right.is-open,
.on-hover:hover > .Popover--top.Popover--flush-left,
.on-hover:hover > .Popover--top.Popover--flush-right,
.on-hover:focus > .Popover--top.Popover--flush-left,
.on-hover:focus > .Popover--top.Popover--flush-right {
	transform: translateX(0) translateY(0);
}

.Popover--bottom.Popover--flush-left.has-caret:after,
.Popover.Popover--flush-left.has-caret:after {
	left: 28px;
}

.Popover--bottom.Popover--flush-right.has-caret:after,
.Popover.Popover--flush-right.has-caret:after {
	right: 28px;
	left: auto;
}

.Popover--bottom {
	margin-top: 1rem;
	top: calc(100% + 5px);
	transform: translateX(-50%) translateY(0);
}

.Popover--bottom.has-caret:after {
	box-shadow: -1px -1px 0 0 rgba(31,45,61,.15);
	top: -5px;
}

.Popover--bottom.is-open,
.on-hover:hover > .Popover--bottom,
.on-hover:focus > .Popover--bottom {
	transform: translateX(-50%) translateY(-5px);
}

.Popover--right {
	margin-left: 1rem;
	left: 100%;
}

.Popover--left:after,
.Popover--right:after {
	margin-top: -4px;
}

.Popover--right,
.Popover--right:after,
.Popover--left,
.Popover--left:after {
	top: 50%;
}

.Popover--right,
.Popover--left {
	transform: translateX(0) translateY(-50%);
}

.Popover--right,
.Popover--left,
.Popover--bottom {
	bottom: auto;
}

.Popover--right.is-open,
.on-hover:hover > .Popover--right,
.on-hover:focus > .Popover--right {
	transform: translateX(-5px) translateY(-50%);
}

.Popover--right.Popover--flush-bottom,
.Popover--left.Popover--flush-bottom.is-open,
.on-hover:focus > .Popover--left.Popover--flush-bottom,
.on-hover:hover > .Popover--left.Popover--flush-bottom {
	transform: translateX(0) translateY(calc(-100% + 1.24rem));
}

.Popover--right.Popover--flush-bottom.is-open,
.Popover--left.Popover--flush-bottom,
.on-hover:focus > .Popover--right.Popover--flush-bottom,
.on-hover:hover > .Popover--right.Popover--flush-bottom {
	transform: translateX(-5px) translateY(calc(-100% + 1.24rem));
}

.Popover--right.Popover--flush-top,
.Popover--left.Popover--flush-top.is-open,
.on-hover:focus > .Popover--left.Popover--flush-top,
.on-hover:hover > .Popover--left.Popover--flush-top {
	transform: translateX(0) translateY(calc(0% - 1.24rem));
}

.Popover--right.Popover--flush-top.is-open,
.Popover--left.Popover--flush-top,
.on-hover:focus > .Popover--right.Popover--flush-top,
.on-hover:hover > .Popover--right.Popover--flush-top {
	transform: translateX(-5px) translateY(calc(0% - 1.24rem));
}

.Popover--flush-top.has-caret:after {
	top: 2rem;
}

.Popover--flush-bottom.has-caret:after {
	bottom: 1.9rem;
	top: auto;
}

.Popover--right.has-caret:after {
	box-shadow: -1px 1px 0 0 rgba(31,45,61,.15);
	left: 1px;
}

.Popover--left {
	margin-left: 1rem;
	margin-right: 1rem;
	right: 100%;
	left: auto;
}

.Popover--left.is-open,
.on-hover:hover > .Popover--left,
.on-hover:focus > .Popover--left {
	transform: translateX(5px) translateY(-50%);
}

.Popover--left.has-caret:after {
	box-shadow: 1px -1px 0 0 rgba(31,45,61,.15);
	right: -5px;
	left: auto;
}


/*
	Sizes:
	- Popover--1
	- Popover--2
	- Popover--3
	- Popover--4
	- Popover--5
*/

.Popover--1 {
	width: 200px;
}

.Popover--2 {
	width: 300px;
}

.Popover--3 {
	width: 400px;
}

.Popover--4 {
	width: 500px;
}

.Popover--5 {
	width: 600px;
}


/*
	Dropdown Content:
	- Popover__section
*/

.Popover__section {
	// Separator classes
	&--separator {
		border-top: 1px solid darken($c-g200, 5%);

		.Popover--dark & {
			border-color: darken($c-g500, 5%);
		}
	}

	// Round corners on first/last section
	&:first-child {
		border-radius: $border-radius $border-radius 0 0;
	}
	&:last-child {
		border-radius: 0 0 $border-radius $border-radius;
	}
}