/*
Taken in full from here: https://codepen.io/pen/?editors=0110

i wish this required CSS was better documented :(
https://github.com/FezVrasta/popper.js/issues/674
derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
*/

.popper,
.tooltip {
	position: absolute;
	z-index: 9999;
	background: #ffc107;
	color: black;
	width: 150px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	padding: 10px;
	text-align: center;
}
.style5 .tooltip {
	background: #1e252b;
	color: #ffffff;
	max-width: 200px;
	width: auto;
	font-size: 0.8rem;
	padding: 0.5em 1em;
}
.popper .popper__arrow,
.tooltip .tippy-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	margin: 5px;
}

.tooltip .tippy-arrow,
.popper .popper__arrow {
	border-color: #ffc107;
}
.style5 .tooltip .tippy-arrow {
	border-color: #1e252b;
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
	margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tippy-arrow {
	border-width: 5px 5px 0 5px;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	bottom: -5px;
	left: calc(50% - 5px);
	margin-top: 0;
	margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
	margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tippy-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
	border-width: 0 5px 5px 5px;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	top: -5px;
	left: calc(50% - 5px);
	margin-top: 0;
	margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
	margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tippy-arrow {
	border-width: 5px 5px 5px 0;
	border-left-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	left: -5px;
	top: calc(50% - 5px);
	margin-left: 0;
	margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
	margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tippy-arrow {
	border-width: 5px 0 5px 5px;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	right: -5px;
	top: calc(50% - 5px);
	margin-left: 0;
	margin-right: 0;
}

.tippy-box[data-theme~="light"] {
	background-color: #fff;
	color: #000;
}

.tippy-arrow {
	color: #fff;
}

/* .tippy-box[data-theme~="light"] .tooltip {
	color: #26323d;
	box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
		0 4px 80px -8px rgba(36, 40, 47, 0.25),
		0 4px 4px -2px rgba(91, 94, 105, 0.15);
	background-color: #fff;
}
.tippy-box[data-theme~="light"] .tooltip[data-placement^="top"] > .tippy-arrow {
	border-width: 8px 8px 0;
	border-top-color: #fff;
}
.tippy-box[data-theme~="light"]
	.tooltip[data-placement^="bottom"]
	> .tippy-arrow {
	border-width: 0 8px 8px;
	border-bottom-color: #fff;
}
.tippy-box[data-theme~="light"]
	.tooltip[data-placement^="left"]
	> .tippy-arrow {
	border-width: 8px 0 8px 8px;
	border-left-color: #fff;
}
.tippy-box[data-theme~="light"]
	.tooltip[data-placement^="right"]
	> .tippy-arrow {
	border-width: 8px 8px 8px 0;
	border-right-color: #fff;
}
.tippy-box[data-theme~="light"] .tooltip > .tippy-backdrop {
	background-color: #fff;
}
.tippy-box[data-theme~="light"] .tooltip > .tippy-svg-arrow {
	fill: #fff;
} */