@schukai/monster/source/components/style/popper.css

Monster is a simple library for creating fast, robust and lightweight websites.

/** generated from popper.pcss **/
div[data-monster-role="popper"] {
	background: var(--monster-bg-color-primary-1);
	border-color: var(--monster-bg-color-primary-4);
	border-radius: var(--monster-border-radius);
	border-style: var(--monster-border-style);
	border-width: var(--monster-border-width);
	box-shadow: var(--monster-box-shadow-1);
	box-sizing: border-box;
	color: var(--monster-color-primary-1);
	display: none;
	padding: 1.1em;
	z-index: var(--monster-z-index-modal);
}
[data-popper-arrow],
[data-popper-arrow]:before {
	background: inherit;
	height: calc(
		max(
			var(--monster-popper-witharrrow-distance),
			-1 *
			var(--monster-popper-witharrrow-distance)
		) *
		2
	);
	position: absolute;
	width: calc(
		max(
			var(--monster-popper-witharrrow-distance),
			-1 *
			var(--monster-popper-witharrrow-distance)
		) *
		2
	);
}
[data-popper-arrow] {
	visibility: hidden;
}
[data-popper-arrow]:before {
	box-sizing: border-box;
	content: "";
	transform: rotate(45deg);
	visibility: visible;
}
div[data-popper-placement^="top"] > [data-popper-arrow] {
	bottom: calc(
		var(--monster-popper-witharrrow-distance) -
		var(--monster-border-width) /
		2
	);
}
div[data-popper-placement^="top"] > [data-popper-arrow]:before {
	border-bottom: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
	border-left: transparent;
	border-right: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
	border-top: transparent;
}
div[data-popper-placement^="bottom"] > [data-popper-arrow] {
	top: calc(
		var(--monster-popper-witharrrow-distance) -
		var(--monster-border-width)
	);
}
div[data-popper-placement^="bottom"] > [data-popper-arrow]:before {
	border-bottom: transparent;
	border-left: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
	border-right: transparent;
	border-top: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
}
div[data-popper-placement^="left"] > [data-popper-arrow] {
	right: calc(
		var(--monster-popper-witharrrow-distance) -
		var(--monster-border-width)
	);
}
div[data-popper-placement^="left"] > [data-popper-arrow]:before {
	border-bottom: transparent;
	border-left: transparent;
	border-right: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
	border-top: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
}
div[data-popper-placement^="right"] > [data-popper-arrow] {
	left: calc(
		var(--monster-popper-witharrrow-distance) -
		var(--monster-border-width) /
		2
	);
}
div[data-popper-placement^="right"] > [data-popper-arrow]:before {
	border-bottom: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
	border-left: var(--monster-border-width) var(--monster-border-style)
		var(--monster-bg-color-primary-4);
	border-right: transparent;
	border-top: transparent;
}